--- layout: post title: Safe CSS Defaults created: 1302749753 category: "Web Development" ---
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:
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? :).
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.
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:
|border||none or 0|
No value, so best option is to use
Thanks to Chris Coyier, Tab Atkins, Lea Verou, and Nicolas Gallagher for feedback on this post!