Printing music with CSS grid
Laying out sheet music with CSS grid—sounds extreme until you see it abstracted into a web component.
We need fluid and responsive music rendering for the web!
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
This is a great explanation of the difference between the [lang] and :lang CSS selectors. I wouldn’t even have thought’ve the differences so this is really valuable to me.
Related links
How would you build Wordle with just HTML and CSS? | Scott Jehl, Web Designer/Developer
This is a great thought exercise in progressive enhancement …that Scott then turns into a real exercise!
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).
CSS :has() Interactive Guide
This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!
Bill Oddie taught me how to make web sites - Hicks.design
I remember Jon telling me this lovely story when we first met in person. I love the idea that we had already met in a style sheet.
I also love the idea of hosting your own little internet archive—that Bill Oddie site still looks pretty great to me!
It’s a lot like an embarrassing family photo, but I’m owning it!
Related posts
Displaying HTML web components
You might want to use `display: contents` …maybe.
Assumption
Separate your concerns.
Culture and style
Styling a document about The Culture novels of Iain M Banks.
Supporting logical properties
Using the CSS trinity of feature queries, logical properties, and unset.
Let’s get logical
Let me hear your blocky talk.