New CSS that can actually be used in 2024 | Thomasorus
Logical properties, container queries, :has, :is, :where, min(), max(), clamp(), nesting, cascade layers, subgrid, and more.
CSS-only multiple choice quizzing - Matthew Somerville
In which Matthew disects a multiple choice quiz that uses CSS to do some clever logic, using the :checked pseudo-class and counter-increment.
Oh, and this is how he realised it wasn’t using JavaScript:
I have JavaScript disabled on my phone because a) it cuts out most of the ads, b) it cuts out lots of bandwidth and I have a limited data plan, and c) my battery lasts longer because it’s not processing tons of code to show me some text (cough, Medium).
Related links
My Modern CSS Reset | jakelazaroff.com
I like the approach here: logical properties and sensible default type and spacing.
Can you feel the rhythm‽ · 13 March 2024
Adam makes a very good point here: the term “vertical rhythm” is quite chauvanistic, unconciously defaulting to top-to-bottom writing modes; the term “logical rhythm” is more universal (and scalable).
Modern CSS in Real Life - Chris Coyier
This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.
Why aren’t logical properties taking over everything? - Chris Coyier
Good question.
I think it’s mostly inertia.
Related posts
Displaying HTML web components
You might want to use `display: contents` …maybe.
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Supporting logical properties
Using the CSS trinity of feature queries, logical properties, and unset.
Let’s get logical
Let me hear your blocky talk.
Declarative design
Defining the inputs instead of trying to control the outputs.