Treehouse

Firefox 3’s Internal Rendering CSS

By on  

I was poking around Firefox's file and folder structure today. I've been doing research on how each browser vendor chooses to render CSS and, more specifically, what their default CSS stylesheet looks like. After a few minutes, I found a html.css file in the C:\Program Files\Mozilla Firefox\res directory.

Firefox 3's Default Stylesheet

/* ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is mozilla.org code.
 *
 * The Initial Developer of the Original Code is
 * Netscape Communications Corporation.
 * Portions created by the Initial Developer are Copyright (C) 1998
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s):
 *   Blake Ross <BlakeR1234@aol.com>
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either of the GNU General Public License Version 2 or later (the "GPL"),
 * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** */

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */

/* bidi */

[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
bdo[dir] {
  unicode-bidi: bidi-override;
}

/* blocks */

html, div, map, dt, isindex, form {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

p, dl, multicol {
  display: block;
  margin: 1em 0;
}

dd {
  display: block;
  -moz-margin-start: 40px;
}

blockquote {
  display: block;
  margin: 1em 40px;
}

address {
  display: block;
  font-style: italic;
}

center {
  display: block;
  text-align: -moz-center;
}

blockquote[type=cite] {
  display: block;
  margin: 1em 0px;
  -moz-padding-start: 1em;
  -moz-border-start: solid;
  border-color: blue;
  border-width: thin;
}

span[_moz_quote=true] {
  color: blue;
}

pre[_moz_quote=true] {
  color: blue;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

listing {
  display: block;
  font-family: -moz-fixed;
  font-size: medium;
  white-space: pre;
  margin: 1em 0;
}

xmp, pre, plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin: 1em 0;
}

/* tables */

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  margin-top: 0;
  margin-bottom: 0;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  -moz-box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

table[align="right"] {
  float: right;
  text-align: start;
}

table[rules]:not([rules="none"]) {
  border-collapse: collapse;
}
   
/* caption inherits from table not table-outer */  
caption {
  display: table-caption;
  text-align: center;
  -moz-box-sizing: border-box;
}

table[align="center"] > caption {
  margin-left: auto;
  margin-right: auto;
}

table[align="center"] > caption[align="left"] {
  margin-right: 0;
}

table[align="center"] > caption[align="right"] {
  margin-left: 0;
}

tr {
  display: table-row;
  vertical-align: inherit;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
}

thead {
  display: table-header-group;
  vertical-align: middle;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
}

/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}

td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
}

tr > form:-moz-is-html, tbody > form:-moz-is-html,
thead > form:-moz-is-html, tfoot > form:-moz-is-html,
table > form:-moz-is-html {
  /* Important: don't show these forms in HTML */
  display: none !important;
}

/* inlines */

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

b, strong {
  font-weight: bolder;
}

i, cite, em, var, dfn {
  font-style: italic;
}

tt, code, kbd, samp {
  font-family: -moz-fixed;
}

u, ins {
  text-decoration: underline;
}

s, strike, del {
  text-decoration: line-through;
}

