User Agent Style Sheets: Basics and Samples
Published on September 22, 2007 (⻠June 2, 2024), filed under Development (RSS feed for all categories).
This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.
CSS manages the default formatting of documents through the concept of user agent style sheets, a cornerstone of the cascade. This means that a web browser doesnât just present a line of text when itâs fed with an HTML document that has no styling information, but instead serves it using minimal formatting.
Figure: HTML document with Firefox default styling.
Specification
CSS 1 introduces the idea by stating that âeach User Agent (UA, often a âweb browserâ or âweb clientâ) will have a default style sheet that presents documents in a reasonableâbut arguably mundaneâmanner.â CSS 2 says that âconforming user agents must apply a default style sheet (or behave as if they did)â and that âa user agentâs default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language.â CSS 3 is of the same mind.
Since the CSS specifications leave it up to implementations whether to use a ârealâ style sheet for default display or not, itâs not surprising that you donât find a default style sheet in every browserâs installation folder. Unlike Microsoftâs Internet Explorer as well as Opera, however, Gecko browsers like Firefox and Netscape Navigator (âhtml.cssâ) but also Konqueror make it rather simple to comprehend their default styles.
User Agent Style Sheets
The following is a [maintained] list of default style sheets Iâve compiled over recent years. Due to the fact that Firebird, Firefox, and Co. are all based on the same layout engine, their style sheets are similar, if not identical.
- Chrome (January 26, 2011)
- Chrome (July 17, 2013)
- Chrome (September 2, 2015)
- Chrome (February 11, 2019)
- Chrome (August 26, 2021)
- Chrome (May 3, 2023)
- Chrome (latest)
- Firebird 0.7
- Firefox 0.8
- Firefox 0.9
- Firefox 1.5.0.4
- Firefox 2.0.0.6
- Firefox 2.0.0.12
- Firefox 3.0b3
- Firefox 3.0.1
- Firefox 3.0.8
- Firefox 3.6.13
- Firefox 3.6.3
- Firefox (March 31, 2019)
- Firefox (February 3, 2021)
- Firefox (March 28, 2023)
- Firefox (January 17, 2024)
- Firefox (latest)
- Flock 0.9.0.2
- Flock 1.2.4
- Flock 1.2.7
- Gecko (latest)
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8
- Internet Explorer 9
- Konqueror 3.2.0
- Mozilla 1.0.1
- Mozilla 1.5
- Navigator 6.1
- Navigator 7.1
- Navigator 8.1
- Navigator 9.0b3
- Opera 10.51
- Safari 3.0.4
- Safari 3.1.2
- Safari (January 29, 2013)
- Safari (May 21, 2015)
- Safari (November 5, 2018)
- Safari (April 3, 2019)
- Safari (April 1, 2021)
- Safari (May 27, 2022)
- SeaMonkey 1.1.2
- WebKit (latest)
For comparison, note a 1998 âbase style sheet,â as well as the default style sheets proposed by the W3C in the specifications of CSS 1, CSS 2, CSS 2.1, and CSS 2.2:
User Agent and Reset Style Sheets
The examples aim to provide some insight into user agent style sheets. Knowledge of user agent style sheets should help get a better understanding of CSS as well as any display âphenomena.â
However, I encourage to use this knowledge for other things than building more or larger âresetâ style sheets. Assuming use of additional style sheets other than just a reset, reset style sheets are typically unnecessary. From my experience, the only occasionally helpful and then quite memorable reset is * { margin: 0; padding: 0; }
. Reset style sheets are going to be handled in other posts though, revealing why theyâre, well, bad. [Still in doubt? Try this sanity check: Use your preferred reset, then temporarily remove it and see what happens.]
Many thanks to Martin Hassman and GermĂĄn FreixinĂłs LĂłpez for their help to improve this collection!
About Me
Iâm Jens (long: Jens Oliver Meiert), and Iâm a frontend engineering leader and tech author/publisher. Iâve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, Iâm a contributor to several web standards, and I write and review books for OâReilly and Frontend Dogma.
I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Be critical, interpret charitably, and give feedback.)
Comments (Closed)
-
On September 22, 2007, 12:15 CEST, Alen said:
Thanks for sharing this. You said it well, it gives us better understanding of css and how/what to do with our own style sheets.
-
On September 24, 2007, 8:37 CEST, Martin Hassman said:
For Safari/Webkit stylesheets cannot be found in the installation (propably compiled into some library), but they are on the web source tracking system with their history
-
On September 24, 2007, 11:18 CEST, Jens Oliver Meiert said:
Thanks MartinâI updated the post!
-
On September 25, 2007, 16:29 CEST, Barney said:
This is a very nice piece, Jens. Iâm glad someone can give this little study authoritatively because the recent craze over reset stylesheets, and inherently the notion that browser defaults are bad, is often very misguided: If you are going to respecify everything, there is no need for the extra rule for every element; if you arenât, youâre far better off with the user/developerâs consideration than nothing.
-
On September 26, 2007, 9:54 CEST, Daniel said:
I absolutely donât agree with you. The reset with
* {margin: 0; padding: 0; }
is the worst method of resetting the browserâs default styles.
Especially when working on form elements it make a lot of problems.The better reset: Reset Reloaded
Kind regards
Daniel -
On November 12, 2007, 19:50 CET, Lynne said:
Interesting read⊠I just assumed that if the link to the CSS was broken the browsers would default to plain HTML formatting. However, it certainly makes more sense to have a default css file.
-
On December 30, 2007, 23:34 CET, Lazar said:
Thanks for this. Itâs really useful info! Especially for CSS beginners like me.
-
On January 7, 2008, 15:53 CET, Anders said:
Interesting read, but I am not able to find out where a textareaâs default font (courier) comes from. Anybody?
-
On February 14, 2008, 22:22 CET, ty said:
Thanks for an excellent writeup.
So what do you start with as a default then?
Iâve been using a reset of sorts, and am finding some of those defining things I never use in my markup, so that seems redundant to me.
How to be sure borders, margins donât create problems without resetting them or defining them to be the same despite whatever UA styling could derail a layout? -
On April 28, 2011, 20:37 CEST, John Lascurettes said:
I would love to know how to pry into IEâs resource files to view the actual UA CSS the way I can with Gecko and Webkit. Does anyone have a guide on how to do that? The googles has failed me.
Read More
Maybe of interest to you, too:
- Next: Qualities of Design: It Works and Itâs Durable
- Previous: Cost of Solution vs. Cost of Problem
- More under Development
- More from 2007
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.infoâand The Web Development Glossary 3K. With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.