CSS or BS?
We show you a CSS property name. You tell us if it’s real or if we made it up. That’s it. It starts easy. It does not stay easy.
Hybrid positioning with CSS variables and max() – Lea Verou
Yet another clever technique from Lea. But I’m also bookmarking this one because of something she points out about custom properties:
The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.
That explains an issue I was seeing recently! I couldn’t understand why an older browser wasn’t getting the fallback I had declared earlier in the CSS. Turns out that custom properties mess with that expectation.
Related links
Progressive Web Components | Ariel Salminen
I’m slapping my forehead—progressive web components is a perfect name for what I’ve been calling HTML web components. Why didn’t I think of that?
A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating.
Custom Asidenotes – Eric’s Archived Thoughts
An excellent example of an HTML web component from Eric:
Extend HTML to do things automatically!
He layers on the functionality and styling, considering potential gotchas at every stage. This is resilient web design in action.
Matthias Ott – Painting With the Web – beyond tellerrand Düsseldorf 20025 - YouTube
A great talk by Matthias on what you can do with web standards today!
Cascading Layouts | OddBird
A workshop on resilient CSS layouts
Oh, hell yes!
Do not hesitate—sign yourself up to this series of three online workshops by Miriam. This is the quickest to level up your working knowledge of the most powerful parts of CSS.
By the end of this you’re going to feel like Neo in that bit of The Matrix when he says “I know kung-fu!” …except kung-fu isn’t very useful for building resilient and maintainable websites, whereas modern CSS absolutely is.
Related posts
Style your underlines
Make your links beautiful and accessible.
content-visibility in Safari
Safari 18 supports `content-visibility: auto` …but there’s a very niche little bug in the implementation.
Displaying HTML web components
You might want to use `display: contents` …maybe.
Who knows?
Had you heard of these bits of CSS? Me too/neither!
Speedier tunes
Improving performance with containment.