Fractionally Restoring html.css

Published 19 years, 6 months past

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.


Comments (10)

  1. 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. 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. 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. 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. 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. 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. 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. 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 ::

    rationell.co.uk » Internet

    […]

    April 8, 2006

    Internet

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

  10. Pingback ::

    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 […]

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>


if you’re satisfied with it.

Comment Preview