meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Fractionally Restoring html.css

Having talked about how to completely rip away all brower default styles in Firefox, let’s consider the bare minimum of styles we’d need to make the Web at least moderately readable.  As it turns out, the primary factor in document mangling caused by taking out the browser’s default styles is the loss of any display information.  In the absence of information regarding what kind of box an element should generate, they’re all made to generate inline boxes.  This is roughly equivalent to saying:

* {display: inline !important;}

Speaking of which, feel free to try that some time on a test document, or as an entry in a browser’s user style sheet.  The result should remind you of the no-defaults trick.

So let’s say we back up the browser’s default style sheets (you don’t want to lose them completely, unless you plan to re-install the browser) and then erase everything in html.css.  Having done that, we can restore a great deal of sanity to the Web by placing the following rules into html.css.

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

html, body, p, div, h1, h2, h3, h4, h5, h6,
ul, ol, dl, dt, dd, blockquote, address, pre,
listing, plaintext, xmp, menu, dir, isindex, hr, map,
multicol, center, frameset, marquee {display: block;}

li {display: list-item;}

area, base, basefont, head, meta, script, style, title,
noembed, noscript, param, noframes {display: none;}

table {display: table;}
caption {display: table-caption;}
tr {display: table-row;}
col {display: table-column;}
colgroup {display: table-column-group;}
tbody {display: table-row-group;}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
td {display: table-cell;}
th {display: table-cell;}

That rule set will not only cause block-level elements to start generating block boxes again, but it also lets list items be list items, hides the elements we’d like to have vanish, and restores table behavior to table markup.  With those few rules in place, browsing around will be much easier.  It might not be pretty, but it will avoid the extreme wreckage of removing all default styles.

There will still be some notable differences.  For example, paragraphs may now generate a block box, but they aren’t being given margins, so on most sites paragraphs will suddenly not have a “blank line” of separation.  Similarly, heading margins are gone.  Lists don’t have any predefined indentation.  Table cells don’t have default padding, and the “gutter” around page contents has vanished.  Of course, you might see some or all of those things on a site.  If you do, it means that information has been provided by the site’s styles.

In a quick browse of the Web, I found that CNN‘s site was still kind of scrambled by these styles, though certainly not as badly as before.  As an example, a lot of the article sidebars and pictures weren’t floated, which means the float behavior is markup-driven, not CSS-driven.  Why does it matter?  Because in Firefox, align="right" is just a markup hook on which the default style float: right; gets hung.  If that declaration doesn’t appear in the default styles, the markup will have no visible effect.  In other words, no floating.

The home page of The Mozilla Foundation, on the other hand, hung together pretty well, which indicates all of their layout is driven by CSS instead of presentational markup.  This didn’t come as much of a surprise, but it was nice to see.  I was pleased to find that meyerweb’s home page also stayed in decent shape.

So should you add these rules to your style sheets?  Not unless you’re feeling extra-super-mega-paranoid.  The percentage of visitors displaying your site with the default style sheets removed can be safely estimated to very closely approach zero, maybe even touching it.  Besides which, if someone does drop by with all default styles removed, they’ve probably done it on purpose.  If they then send you snarky e-mail about they broke your site that way, feel free to answer them with a polite acknowledgment that they did, indeed, successfully cut their own throat.  It’s not like that’s your problem, any more than you should be bothered that someone “broke” your site with an anarchic user style sheet that suppresses display of lists and paragraphs, or sets all non-replaced elements to use white text on a white background, or whatever.

A more interesting question is whether you should set up a browser to use just those rules as defaults.  I’m giving serious thought to maintaining two copies of Firefox: a normal install, and a development install that’s been hacked to use just the styles I listed before.  It could prove valuable in checking the design assumptions of a work-in-progress, and thus to identify possible weak points in the author styles.  As an example, if I loaded a new design into the development browser and found that lists were completely non-indented, then I’d know I was leaving the list indentation distance up to browser defaults.  At that point, I could decide whether or not that was a good idea.  In some designs, it might be fine, but in others it could be a problem.  Either way, I’d have the chance to consider that question directly, and reach a decision, instead of sailing blindly on, never having thought about it either way.

