What exactly does normalization in CSS do?

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.

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

回答2:

Normalize.css is a well known reset stylesheet that is used to align some base styles across browsers to set as a common ground for development.

Some developers find it redundant, or may prefer to use their own reset stylesheets. Many ready-made reset scripts are available, among them are the famous Eric Mayer's reset.css (used by BluePrint), and YUI2's stylesheet.

See also a post here on SO on the best CSS reset, and a best-of-collection of reset stylesheets.

回答3:

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

回答4:

Normalize is used to rest browser CSS. each and every browser having their own property for each DOM element and this property changes browser to browser.

html {
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
b,
strong {
  font-weight: bold;
}
img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}
ol,
ul {
  list-style: none;
}
ol li,
ul li {
  display: list-item;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  height: 100%;
}
form {
  height: 100%;
}
/***************************************************************************************
* GENERAL STARTS
***************************************************************************************/
body {
  font-size: 12px;
  line-height: 18px;
  color: #444444;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
a {
  color: #3a7da3;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
  color: #444444;
  outline: none !important;
}
a:focus {
  color: #444444;
  outline: none !important;
  text-decoration: none;
}
a.active {
  color: #444444;
  text-decoration: none;
}
a.btn:hover,
a.btn:focus {
  text-decoration: none;
}
a .normal-link {
  color: #444;
  text-decoration: none;
}
a .normal-link:hover {
  text-decoration: underline;
}
p {
  font-size: 12px;
  margin-bottom: 15px;
  line-height: 20px;
}
.silent-text,
.silent {
  color: #a1a1a1;
  display: inline-block;
}
small,
.small {
  font-size: 11px;
}
/***************************************************************************************
* HEADINGS STARTS
***************************************************************************************/
/* All Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  line-height: 1.2;
}
h1,
.title {
  font-size: 36px;
  font-family: Arial, Helvetica, sans-serif;
}
h2,
.sub-title {
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}
h3,
.title {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 14px;
}
/***************************************************************************************
* COMMON CSS STARTS
***************************************************************************************/
input[type=text]::-ms-clear {
  display: none;
}
.form-control {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  color: #444;
  padding: 6px 8px;
}
.form-control:focus,
.form-control.active {
  background: #ffffff;
  border-color: #cccccc;
  box-shadow: none;
  transition: border .2s linear;
  -webkit-transition: border .2s linear;
}
.form-control:focus {
  outline: none;
  box-shadow: none;
}
.form-control-sm {
  padding: 3px 8px;
  height: auto;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed !important;
}
.form-control.active::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #444444;
  opacity: 1;
}
.form-control.active::-moz-placeholder {
  /* Firefox 19+ */
  color: #444444;
  opacity: 1;
}
.form-control.active:-ms-input-placeholder {
  /* IE 10+ */
  color: #444444;
  opacity: 1;
}
.form-control.active:-moz-placeholder {
  /* Firefox 18- */
  color: #444444;
  opacity: 1;
}
.form-control::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #BDBDBD;
  opacity: 1;
}
.form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: #BDBDBD;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  /* IE 10+ */
  color: #BDBDBD;
  opacity: 1;
}
.form-control:-moz-placeholder {
  /* Firefox 18- */
  color: #BDBDBD;
  opacity: 1;
}
.has-error,
.form-control.has-error,
.form-control-validation {
  border-color: #cc0000;
}
.has-warning,
.form-control.has-warning {
  border-color: #f0ad4e;
}
.has-success,
.form-control.has-success {
  border-color: #5cb85c;
}
.has-error-text,
.form-group .has-error-text {
  color: #cc0000;
}
.has-error-text,
.form-group .has-error-text {
  font-style: normal;
  font-size: 11px;
  margin-left: 8px;
  line-height: 14px;
}
.has-warning-text {
  color: #f0ad4e;
  font-style: normal;
  font-size: 11px;
}
.has-success-text {
  color: #5cb85c;
  font-style: normal;
  font-size: 11px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  select.form-control {
    padding-left: 6px;
}
}
@supports (-ms-ime-align:auto) {
  select.form-control {
    padding-left: 7px;
}
}
/************************
Margin/Padding
*************************/
.m-t-xl {
  margin-top: 30px;
}
.m-t-lg {
  margin-top: 20px;
}
.m-t-md {
  margin-top: 15px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-0 {
  margin-top: 0;
}
.m-b-lg {
  margin-bottom: 20px;
}
.m-b-xlg {
  margin-bottom: 50px;
}
.m-b-md {
  margin-bottom: 15px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-0 {
  margin-bottom: 0;
}
.m-l-lg {
  margin-left: 20px;
}
.m-l-md {
  margin-left: 15px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-0 {
  margin-left: 0;
}
.m-r-lg {
  margin-right: 20px;
}
.m-r-md {
  margin-right: 15px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-0 {
  margin-right: 0;
}
.p-t-lg {
  padding-top: 20px;
}
.p-t-md {
  padding-top: 15px;
}
.p-t-sm {
  padding-top: 10px;
}
.p-t-xs {
  padding-top: 5px;
}
.p-b-lg {
  padding-bottom: 20px;
}
.p-b-md {
  padding-bottom: 15px;
}
.p-b-sm {
  padding-bottom: 10px;
}
.p-b-0 {
  padding-bottom: 0;
}
.p-b-xs {
  padding-bottom: 5px;
}
.p-l-lg {
  padding-left: 20px;
}
.p-l-md {
  padding-left: 15px;
}
.p-l-sm {
  padding-left: 10px;
}
.p-l-xs {
  padding-left: 5px;
}
.p-r-lg {
  padding-right: 20px;
}
.p-r-md {
  padding-right: 15px;
}
.p-r-sm {
  padding-right: 10px;
}
.p-r-xs {
  padding-right: 5px;
}
.no-mar {
  margin: 0 !important;
}
.no-pad {
  padding: 0 !important;
}
.p-l-n {
  padding-left: 0;
}
.p-r-n {
  padding-right: 0;
}
.p-t-n {
  padding-top: 0;
}
.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.font-md {
  font-size: 14px;
}
.font-lg {
  font-size: 16px;
}
img.img-responsive {
  display: inline-block;
  max-width: 100%;
}
.v-table {
  display: table;
}
.v-table-cell {
  display: table-cell;
  vertical-align: middle;
}
.relative {
  position: relative;
}
.float-none {
  float: none;
}
.d-i-b {
  display: inline-block !important;
}
.data-container {
  border: 1px solid #eeeeee;
  min-height: 600px;
}
.d-b {
  display: block !important;
}
.cursor-pointer {
  cursor: pointer;
}
.font-size-xs {
  font-size: 15px;
}
.text-left-xs {
  text-align: left !important;
}
.text-right-xs {
  text-align: right !important;
}
p.text-wrapping,
.text-wrapping {
  margin: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*----- Text ellipes CSS end ----*/