By definition, stylesheet development involves setting CSS properties to new values. Complex stylesheets will eventually grow to the point at which CSS values need to be “wiped clean”, i.e. reset to their initial values. In some cases, those initial values are well-known and easy to remember; for other properties, they are not. Thankfully, modern CSS gives us an easy way to reset properties.

Push The Button

Let’s assume that you’ve set images to float: left by default:

img { float: left; }

Then, for an image in a particular circumstance (images of the class .recall), you want to reset the image to not float… and you can’t recall if that’s float: none or something else.

In other words, you do know that the default behaviour isn’t to have anything floated, but you don’t remember how to get there. Instead of looking it up, you could add the following to your stylesheet:

img.recall { float: initial; }

In most cases, this initial value will be the same or similar between all browsers. initial is particularly useful in a number of cases:

Use Cases

initial can be used to reset color. The initial color of body text in the vast majority of browsers is black, so the following CSS works to reset heading elements:

body { color: hsl(333, 50%, 25%); }
h1, h2, h3 { color: initial; }

There are several other uses for initial:

• resetting z-index back to its default for an element;
• resetting margins and transformations to their initial values

Stop Limits

One of the primary reasons behind the relatively rare use of initial in CSS is its complete lack of support in Internet Explorer, while it has been supported in all other browsers for many years. However, MS Edge has featured support for some time… and as a result, I expect that initial will make more appearances in site stylesheets in the future.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.