back to the future still image of the dalorian and marty mcfly

Revert/Reset Rich Text Editor Styles to Browser Defaults

PublishedFeb 27th, 2022

So let’s find out how much of a web dork you are:

Do you…

A) Celebrate being able to use a CSS property that you rarely find a use case for?

B) Find great delight in using a CSS property that wields great power over the elements the rule selects for?

If you in any way answered in the affirmative to either of those questions, chances are you a bonafide web dork.

Your reward? Today we get to do both!

TL;DR

The Use Case

Maybe you’ve used many typographical styles high up on your site’s <html> or <body> elements and want to revert them to the user agent styles (browser defaults) for a particular parent element and all its children.

In my particular scenario, I have server-rendered content coming from a rich-text editor and I don’t care too much about how the font styles are, but I know for sure they shouldn’t be like my site-wide typography settings.

Thus, I want to revert them to browser defaults (and perhaps modify them slightly afterwards).

A Solution

For this nuclear option, let’s use the drastic all CSS property.

.some-container * {
  all: revert;
}

The all property will reset/revert all properties of element, save for some properties you’ve probably never heard of and will never use (MDN docs if you care).

Unlike all: unset;, which restores the elements styles to whatever they would have inherited or been otherwise (meaning had other rules not applied styles to it), all: revert will restore the elements properties to whatever the elements styles would be had you never written a style anywhere for it.

Simply said, this reverts the styles of an element back to browser defaults.