blink {
  text-decoration: blink;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

nobr {
  white-space: nowrap;
}

/* titles */
abbr[title], acronym[title] {
  border-bottom: dotted 1px;
}

/* lists */

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

ol {
  display: block;
  list-style-type: decimal;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

li {
  display: list-item;
}

/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl {
  margin-top: 0;
  margin-bottom: 0;
}

/* 2 deep unordered lists use a circle */
ol ul,   ul ul,   menu ul,   dir ul,
ol menu, ul menu, menu menu, dir menu,
ol dir,  ul dir,  menu dir,  dir dir {
  list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}


/* leafs */

/* <hr> noshade and color attributes are handled completely by
 * the nsHTMLHRElement attribute mapping code
 */
hr {
  display: block;
  height: 2px;
  border: 1px inset;
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  -moz-box-sizing: border-box;
}

hr[size="1"] {
  border-style: solid none none none;
}

*|*:-moz-any-link img, img[usemap], object[usemap] {
  border: 2px solid;
}

img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
  content: -moz-alt-content !important;
  unicode-bidi: embed;
}

object:-moz-broken > *|*, applet:-moz-broken > *|*
object:-moz-user-disabled > *|*, applet:-moz-user-disabled > *|* {
  /*
    Inherit in the object's alignment so that if we aren't aligned explicitly
    we'll end up in the right place vertically.  See bug 36997.  Note that this
    is not !important because we _might_ be aligned explicitly.
  */
  vertical-align: inherit;
}

img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
embed:-moz-suppressed, applet:-moz-suppressed {
  /*
    Set visibility too in case the page changes display.  Note that we _may_
    want to just set visibility and not display, in general, if we find that
    display:none breaks too many layouts.  And if we decide we really do want
    people to be able to right-click blocked images, etc, we need to set
    neither one, and hack the painting code.... :(
   */
  display: none !important;
  visibility: hidden !important;
}

img[usemap], object[usemap] {
  color: blue;
}

frameset {
  display: block ! important;
  overflow: -moz-hidden-unscrollable;
  position: static ! important;
  float: none ! important;
  border: none ! important;
}

frame {
  border: none ! important;
}

iframe {
  border: 2px inset;
}

noframes {
  display: none;
}

spacer {
  position: static ! important;
  float: none ! important;
}

canvas {
  -moz-user-select: none;
}

/* focusable content: anything w/ tabindex >=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus, 
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, 
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus, 
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus, 
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus, 
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus, 
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
  /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
}

/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, param {
   display: none;
}

/* emulation of non-standard HTML <marquee> tag */
marquee {
  width: -moz-available;
  display: inline-block;
  vertical-align: text-bottom;
  text-align: start;
  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
}

marquee[direction="up"], marquee[direction="down"] {
  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
  height: 200px;
}

/* PRINT ONLY rules follow */
@media print {

  marquee { -moz-binding: none; }

  /* XXX this should not be necessary, we should be stopping blinking
     of any kind in print preview, not just the <blink> element */
  blink {
    text-decoration: none;
  }
 
}

Firefox's default stylesheet is an 11kb beast. How would you change the stylesheet? Does Firefox cause any reset.css hell for you? Have you hacked your Firefox default stylesheet? Share your thoughts.

ydkjs-4.png

Recent Features

  • Responsive and Infinitely Scalable JS&nbsp;Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • CSS&nbsp;Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

Incredible Demos

  • MooTools 1.3 Browser&nbsp;Object

    MooTools 1.3 was just released and one of the big additions is the Browser object.  The Browser object is very helpful in that not only do you get information about browser type and browser versions, you can gain information about the user's OS, browser plugins, and...

  • Introducing MooTools&nbsp;Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Discussion

  1. Jan Henkes

    I don’t think you have to build an reset.css file as large as the Firefox default stylesheet, cause I don’t use all those things like area, basefont, etc. It’s enough to reset all the things you realy use.

  2. I don’t think I would change it. I’m sure Firefox developers are trying to achieve the balance between looking like other browsers but also keeping it simple. I wish I could just change it to Eric Meyer’s CSS reset but then the interwebs would break…

  3. I was poking through it about three weeks ago, and was thinking about tweaking the odd thing, but then I realised that if I set my FF up to be ‘perfect’, what about all the other millions of users? Sure I might fix a niggly bug on my PC, but not on anyone else’s…

  4. Santiago

    Cool, I will add to my colection :P
    I had this http://www.w3.org/TR/CSS21/sample.html

  5. Arthur K

    I think it is pointless to try to perfect your ‘own’ browser as Harry alluded to. You have to consider the web audience and all the various types of browsers and version differences. There will never be a one-size-fits-all solution to this issue we all bang our heads against. I think to be most productive we need to do what we know to be fundamentally sound (W3C) which is most consistent across all browsers. I’ve found that by doing so, it dramatically reduces the amount of hacking that needs to be done.

  6. bart

    Is the th rendering in Firefox 3 broken? It seems that the th’s collapse to the width of text and do not line up correctly with the td’s below them. Has anyone noticed this? Can someone confirm? I compared to IE6, IE7, and FF2.

  7. Hey Bart, I noticed that you have to set “line-height” to 0 in order to eliminate any vertical space between a Flash element in the above th/td and the td below it. Drove me crazy trying to figure out what FF3 changed, cuz now all my sites have an annoying vertical space between the th and the below td. I’m not sure this helps you, but it may be a clue…

  8. Check this link.
    To remove extra spaces before/after a flash element, remove white spaces between embed and object tags.

  9. Ben

    Quite useful, thanks :)

  10. What’s with the body 8px margin default? When you render iframes, you end up with lots of padding :-P

    Very interesting though thanks. (I found this by googling for “margin 8px”, by the way).

  11. [...] sheets that are loaded automatically as a foundation for any other CSS. Firefox, for example has a default body margin of 8px. This is a simple way to reset any default values that could interfere with the CSS we are trying [...]

  12. [...] sheets that are loaded automatically as a foundation for any other CSS. Firefox, for example has a default body margin of 8px. This is a simple way to reset any default values that could interfere with the CSS we are trying [...]

  13. ali

    can i change firefox inner style sheet html.css;

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!