ACJ’s Undo Default HTML Styles

Posted

September 15 2004

The past few months I've been working on many, many style sheets, approaching them more and more modular. More often than not, I would start by making (or re-using) a module in which I reset/undo a lot of the styles many modern visual browsers apply to an (x)HTML document by default.

Inspired by recent discussion on this very matter by Tantek Çelik and Eric Meyer, I decided to dissect my latest undo.css right here.

undo.css

* {
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	margin: 0;
	list-style: none;
	padding: 0;
	text-decoration: none;
}

What does it do?

• It sets the background of every element to transparent; including that of form controls. The new default behavior will be that everything will have a white background.
• It removes default borders; including those applied to tables and form controls, but also the dotted bottom border that some modern visual browsers apply to abbreviations with a title (abbr title|acronym title).
• The (text) color value of all elements will be inherited from its parent element: this means that if the base color is black, hyper links will also be black (instead of blue).
• It resets all font values: headings will no longer be big and bold (and ugly); Safari will no longer render abbreviations and acronyms italic (which is pretty weird default behavior as abbreviations often consist of capitals, and words that consist of italic capitals are usually ugly (especially on low resolution pixel based media)); and even bold (<b/>) will no longer be bold.
• It removes default (annoying) margin and padding values; like those applied on headings (hn) and the body element (body).
• It removes all list properties from lists (definition, ordered, unordered, etc.); like list-style-position, and list-style-type, etc.
• It removes all text decorations, uncluding the underlining of hyper links (a href), insertions (ins), and u (which should be omitted); the strike through effect of deletions (del), and strikes (s, and strike, which should also be omitted), and the blinking of blink (yay!).

WinIE does not fully respect all these rules, sadly.

Next up: default.css.

Comments

9 comments so far.

1/9

Specifically, which rules does Win/IE not respect? Thanks.

Posted by: Andy Mason on September 16, 2004, at 00:21

2/9

In Internet Explorer 6, the rules with inherit are not respected. This means the color, and various fontvalues are preserved.

You could force IE (and other browsers) to remove the default font styles by the following rules:

* {
font-size: 1em;
font-style: normal;
font-weight: normal
}

…but that's asking for trouble, really. Especially when it comes to nested elements; working around this would bloat the code like crazy (<em><strong>foo</strong></em>, for example would be rendered bold, but not italic, without extra rules).

By the way, in the next Style Sheet module that I will describe here (default.css) I will address some nice solutions I've come up with.

Posted by: ACJ on September 16, 2004, at 00:42

3/9

I tried to do this once, but I just give everything the correct value. Maybe I should save a couple of kilobytes and do it too. Tantek didn't even emphasise that, though it is a nice side-effect.

Posted by: Rob Mientjes on September 16, 2004, at 07:34

4/9

Hello, this idea seems to run quite well. But i had a bug in Safari, the body background wasn

Posted by: Gatan on January 12, 2005, at 10:59

5/9

Very interresting ! Have you done a default.css ?

Posted by: Encausse Jean-Philippe on July 28, 2005, at 09:44

6/9

Actually, I

Posted by: ACJ on July 29, 2005, at 00:56

7/9

One thing to note, transparent background doesn't always give a white b/g to everything. Some users have the b/g's set to another colour so assuming you are giving everyone white could leave you with coloured gaps in your page.

Posted by: Steven on September 30, 2005, at 23:38

8/9

In the roughly one and a half years I have used this method, I ran into several minor problems, which are fixed in this updated code:

* {
    background-color: transparent;
    border: none;
    color: inherit;
    font: inherit;
    list-style: none;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    text-indent: 0;
}

Note:

This is efficient, standards complient css. Browser specific hackery is intentionally left out.

Posted by: ACJ on January 2, 2006, at 07:24

9/9

so, did you ever create your post about default.css?

Posted by: gadfly on April 19, 2006, at 14:59

Comment