Skip to content

The other day, I stumbled across two new CSS resets by Elad Shechter and Josh Comeau and found a lot of their ideas quite interesting – although I don’t agree with everything, like I stated in a comment on CSS-Tricks. But doing a bit more research on the latest and greatest in CSS lead me to another article by Elad Shechter about the keywords unset, initial and revert, that finally helped me to understand what these really do.

Elad uses a combination of these greatly in his CSS reset for resetting all properties, while keeping the display property from the user agent stylesheet. Otherwise, it would become inline for all elements, which would be quite unhandy.

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

[…]

But the coolest thing about this is, that stuff like form elements can now be reverted to the browser’s default style on-demand, e.g.:

input[type="radio"] {
    all: revert;
}

Over the last year, I’ve been mostly working on Tailwind-based projects, and I’m starting to realize, how much of CSS’ potential we are wasting when trying to solve everything by throwing a bunch of classed to the browser. On the other hand, the CSS spec and capabilities of CSS are evolving so fast, that it is becoming harder to keep up with everything unless you are a specialist. Finding a middle ground between »smart coding« and simplicity always requires great attention – you does not gain anything from writing ingenious code that even your future self cannot understand just a few months from now. And frameworks like Tailwind often help stopping us from trying to be too smart. ;-)

Given the fact, that :where() is not supported on iOS 13 and only has global support at the time of writing this (early 2022), I will still hold back with switching from my older CSS reset. But I’m looking forward to incorporating my new learnings in the near future.

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!

Loading ...