Language-wide Features in CSS

Language-wide Features in CSSIn addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec.

These often go unnoticed, especially by beginners, because when CSS properties and their possible values are discussed (in tutorials, books, or even in the spec), these features are usually omitted for brevity.

Here’s a summary of four language-wide CSS features.

Keyword: ‘inherit’

Every CSS property can accept, as its value, the keyword inherit. Like this:

span {
  font-size: inherit;
}

What this does is cause the targeted element to inherit the specified property value from its parent element. If the parent element does not have that specific property defined in the CSS, it will inherit the parent’s computed value (which could be the initial value or whatever is inherited from that element’s parent).

The inherit keyword can come in handy when you want to assign the same value to a bunch of child elements for properties that don’t normally inherit. For example:

.module {
  box-shadow:  0px 0px 11px rgba(0, 0, 0, 0.4);
}

  .module div {
    box-shadow: inherit;
  }

Now all <div> elements inside the main .module element will inherit its box shadow value.

Browser support for inherit is excellent. For a long time, nobody used inherit because IE6/7 didn’t support it except on the direction property. Now that those browsers are mostly out of the picture, most developers should feel comfortable using it.

Keyword: ‘initial’

This one is easy to understand and is newly added in the CSS3 spec (although, technically, as with many CSS3 features, it has been in the works for a while).

Every CSS property has an initial, or default value. By defining the value using the keyword initial, you are telling the browser to render the property using the default for that property.

So basically this is the same as not defining the property at all, so you might think it’s mostly useless. That’s partly true, because you probably won’t use this much. But when you do, it can be handy.

For example, you might want to use initial on a property that gets inherited from its parent by default, like color:

body {
  color: aquamarine;
}

.example {
  color: initial;
}

The .example element will normally have the same color set as that set on the body. But in this case, we’re overriding this by letting the color be reset to its initial state (which is probably black).

Also, this can come in handy when changing styles dynamically with JavaScript. Through a user interaction or other change, a property can be set to its initial state, even though it may be defined specifically be default.

As for browser support, I’m really not sure. It seems to work in the latest Chrome and Firefox, but not in the latest Opera or IE10.

Keyword: ‘unset’

This keyword value used to be called ‘default’ and has now been changed to ‘unset’. This is very similar to the initial keyword. Basically, using unset as the value will erase any explicitly defined value that may have been passed to the element for that property, or previously defined elsewhere.

body {
  font-size: 1.5em;
}

.module {
  font-size: unset;
}

The difference between unset and initial is the fact that the unset value could be an inherited value. So in a way, this is kind of a combination of the previous two keywords. When ‘unsetting’ a value, first the browser looks for an inherited value. If none is found (for example, for a property that doesn’t inherit, like border-color), then it sets it to the initial, or default value.

Since this is new, I don’t think it has any browser support yet.

Property: ‘all’

Finally, this is another new one: the all property. Naturally, this one would not be able to take custom values, so it has three possible keyword values: inherit, initial, and unset — the three keywords just discussed.

The all property resets all properties on the targeted element, with the exception of direction and unicode-bidi.

.example {
  all: initial;
}

The spec points out an interesting use case for all when it says:

This can be useful for the root element of a “widget” included in a page, which does not wish to inherit the styles of the outer page.

As for browser support, due to the fact that the three keyword it accepts are not supported cross-browser yet, this property is probably not going to be usable for at least a little while.

Advertise Here

13 Responses

  1. Scott:

    I’ve found the “inherit” keyword is most useful for form elements, because browsers ignore the style you’ve set for the body and have their own stuff in the user agent stylesheet, usually Arial/Helvetica.

  2. Jesse Beach:

    all: initial would be killer. We need this as app-like components become more prevalent as third-party services.

  3. Sahil:

    Very good read. I have been working with css for past 4 years but never knew about them.

    all: initial is awesome. It will help in solving specificity problems.

  4. Very useful for the future. As IE has now decided to catch up with the opposition it will make it easier for us lot to code for all browsers!!

  5. Alex Bell:

    It would be great to see a support chart for `all`.

  6. I’ve been using inherit a lot since the last few months. It really keeps the stylesheets clean. Thanks for information on all and unset, have never come across this. I was also using initial at some point, but it wouldn’t work reliably on IE, so I abandoned it.

  7. I’d like to contradict: The keyword initial is not easy to understand. Example: What is the computed value for divs with this snippet?

    
    div {
        display: initial;
    }
    

    Right, it’s obviously inline. Wait, what? Why? Because block is not the initial value of display as written in the spec, but inline is. And that is what is used with initial keyword: the initial value as defined in the spec for this property, not the browser’s default style. I bet, this will bite literally anyone using initial, when it gets implemented.

    • Yes, you’re correct about display: initial, but you’re assuming that someone would do something like what you just wrote, or even:

      
      * {
          display: iniital;
      }
      

      But I don’t think that will happen. These aren’t the types of selectors you’ll be using with such features. And if anyone uses “initial”, they would know what the initial value is going to be. It’s not something you’re going to use based on assumptions.

      But it’s early, so we won’t know until it’s supported. Thanks for the reminder, I had forgotten about that initial value.

  8. Great post, as you say ‘its not compatible everywhere yet’ which is true for alot of the latest tech, so my rules of thumb are progressive enhancement and using fall backs where required, study the analytical user / visitor data and create something that is robust for the user base per project.

  9. hey wrong place to post this, but your lea verou link i the cool stuff section is wrong. it should be pointing to http://lea.verou.me/

    • Oh, good catch! She had a domain dispute a while back, and changed, so it looks like she doesn’t own that domain anymore. Should be fixed now, pending the cache.

  10. Very good post and I agree, this may really help in the future. Thanks for sharing.

  11. Thanks for this! I didn´t know about “Initial” and it will be very useful!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.