How to view Firefox’s default internal CSS stylesheet

With the current dialogue about the merit of using a reset.css stylesheet within your front-end development workflow I thought it might be intriguing to delve into the inner workings of Firefox to see what the actual default styles were. The reasoning behind using a reset.css is this: with every browsers providing it’s own interpretation on each HTML element default styling, developing consistent pixel perfect designs is difficult unless you reset all the default styles back to ground zero before applying your own design. While I will not debate the pros and cons of a reset stylesheet here and now I will show you two ways of accessing Mozilla Firefox’s default stylesheet. After some digging around on my XP file system I came across the following directory: C:\Program Files\Mozilla Firefox\res and within that directory are the following Cascading Style Sheets:

  1. EditorOverride.css
  2. forms.css
  3. html.css
  4. mathml.css
  5. quirk.css
  6. svg.css
  7. ua.css
  8. viewsource.css

Note you can also access these stylesheets by typing: resource://gre/res/html.css and: resource://gre/res/forms.css etc, etc into the address bar. With this information on board we should have an easier time deciding if we really need to change the default behavior of the current element we are styling.

Related Posts

Technorati Tags: , , , ,

Bookmarks:
  • Digg
  • Technorati
  • del.icio.us
  • Ma.gnolia
  • Reddit
  • Netscape
  • StumbleUpon
  • NewsVine

This entry was posted on Sunday, July 6th, 2008 at 10:44 pm and is filed under Web Standards, Web, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Caravan Cafe: a burger to remember, Seymour style
How to turn off Safari’s textarea expand »

4 Responses to “How to view Firefox’s default internal CSS stylesheet”

  1. Dasweat Says:
    December 11th, 2008 at 9:17 pm

    Awesome tip James! Had no idea that browsers had their own internal default stylesheets..

  2. James Oppenheim Says:
    August 30th, 2009 at 4:20 pm

    Interesting to note, in the new version of Firebug v1.4.2 (not sure when it got introduced) when on the HTML tab you can select ‘Show User Agent CSS’ from the style dropdown menu. This will show you what the default styles are. Handy indeed.

  3. Laloeka Says:
    October 10th, 2009 at 12:37 am

    Note:
    Your browser won’t repair the file if you change/damage it.
    BE SURE TO BACKUP IF YOUR’RE GOING TO MAKE SOME CHANGES!

  4. Andrew Moizer Says:
    April 26th, 2010 at 1:22 am

    Thanks for this. Confirms a weird (to me anyway) problem I was having where I couldn’t understand where the font colour property was coming from (and why it wasn’t being inherited). At least I could confirm that the computed result did indeed come from the default Firefox style sheet.

    cheers, Andrew

Leave a Reply