These experiments with transitioning variable font styles on hover might be silly, but I can see the potential for some beautiful interaction design.
Thursday, December 7th, 2017
Great advice on keeping your hyperlinks accessible.
Wednesday, November 29th, 2017
An excellent level-headed evaluation of styling and scripting form controls, weighing up the benefits and trade-offs. The more tightly you control the appearance, the less you get to benefit from the functionality (and accessibility) that the browser gives you for free …meaning you’ve now to got to work harder to replace it.
HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible?
Thursday, November 16th, 2017
Yes! I’ve wanted this forever!
Saturday, September 23rd, 2017
[selectors] Functional pseudo-class like :matches() with 0 specificity · Issue #1170 · w3c/csswg-drafts
A really interesting proposal from Lea that would allow CSS authors to make full use of selectors but without increasing specificity. Great thoughts in the comments too.
Tuesday, August 22nd, 2017
Lin gives a deep dive into Firefox’s new CSS engine specifically, but this is also an excellent primer on how browsers handle CSS in general: parsing, styling, layout, painting, compositing, and rendering.
Saturday, August 12th, 2017
Monica explains how Shadow DOM could be the perfect answer for scoping CSS:
Although, in a way, Shadow DOM is also another flavour of CSS-in-JS:
Thursday, July 6th, 2017
Geek humour is no laughing matter, as Chris demonstrates here with his thorough dissection of that coffee mug.
CSS is weird. It’s unlike any other code, and that makes a lot of programmers uncomfortable. But used wisely it can, in fact, be awesome.
It’s not often I say this, but read the comments.
Monday, July 3rd, 2017
This is an excellent proposal from Emil. If we can apply
display: contents to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:
The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But
display: contentsis not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.
Whaddya say, browser makers?
Wednesday, May 31st, 2017
My argument is relatively simple: creating a comprehensive styling mechanism for building complex user interfaces is startlingly hard, and every alternative to CSS is much worse. Like, it’s not even close.
Tuesday, May 30th, 2017
Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.
No images were harmed in the making of these form controls.
Tuesday, April 18th, 2017
Neither matters all that much and you can use every method on the same project without the universe imploding.
Some interesting approaches in the comments too.
Håkon wrote his doctoral thesis on CSS …which is kinda like Einstein writing a thesis on relativity. There’s some fascinating historical insight into the creation of the standards we use today.
Sunday, April 9th, 2017
I’ve been digging into CSS Grid a lot during the past week, so this post from Eric is very timely. On the surface it looks like a fairly simple use case but as you read through the explanation, it starts to become clear that the underlying thinking could be used in a lot of situations.
And, yes, like Eric, I too have been bitten by the Grid bug:
I’m working on my first redesign in a dozen years. If that doesn’t give you some sense of the power of Grid, well, I just don’t know what will.
Monday, April 3rd, 2017
It’s fascinating to look back at this early proposal for CSS from 1994 and see what the syntax might have been:
A one-statement style sheet that sets the font size of the h1 element:
h1.font.size = 24pt 100%
The percentage at the end of the line indicates what degree of influence that is requested (here 100%).
Wednesday, March 22nd, 2017
Thursday, November 24th, 2016
Wednesday, November 23rd, 2016
A really terrific piece by Heydon that serves as a rousing defence of the cascade in CSS. It’s set up in opposition to methodologies like BEM (and there’s plenty of back’n’forth in the comments), but the truth is that every project is different so the more approaches you have in your toolkit, the better. For many projects, something like BEM is a good idea. For others, not so much.
Funnily enough, I’ve been working something recently where I’ve been embracing the approach that Heydon describes—although, to be fair, it’s a personal project where I don’t have to think about other developers touching the HTML or CSS.
Saturday, August 6th, 2016
Some nifty layout tricks using the
writing-mode property in CSS.
Tuesday, June 28th, 2016
A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!