Divya Manian

RSS Feed Youtube Channel Github

Safe CSS Defaults

You know those nights when you race towards a deadline, banging out the CSS as fast as you can, there comes a moment when you pause…wondering what keyword would get rid of that z-index on that anchor, then you make the best guess you can, and type:

z-index: none;

Then go on in life, as it “renders” like you wanted it, it works, no big deal.

But it is. Specifying incorrect values might inject behaviour that you did not expect. It is quite possible that the currently incorrect value might be, in the future, used for a valid value which would distort the design you so carefully did (and how often do we revisit a client’s website to update? :).

Initial Values

The spec defines a value that will be the initial value for a property when it is not declared in any stylesheets - either the user agent stylesheet (look at iecss.com for stylesheets of IE, Opera, Firefox, Webkit) or the ones you write.

Now, user agents assign values to CSS properties too. For example, when you do not declare margins on h1, the user agents have an initial value for margins. IE sets this to be 14pt, Firefox, Opera sets this to 0.67em, etc. This is not defined by the specifications and there is no keyword to obtain the values set by user agents.

Initial values are different from inherited values. All properties accept a keyword inherit. When you use the keyword inherit on a property, the browser applies the value that it finds on its parent element. On html element if you use the value inherit, it applies the initial value.

Good News!

Lea Verou alerted me to the CSS3 keyword initial which will set the CSS3 property to the initial value as defined in the spec. Sadly, the only browsers that supports this seems to be Firefox (with a -moz- prefix) and Webkit’s Safari and Chrome (yay!).

So until full support lands on all browsers for this amazing keyword and we don’t have to support browsers that do not recognize that keyword, here are some of the ways you can reset some CSS properties to their initial values:

Property Value
background transparent (transparent stands for rgba(0, 0, 0, 0)) or none or 0 0
border none or 0
border-image none
border-radius 0
box-shadow none
clear none
color No value, so best option is to use inherit to cascade from a parent element’s color value.
content normal
display inline
float none
font normal
height auto
letter-spacing normal
line-height normal
max-width none
max-height none
min-width 0
min-height 0
opacity 1
overflow visible
page-break-inside auto
position static (not relative)
text-shadow none
text-transform none
transform none
transition none
vertical-align baseline
visibility visible
white-space normal
width auto
word-spacing normal
z-index auto (not none or 0)

Update: Pete links to this list of initial values he has compiled.

Thanks to Chris Coyier, Tab Atkins, Lea Verou, and Nicolas Gallagher for feedback on this post!

Comments