Using Initial Keyword in CSS

The initial keyword is a real mystery for a lot of developers. It is something like a reset for CSS properties.

I’m that guy who use the property’s default value – which is mostly auto, 0, normal or something similar – if he wants to reset a property. I don’t know the reason but for me, the initial value was a blind spot. Thus I made some research and I found it is an interesting piece of CSS which can cause some misunderstanding.

So what initial keyword means?

Using the initial keyword you can set every property to the CSS specification’s initial value or if there isn’t any to the browser’s default value. It has to be noted that the browser defaults can be varied. So if I want to set a property to the initialized value I just need to set initial as a value:

.element { 
    color: initial; 
}

In this case, the element’s color will be black because this property has the black default value in the most browsers.

.element { 
    width: initial;
    padding: initial;
}

With this line, you can set the initial value for the width (which is auto) and padding (which is zero) property.

You need also know that this value doesn’t care about your element. If you use a div and want to reset it to the default display value you get display: inline; (because this is the initial value) however, your div by default is display: block;. In this case that display: block; line is came from your browser’s default – like the font-size in your headings.

As you read in the introduction you will not suffer any disadvantage if you don’t know the initial. This is because you can do most of the things more than one way in CSS.

For me was a surprise that a lot of people mixes the initial and inherit. We can see that the name of this two keyword is spoken for themselves. The initial refers to the initialized value while the inherit refers to the parent element’s value. So if you use the initial you bypassing the cascading and get the default (by the CSS spec) value.

What are the use cases?

This is tricky because there aren’t any complex use case. You will know if you need this in your code; for me this is mostly some overwriting situation.

If you want to support legacy browsers – which means IE and Opera Mini – you need a fallback (which is overkill in this case) so simply use the exact value like zero, none, normal, auto.

Summary

This CSS feature is so small that it is intermediate. This is something you have to know to understand better your stylesheets.

12 thoughts on “Using Initial Keyword in CSS

  1. > Using the initial keyword you can set every property to the browser’s default value.

    I don’t think this is correct. The computed value of initial is defined, for each CSS property, in the CSS spec itself, and it doesn’t depend on the browser (nor the HTML element to which the style is applied, for that matter).

    On the other hand, browsers have their own default style sheets, and it is actually possible to do what you described using the revert keyword, which is unfortunately still only supported in WebKit (last I checked).

    For example, notice how div { display: initial } makes all divs inline, despite the browsers’ default being div { display: block } (e.g. https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L50 ). So, by using initial, you bypass both the page’s styles *and* the browser’s styles, going all the way back to the definition of the relevant property in the CSS spec (in this example, https://drafts.csswg.org/css-display/#the-display-properties ).

    1. I was about to write this exact comment. 😉
      One addition, this is kind of true for the `color` property as the spec does not define an initial color, so `color: initial` applies the default browser’s one. And so, also true for initial values that is `currentColor` (borders for example). Except those cases, `initial` is always initial values as in spec.

        1. Yes, your last sentence is correct. AFAIK, `color` is the only property that don’t have an initial value in spec. Every other properties have one.

          1. Thanks for your help! Can I add your link to the article for the contribution? If so, do you have any social profile or personal site which I can link in the post?

    2. Hi Šime!

      Without the whole article, I get your point and that sentence alone is can be false. With the other text, I don’t see this problem so black and white but I see your point! This default and initial naming, in this case, can be tricky, a “start value” could be more varied and more understandable.

      With iamvdo’s comment I think this can be correct: Using the initial keyword you can set every property to the CSS specification’s initial value or if there isn’t any to the browser’s default value.

      Thank you,
      Aadam

      1. I think, it *is* important to understand the difference between initial and the browsers’ default style sheet, since they result in different styles. Browsers have default styles for things like headings and bullet lists, and if you use initial on these elements, these default styles will be removed. If you don’t understand the difference, you won’t understand what’s going on.

        This can lead you to write code that is harder to maintain. In CSS, it is frighteningly easy to end up with a bloated code base—I mean, I probably have over *twenty* different line-height declarations in my simple single-page app that consists of basically a few different views, and I “fix” issues by adding *more* CSS code—so, I think, it’s crucial that we fully understand the CSS keywords.

        1. You are right! I highlighted the difference between them.

          For your example: but besides this there can be a way when the needed effect can be achieved with initial. On the other hand in a clean code it is not the right way because it smells a little bit.

          Can I add your link to the article for the contribution? If so, do you have any social profile or personal site what I can link in the post?

          Thanks for your time it was really useful!

Leave a Reply

Your email address will not be published. Required fields are marked *