A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!
Ahmad runs through some of the scenarios where text-wrap: balance could be handy.
Even though it’s not well-supported yet in browsers, there’s no reason not to start adding it to sites now; it’s classic progressive enhancement.
How do we write, design, and code a link that works for everyone on every device? Let’s dive into the world of creating the perfect link, without making a pig’s breakfast of it.
Check out the demo that Rich has put together to go with Amelia’s proposed syntax.
This is a terrific walkthrough from Andy showing how smart fundamentals in your CSS can give you a beautiful readable document without much work.
Rich explains what text-wrap:balance does …and what it doesn’t.
I agree with the reasoning here—a new display value would be ideal.
There’s a broader point here about declarative design:
Setting very specific values may feel like you’re in more control, but you’re actually rescinding control by introducing fragility in the form of overly-specific CSS.
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.
I did not know about box-decoration-break—sounds like a game-changer for text effects that wrap onto multiple lines.
Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.
Hear, hear!
If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.
All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.
A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.
This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!
Here’s a remarkably in-depth timeline of the web’s finest programming language, from before it existed to today’s thriving ecosystem. And the timeline is repsonsive too—lovely!
Well, now I’m really glad I wrote that post about logical properties!
We’re not there yet. So how do we get there?
Well, I don’t know for sure – but articles like this are very helpful as we try to work it out!
Dave rounds up some of the acronymtastic ways of scoping your CSS now that we’ve got a whole new toolkit at our disposal.
If your goal is to reduce specificity, new native CSS tools make reducing specificity a lot easier. You can author your CSS with near-zero specificity and even control the order in which your rules cascade.
A terrific tour of just some of the fantastic ways you can use :has() in CSS.
The section on using it with sibling selectors blew my mind:
How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.
h2:has(+ p) { margin-bottom: 0; }Amazing.