html - 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

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/.