Header Logo

all: unset

Hello “all”. I had no idea this was a CSS attribute. It allows you to select all of the attributes that apply to an element. Couple that with the “unset” keyword and you can erase all the attribute values.

September 10, 2017-3 min read

I’m building a Chrome extension that’s a key part of an upcoming enhancement to my blog. To have the functionality I needed I had to inject an html component into every webpage that my browser loaded. Of course, to style it properly the cascading part of CSS was going to be a real hinderance in this situation. 

Every time I’d visit a website the widget would appear and have my styling rules applied to it but it would also inherit a bunch of other rules from whatever stylesheet(s) the website used. The style wasn’t make or break, the functionality was fine, but if I'm going to use a tool every day I’d prefer for it to have a little polish. Plus, if I ever decided to release the tool to the public I’d have to find a way to overcome it anyway. 

After a bunch of tinkering with iframe and object tags that yielded no fruit I thought I might be able to come up with a workaround through the CSS sheet I was injecting. It’s a pretty simple tool, the container element will only have a dozen or so child elements. 

Thirty minutes and about a dozen major websites later it was clear that there was no way to manually write overrides for every rule. That turned out to be a game of CSS Whack-A-Mole. Every website seems to have some special rule they apply globally that I just couldn’t anticipate. The outcome we both expected. What about erasing every rule that applies to my elements and then setting them back?

Hello, “all”. I had no idea this was a CSS attribute. It allows you to select all of the attributes that apply to an element. Couple that with the “unset” keyword and you can erase all the attribute values. This is great but it doesn’t quite solve the problem because it seems to be applied after load. You can’t put it above a selector and assume the bottom selector will be honored. For instance…

p { 
  all: unset;
}

p {
  background-color: black;
}

You'd think this would work but it doesn't. I'm not sure why.

However, if you use the keyword that every expert will advise you not to use you can get it to work.

p { 
  all: unset;
}

p {
  background-color: black !important;
}

This isn’t scalable and generally considered bad practice but for a small project like this it works.

The project I'm using it for looks like this:

A floating tool bar in every Chrome window that allows me to instantly save web pages and associated data via an extension. Amongst other things I do with the saved pages I also populate the reading list widget on my blog.


Update: 4 months into using this technique I've experienced no real issues. The only problem I have is when loading ESPN. I have to use another browser specifically for that site. I expected to have bad interactions with one or two sites given the brute force nature of the implementation. Again, for a non-production thing this is fine with me. If I were to put this out there to the public it would need to be more robust as it breaks the CSS on at least one major site.

© 2019 Phil Andrews