With scroll-behavior: smooth
in your CSS you can tell browsers to animate scrolling to different parts of your site, for example when linking to an ID on a page. The javascript scrollTo
API has a behavior
option that lets you turn on smooth scrolling for one specific scroll regardless of the CSS being set or not.
But what if you want to do the opposite: turn smooth scrolling off for a specific scroll even if it’s turned on in the CSS?
CSS Specificity is usually written out as [a,b,c]
for ID’s, classes and elements respectively. Even a single ID is more specific than any number of classes or elements, so it’s displayed as an array and can’t really be fitted into a single number. How do you compare two selectors to decide which has the highest specificity?
I don’t get to work on a lot of new sites nowadays, but I recently got the opportunity to set one up from scratch. For most sites I built when I was still running an agency, I would use some form of CSS Reset, most often Normalize.css, but I figured that this time round I could do with a few basics, like box sizing and resetting margins on the body, and call it a day.
Last week, I got tagged twice in a Twitter thread about the new APCA color contrast algorithm, asking my opinion and when it was gonna appear in Polypane (it will). APCA has a lot of developers and designers excited, because its a much more thorough algorithm for color contrast compared to the algorithm currently in WCAG 2.