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.
I recently sat down with the folks at Devtools.fm to talk about my experiences as an indie developer building Polypane and Superposition, my experience working with Electron and my thoughts on the framework, and on FixA11y, the browser extension I’m building in my spare time. Listen to it below:
Native CSS nesting is coming to browsers soon. With nesting, that you might be familiar with from Sass or Less, you can greatly cut down on writing repetitive selectors. But you can also really work yourself into a corner if you’re not careful. This is an overview of how you can already use it today, the pitfalls and how to avoid them.
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
Use the design system you already have
A cross-platform, simple and smart autosaving scratchpad.
Go on a text adventure in Facebook Messenger.
The latest Electron news, articles, apps and interviews.
Drag-and-drop lossless compression of PNG and JPG images for web.
Demo your (bot) interactions on Messenger.