I can’t contain my excitement while writing the first few words for this article. Ladies and gentlemen, CSS container queries are finally here! Yes, you read that right. They’re currently supported in Google Chrome (105) and soon in Safari 16. This is a huge milestone for web development. I see it just like when we started building responsive websites via media queries, which is a game changer. Container queries are equally important.
There are many great ways we express states and parameters of a component without having to shoehorn them into an archaic system like the class attribute. We have mechanisms today to replace it, we just need to unleash ourselves from our own shackles. Upcoming standards will allow us to express ideas in powerful new ways.
So rather than wave my hands emphatically and tell you “never ever use utility classes, damnit!”, I will instead offer some suggestions on how you might go about using utility classes without breaking the world in the process. I call these ideas “laws” in a very tongue-in-cheek way. (I don’t believe in programming laws.) Think of it more like the Pirate Code…more guidelines than rules!
The primitive Sidebar layout is a kind of quantum layout whereby the sidebar only exists as a sidebar where there is available space. As the Sidebar document details, wrapping from a two-column to a one-column layout depends on the relationship between two things: 1. A minimum percentage width for the non-sidebar element; 2. A preferred width for the sidebar element;
Bruce Lawson and Taylar Bouwmeester of Babylon’s Accessibility and Inclusion team take you on a wild, roller-coaster ride through the magical world of desktop screen readers. Who uses them? How they can help if developers use semantic HTML? How you can test your work with a desktop screenreader?