A bold proposal by Heydon to make the process of styling on the web less painful and more scalable. I think it’s got legs, but do we really need another three-letter initialism?
We waste far too much time writing and maintaining styles with JavaScript, and I think it’s time for a change. Which is why it’s my pleasure to announce an emerging web standard called CSS.
In reply to https://adactio.com/links/14129.
With quotes like For as long as anyone can remember, styling documents — affecting their appearance — has been facilitated via the JavaScript style property I can’t tell if it’s a joke or not. If it isn’t, I despair.Jemima runs through just some of the exciting new additions to CSS:
Replacing 150+ lines of JavaScript with just a few CSS features is genuinely wild. We’re able to achieve the same amount of complexity that we’ve always had, but now it’s a lot less work to do so.
And Jemima will be opening the show at Web Day Out in Brighton on the 12th of March if you want to hear more of this!
This is clever, and seems obvious in hindsight: use an anonymous @layer for your CSS reset rules!
Here’s a little snippet of CSS that solves a problem I’ve never considered:
The problem is that Live Text, “Select text in images to copy or take action,” is enabled by default on iOS devices (Settings → General → Language & Region), which can interfere with the contextual menu in Safari. Pressing down on the above link may select the text inside the image instead of selecting the link URL.
Here’s a comprehensive round-up of new CSS that you can use right now—you can expect to see some of this in action at Web Day Out!
Every one of these five proposals is worth a vote.
Mind you, Rich’s cynicism is understandable.
How to make the distance of link underlines proportional to the line height of the text.
Make your links beautiful and accessible.
Some styles I re-use when I’m programming with CSS.
Safari 18 supports `content-visibility: auto` …but there’s a very niche little bug in the implementation.
Try writing your HTML in HTML, your CSS in CSS, and your JavaScript in JavaScript.