Getting Acquainted with Initial

If someone walked up to me the other day and asked me what the difference between inherit and initial is, I may have replied:

“What, there’s a difference?”

I’ve been writing CSS for more than ten years, but I’ve somehow escaped understanding what exactly initial is or does. Call it ignorance, laziness, or luck, but inherit has gotten me by and I never thought to look up when initial might be used instead. So, this post is gonna share some of the things I learned.

What initial means

First off, the spec helps us understand the difference between an initial keyword and an initial value.

• Initial keyword: If the cascaded value of a property is the initial keyword, the property’s initial value becomes its specified value.
• Initial value: Each property has an initial value, defined in the property’s definition table. If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value.

Umm, okay. I ran those definitions through Google Translate (joking!) and came out with this:

The initial keyword is what is declared as the property where the initial value is the resulting output, as defined by the browser default.

So, if the initial keyword is used here:

.module {
  color: initial;
}

…then the initial value might return as black, if black is the browser default for that element’s property.

How it is different from inherit

If you’re thinking this sounds a lot like inherit, then you’re absolutely right. It does sounds a heck of lot like that.

But initial and inherit are distinct in the extra step that inherit takes to check whether there are other properties it can use in the cascade before it moves to the initial value.

An example of the difference

See the Pen CSS Initial vs. Inherit by CSS-Tricks (@css-tricks) on CodePen.

See that? The properties in the left box are all set to inherit the values of the .module class since it the parent element. On the flip side, the properties in the right box are set to initial, which resets the element’s properties to the browser defaults.

When to use initial

I like to think of initial as a hard reset. It’s easy for styles to get convoluted as CSS grows, and using initial is a way to clear things out so an element can go back to its natural state of being. If initial were old-school Nintendo, I would use it as the equivalent to pulling out a buggy game cartridge from the console and blowing into it (even though doing so supposedly had no effect).

But that doesn’t mean initial is a silver bullet for resets. That’s because initial values are still subject to browser defaults, which we know can vary from browser to browser.

Oh wait, you use CSS resets? You can expect those to be used as initial values instead.

Bottom line: I would use initial to completely wipe out any inherited styles from an element and use inherit to make sure the element takes its cues from the nearest parent.

A more practical use case

Here’s an example of how initial can be used to create alternating colored lines in tables.

See the Pen CSS Initial by CSS-Tricks (@css-tricks) on CodePen.

Browser Support

MDN has a nice breakdown of the current support for initial. Note the glaring lack of IE support.

Wrapping Up

I’ve been racking my brain for some interesting use cases for initial. While I see a lot of potential usefulness in being able to use default styles on an element, I just haven’t come across them in a practical application—though that could say a lot more about me than the property value itself.

Where this will come in real handy is when all gains more support as a property. That would make declaring all: initial a real powerful tool for creating resets on any element.

Please share any situations where initial was something you had to use in a project. Bonus points if you’ve used it for any tricky feats.