Link tags: conditional

11

sparkline

Conditional CSS - Ahmad Shadeed

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.

Complex conditional width using flex-basis with clamp: Every Layout

Okay, combining flex-basis and clamp() is pretty cool!

Conditional JavaScript - JavaScript - Dev Tips

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.

Can Preload Cut the Mustard? | Filament Group, Inc., Boston, MA

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.

CSS When/Else Rules

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.

madgex/lazy-ads

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.

Media Query Events Example

A page to demonstrate the conditional CSS technique I documented a while back.

filamentgroup/Southstreet

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.

Springload: OnMediaQuery - Responsive Javascript

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.

An Ajax-Include Pattern for Modular Content | Filament Group, Inc., Boston, MA

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!

Valid downlevel-revealed conditional comments | 456 Berea Street

Keep this one handy in case you have to use conditional comments to hide something from Internet Explorer.