What exactly does normalization in CSS do?

Question

I was trying some code with unordered lists in HTML on JSFiddle and I was irritated to death to find out that the bullets in the <ul> won't show for no apparent reason. On trying different things on my code I finally came to realize that I needed to uncheck the 'normalized css' option on the jsfiddle page.

After that I Googled what it actually was and read this page from W3C.org. This page only talks about diacritics and accents, I get it. But why weren't the bullets showing up with the normalized css option checked? What are the other things that are affected if you select that option?

Thank you for looking in.

Answer 1

“Normalization” in the sense used in jsfiddle means applying a set of CSS rules purported to clean things up. It is more often called “CSS reset”, and it is a debated technique. The important thing to realize that when overriding browser defaults, it may also override default rendering that has been with us from the dawn of the Web, such as default top and bottom margins and some indentation for ul elements—and the default list markers (bullets). This depends on the particular “normalization” style sheet use, on its aggressiveness.

The normalization described on the W3C page mentioned has nothing to do with this. It deals with Unicode normalization of characters, something that happens (when it happens) at the character level, a relatively theoretical issue.

Answer 2

Normalizing css tries to even out the differences between browsers when rendering html-elements. Many browser have "pre-settings": p and h-elements have vertical margins, lists have some margin and padding too. em and strong tags have bold font-weight.

All this pre-settings are reset, so that you have a consistent working-base in all the browsers.

JSFiddles normalize.css looks like this:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

The sense of normalizing css is debatable, since you have to redeclare every style manually in your stylesheet (even those presettings who make good sense, e.g. a simple font-weight on the em and strong tags which are treated equally by the browsers).

I used Eric Meyer's reset for some time, but stopped using it, since it reset far too many styles which needed redeclaration again. It wasn't worth it IMO.

For a REAL good style-normalizer take a look at the style.css from http://html5boilerplate.com/.