demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Understanding UA StyleSheets and the CSS3 initial Value

css / resets

Estimated reading time: 2 minutes, 23 seconds

Imagine that you build a page using only , with no attached or applied. When you render the page in a browser, how does the program know to display links as blue and underlined, and paragraphs as black? Why is the margin for h1 elements 14pt in IE by default, and 0.67em in Firefox?

The answer to these questions is User Agent stylesheets. UA stylesheets are CSS files built into the browser. Each browser has its own UA file, which it uses to determine how to render every website, unless the browser is explicitly told otherwise.

The way we tell the browser to use the site’s CSS, rather than the UA styles, is by linking or embedding a stylesheet to a page, or by using inline styles. The browser then makes a simple decision:

  • If the new styles conflict with the browser’s UA stylesheet rules, the site’s style declaration will be used when rendering the element.
  • Anything the site style rules don’t specify will be assumed by the UA stylesheet.

This leads developers to create mammoth reset stylesheets that attempt to set every CSS property to a shared default value; applied to a web page, this effectively wipes out any effect of a UA stylesheet. The designer/developer can then build custom CSS for the site, somewhat assured that browsers will not unexpectedly assume a value for some property they have left unspecified. (You can see the UA CSS for IE, Opera at IEcss.com; reading the UA stylesheet for Firefox is easier: just type resource://gre-resources/html.css into the URL bar)

CSS Resets are not without controversy; as I have discussed, I personally prefer a less heavy-handed approach.

One of the things CSS3 has changed is making the increasingly-similar UAs our friend, rather than our enemy. For example, take the following snippet of HTML with some inline CSS:

<div style="color: red;">
<p>This is some text <span>in color.</span></p>
</div>

The color of the paragraph text, inherited from the parent div, will be red. What if we wanted to set the text inside the span to black? There are two choices. The traditional approach is this:

<div style="color: red;">
<p>This is some text <span style="color: #000;">in color.</span></p>
</div>

CSS3 introduces a second option:

<div style="color: red;">
<p>This is some text <span style="color: initial">in color.</span></p>
</div>

initial is a value that resets a property back to the default UA style. This can be particularly useful when the style you wish to negate may be, long, complex, or difficult to remember:

div { border: 3px dotted green;  }
div.special { border: initial; } 
/* resets the border on divs with a class of “special” to that specified in the UA, i.e. no border; } */
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.