An explosion in new CSS
As I sit here with the countdown to day 1 of our second Hover conference showing just under two hours to go, and having spent countless hours focussed on the conference program and the state of CSS over the last several months, it has brought into focus just how much is happening with CSS, and how sophisticated and powerful it is becoming.
So let’s round up some great recent articles on what’s happening with CSS to bring us up to speed.
Oh, and the presentations from Hover will be available in a few weeks on Conffab, along with dozens of other CSS focussed sessions from previous conferences of ours. It’s an engaging, great value ($19.95 a month or $195 a year) way to keep up to date not just with CSS, but all of front end development.
If you want a detailed overview of what’s new in CSS in 2022, Jen Simmons has a great presentation at Hover, and one of our other speakers, Bramus van Damme has a very detailed article he recently published on the state of CSS in 2022.
The Architecture of CSS
For such a widely used, significant technology as CSS, its fundamental architecture is often surprisingly poorly understood by developers. To begin, Cascade and Inheritance, two foundational aspects of how CSS styles content on a page, are often confused for one another, or thought of as essentially the same thing.
Relatively poorly understood too are specificity, and more generally the rules of how CSS from a myriad of potential origins–the browser’s style sheets (yes, browsers have style sheets, called “user agent style sheets” that provide the basic style of a page) developer’s style sheets (called “author style sheets”), inline styles set on an element (think <p style='color: red'>
)–actually untangle to style a page.
Meanwhile developers are often lack knowledge of the array of sophisticated selectors beyond class and id (such as attribute selectors that can allow you to style for example links that point to a particular domain), let alone the new selectors like :is
, :has
and :where
that are revolutionising how we do CSS.
Too often developers are more or less stuck in the 1990s when it comes to CSS (perhaps having added some of CSS3 properties to their repertoire).
But my prediction is this is about to change.
New Selectors
Let’s start with these new selectors (many not that new at all). Stephanie Eckles (who is speaking at Hover on Container Queries–more on them in a moment) rounded up all the changes to CSS selectors in the level 4 selectors specification about a year ago for Smashing Magazine. Meanwhile Adam Argyle (who spoke at Hover last year) zoomed in on two highly impactful new selectors, :is() and :where() (which also receive a lot of attention at Hover this year, including an entire presentation by Kilian Valkhof all about them).
These selectors will change how we write CSS, making it more resilient, more readable but also more more compact.
We (and I include myself in this) developers really do like to stick with what’s familiar and comfortable a lot of the time–we’re like the person with a hammer, for whom everything is a nail. And so our CSS and HTML is too often full of container divs that exist solely for added styling, and classes and divs for the same reason.
But by coming to grips with the broad range of selectors, and in particular these new selectors, we can move beyond the hammer, to a whole set of precision tools.
Parent selectors
And if you want to focus in on just the single most requested feature of CSS since the 1990s (not making it up, have the receipts) here’s an article all about the :has
selector (also referred to as the parent selector, but it’s much more than just selecting the parent of an element) from Ahmad Shadeed.
So learn these new selectors and transform the way you write and architect CSS. But there’s more coming in this department.
Cascade Layers
When I hear the term ‘layers’ in association with CSS I think of absolutely positioned layouts (WYSIWYG CSS editors like DreamWeaver called absolutely positioned elements in layouts “layers”)–though I have no idea if anyone under about 50 would make that association.
But Cascade Layers are actually a new approach to CSS that gives developers control over the cascade without resorting to adding !important
all over our CSS, or fiddling with selectors to increase their specificity-admit it, we’ve all done it countless times.
There are several recent articles (again from recent Hover speakers) to help understand what is one of the most significant changes to CSS in its history .
Ahmad Shadeed (again! The man is a machine of CSS education) has a fantastic detailed article, Hello CSS Cascade Layers, that goes into how cascade layers work, and how they will help write CSS with more confidence, along with use-cases and examples.
Meanwhile Miriam Suzanne has a A Complete Guide to CSS Cascade Layers,
your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or
!important
.
And not to be outdone, Bramus Van Damme, who spoke on day 1 at Hover on Cascade Layers (you’ll be able to access that presentation soon at Conffab) published The Future of CSS: Cascade Layers, a very detailed exploration of the technology.
Container Queries
The two most requested additions to CSS (according to the State of CSS Survey among other places) are the parent selector (which if you read above you’ll now know has arrived with the :has
selector) and container (also referred as ‘element’) queries.
Yep, we can now style an element based on properties not just of the containing page with media queries, but properties like the width of ancestor elements using, you guessed it, container queries. Yet again, Ahmad Shadeed (remember, machine) has an introduction and detailed overview, with examples and more.
Last year at Hover Miriam Suzanne, who is one of the folks who worked to standardise the feature gave an introduction to container queries (you can watch that now with a Conffab Plus membership), while this year, Stephanie Eckles takes a practical look at use cases for container queries.
Keep up with CSS, JavaScript and the whole of front end with our online events
I haven’t chosen the articles above because they are by speakers at Hover–it’s really the opposite-we seek out these folks to speak at our events because they have an unrivalled level of knowledge, and the ability to communicate in an engaging, enlightening way. And its not just CSS–we cover all of front end technology and practice at our series of online events across the year.
So, If you want to get up to speed with all this (and much more) then Conffab, at just $19.95 a month (or $195 a year) will give you access to all the Hover videos plus those from all our other conferences, past and future. And if you want to attend our conferences live as they happen, a premium membership ($59.95 of $595 a year) gives you that. 6 in depth conferences on all things front end across the year.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.