Modern Font Stacks
This is handy—a collection of font stacks using system fonts. You can see which ones are currently installed on your machine too.
The most performant web font is no web font.
This is handy—a collection of font stacks using system fonts. You can see which ones are currently installed on your machine too.
The most performant web font is no web font.
I love print stylesheets but I was today years old when I found out that print-color-adjust
exists.
I agree with the reasoning here—a new display
value would be ideal.
Hear, hear!
If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.
A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.
I think this might be the most excited I’ve been in quite some time about an update to browser support, which probably says a lot about my priorities:
Support for the
avoid
value of the CSS fragmentation propertiesbreak-before
,break-after
, andbreak-inside
when printing.
Finally!
I was talking about this with Léonie just yesterday. I, for one, would love to have CSS speech support. You know who else would love it? Content designers!
In these days of voice interaction on every platform, there is a growing expectation that it should be possible to design that experience just like we can the visual experience. In the same way an organisation chooses a logo and colour palette for its website, it stands to reason that they may also choose a particular voice that represents their brand.
It’s wild that there’s no way to do this on the web.
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 stylesheet for when you’re nostalgic for the old Mac OS.
Prompted by my recent post about using native button
elements, Trys puts forward a simple explanation for why someone would choose to use a div
instead.
The one common feature between every codebase I’ve encountered on that doesn’t use
button
s well, is a bad CSS reset. Developers try to use abutton
, and find that it still looks like a native browser button, so they grab a plain old, blank canvasdiv
, and build from there.
Occam’s Razor makes Trys’s explanation the most likely one.
I love this kind of spelunking into the history of why things are they way they are on the web!
Here, Detective Chief Inspector Suzanne tries to get to the bottom of why every browser has eight pixels of margin applied to the body
element in the user-agent stylesheet.
Here’s the video of my opening talk at this year’s CSS Day, which I thoroughly enjoyed!
It’s an exciting time for CSS! It feels like new features are being added every day. And yet, through it all, CSS has managed to remain an accessible language for anyone making websites. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? Let’s take a look at the history—and some alternative histories—of the World Wide Web to better understand where we are today. And then, let’s cast our gaze to the future!
A stylesheet to imitate paper—perfect for low-fidelity prototypes that you want to test.
This is a smart collection of situations to consider and the CSS to resolve them. It’s all about unearthing assumptions.
This CSS reset is pleasantly minimalist and a lot of thought has gone into each step. The bit about calculating line height is very intriguing!
This is a really in-depth explanation from Bramus of the upcoming @layer
rules in CSS, from the brilliant minds of Miriam, fantasai and Tab.
Basically, you’ll be able to scope styles, and you get to define the context for that scoping. So all those CSS-in-JS folks who don’t appreciate the cascade will have a mechanism to get encapsulated styles.
I can see this being very handy for big complex codebases with lots of people on the team.
This detailed proposal from Miriam for scoping CSS is well worth reading—it makes a lot of sense to me.
This is supposed to be a defence of utility classes …but it’s actually a great explanation of why classes in general are a great mechanism for styling.
I don’t think anyone has ever seriously suggested using inline styles—the actual disagreement is about how ludicrously rigid and wasteful the class names dictated by something like Tailwind are. When people criticise those classes they aren’t advocating for inline styles—they’re advocating for better class names and making more use of the power of the class selector in CSS, not less.
Anyway, if you removed every instance of the word “utility” from this article, it would still work.
Given the widespread browser support for prefers-reduced-motion
now, this approach makes a lot of sense.
Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!