10 Responses»

    • #1
    • Comment
    • Mon 20 Sep 2004
    • 1621
    Dave Marks wrote in to say...

    Instead of running two copies Eric, how about writing a plugin that would disable/enable the intermal styles.

    I suggested just this to Chris Pederick http://www.chrispederick.com/forums/viewtopic.php?id=164 as it could quite easily pop under Disable > Disable Styles on the Web Develoer Toolbar.

    Still awaiting a reply though – prehaps you could drop by that thread and add some weight :)

    • #2
    • Comment
    • Mon 20 Sep 2004
    • 1645
    Nico Edtinger wrote in to say...

    For playing around with stylesheets you could also try editcss for Firefox. As long as it stays open the style sheet in the editcss sidebar is used and all changes show up immediately. Although I think you’ve to make all your styles !important to overrule html.css

    b4n

    • #3
    • Comment
    • Mon 20 Sep 2004
    • 1835
    Andrew Krespanis wrote in to say...

    Good stuff Eric, it’s important that designers learn not to rely on defaults. One technique I swear by is adding a global reset to padding and margins as the first declaration:
    * { padding:0; margin:0; }

    This not only ensures I’m not trusting browser defaults, but also makes my CSS far more reusable between projects.

    • #4
    • Comment
    • Mon 20 Sep 2004
    • 1950
    Laurens Holst wrote in to say...

    Nice thought. Kind of the same thing as turning your background colour into a darkish colour and your foreground into a light one (white on dark red or black or something) and seeing how well it holds out. I did it on my own humble home not too long ago and it’s interesting… if you use the default browser background colour, you have to define colours in couples of both fore- and background colours otherwise the text will be unreadable. It will still not look very pretty (as I remarked in that thing on my site having my hands on rgba() colour settings would come in handy for that), but at least it’s readable and the user’s (as well as other style’s) default colour settings have been honoured.

    I’ll give my site a treatment of this kind as well sometime, to see what happens. Let me give you a suggestion though: as opposed to having two Firefox installs, it might be easier to apply this behaviour in the userContent.css file. It depends, but if it’s processed later than that html.css file (which I think it is) it should work because the new rules will override the html.css rules. Basically we’re just talking about different default styles, and that’s what userContent.css is for.

    ~Grauw

    • #5
    • Comment
    • Mon 20 Sep 2004
    • 2054
    Joey wrote in to say...

    Hey Eric, while your on the subject of firefox, any reason you don’t have a Firefox button? You know you want one. Haha… c’mon, join the crowd and convince the 5% of the people that visit here to use Firefox (who are probably at a place where they cannot get Firefox, which is understood- lol)

    • #6
    • Comment
    • Mon 20 Sep 2004
    • 2137
    Peter Kasting wrote in to say...

    As Grauw posts above, one “default” I noticed lots of web designers relying on this past week was that the browser would use black (dark) text on a white (light) background. When I switched my color scheme to light-on-dark and told my browser to “use system colors” by default (but of course respect overrides given by the page), I noticed dozens of sites doing things like setting a white or off-white background, and not setting a text color. In fact, mozillazine‘s site does this, as well as Google News, many other major news sites, tons of blogs, etc.

    • #7
    • Comment
    • Mon 20 Sep 2004
    • 2139
    Peter Kasting wrote in to say...

    Hooray for me :(. As I can’t edit posts, I should note that the above links should be mozillazine and Google News… as if people didn’t know and couldn’t figure that out.

    • #8
    • Comment
    • Tue 21 Sep 2004
    • 1212
    Iwan Groeneveld wrote in to say...

    As an additional alternative (alliteration ahoy) to having two Firefox installs, you may also want to consider Opera. It offers great flexibility when it comes to custom user stylesheets and applying them on the fly with a mere button toggle. It deals with any amount of custom CSS files easily, making it an excellent tool for this kind of job.

    • #9
    • Pingback
    • Sat 8 Apr 2006
    • 1250
    Received from rationell.co.uk » Internet

    […]

    April 8, 2006

    Internet

    HTMLSpecial Characters Article about browsers default style sheets by Eric Meye […]

    • #10
    • Pingback
    • Tue 4 Jan 2011
    • 0702
    Received from The History of CSS Resets

    […] Çelik’s work as a jumping-off point for his first attempt at a global reset, as well as a follow-up almost immediately thereafter. In the same conversation I had, Çelik said, "About a week and […]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


September 2004
SMTWTFS
August October
 1234
567891011
12131415161718
19202122232425
2627282930  

Sidestep

Feeds

Extras