I like to think of CSS as a conditional design language.
Yes! This is exactly what I’m talking about with declarative design!
Read on for some fantastic examples. And also, Ahmad makes a comparison between CSS and Figma, pointing out that the conditional, declarative possibilities currently aren’t available in graphic design tools.
Okay, combining flex-basis and clamp() is pretty cool!
This is a good round-up of APIs you can use to decide if and how much JavaScript to load. I might look into using storage.estimate() in service workers to figure out how much gets pre-cached.
Ooh, this is clever! Scott shows how you can use rel="preload" to conditionally load JavaScript (say, for screens above a certain size). The browser support isn’t quite there yet, but the thinking here is smart.
A really interesting proposal for more logic constructs in CSS: when/else conditions. At first glance, this looks like it would complicate the language (and one of the most powerful features of CSS is its simplicity), but when you dig a bit deeper you realise that there’s nothing new enabled by this extra syntax—it actually simplifies what’s already possible.
Great stuff from James Wragg and the gang at Madgex: a way of lazy-loading ads for responsive sites without messing with the ad code.
A page to demonstrate the conditional CSS technique I documented a while back.
This is excellent! Scott, Wilto, and the gang at Filament Group have released the tools they use to help them craft performant responsive sites. Lots of excellent resources for conditional loading here.
This is nice: the solution I blogged about for conditional CSS (reading media queries from JavaScript) all wrapped up in a nice small reusable bundle.
Scott walks through the code and thinking behind the conditional loading pattern on The Boston Globe site. This is such a useful and valuable pattern!
Keep this one handy in case you have to use conditional comments to hide something from Internet Explorer.