Language-wide Features in CSS

In 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.