Lowering the specificity of multiple rules at once - Manuel Matuzovic
This is clever, and seems obvious in hindsight: use an anonymous @layer for your CSS reset rules!
This is clever, and seems obvious in hindsight: use an anonymous @layer for your CSS reset rules!
I’ve added this handy little bit of CSS to my starting styles.
A fantastic explanation of the building blocks of SVG, illustrated—as always—with Josh’s interactive examples.
A UI library for people who love HTML, powered by modern CSS and Web Components.
A great talk by Matthias on what you can do with web standards today!
This is clever: putting CSS inside a noscript element to hide anything that requires JavaScript.
- Springy easing with
linear()- Typed custom properties
- View transitions for page navigation
- Transition animation for
dialogandpopover- Transition animation for
details- Animated adaptive gradient text
I like the approach here: logical properties and sensible default type and spacing.
Picture me holding Trys back and telling him, “Leave it alone, mate, it’s not worth it!”
This is a very handy piece of work by Rich:
The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType. The main principle is that it can be used as starting point for all projects, so doesn’t include design-specific aspects such as font choice, type scale or layout (including how you might like to set the line-length).
Speaking of zines, I really like Benjamin’s ideas about a web-first indie web zine: using print stylesheets with personal websites to make something tangible but webby.
This is good advice:
Write alternative text as if you’re describing the image to a friend.
Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp() values, the clamp calculator has you covered.
It’s got permalinks too!
A solid update to Andy’s four-years old CSS reset. Best of all, every single line comes with an explanation. So if you don’t like the reasoning, don’t use that line.
Imagine a collaboratively developed, universal content style guide, based on usability evidence.
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.