Home

Normalize.css docs

Normalize.css comes with inline documentation. What follows is extended documentation about parts of normalize.css v1 that merit additional detail and explanation.

HTML5 display definitions

audio:not([controls]) {}

• display: none : Modern browsers with support for audio will not display audio elements that do not have controls. Because the previous rule displays audio elements, this rule is needed to ensure that Firefox 3/4/5, Safari 4, and Opera will hide audio elements that do not have controls. Chrome, Safari 5, and IE9 will never display audio elements that lack the controls attribute.

• height: 0 : iOS5 leaves excess height on audio elements without controls. This declaration removes it.

[hidden] {}

• display: none : Addresses styling not present in FF3, S4/5, IE7/8/9. No effect on IE6. This rule is separate from the previous one because otherwise IE8 (or any browser that doesn't understand one of the selectors) will drop the entire rule.

Base

html {}

html, button, input, select, textarea {}

• font-family: sans-serif : Setting the font-family on body and various form elements ensures font-family consistency between body copy, textarea, and other form elements. Using the sans-serif value will most likely mean Helvetica as the default font for Mac and Arial for Windows.

body {}

• margin: 0 : Removes margin in all browsers and addresses margins handled incorrectly in IE6/7. The modern browser default is for an 8px margin, but this is not considered to be a practical starting point in an author's CSS.

Links

a:focus {}

• outline: thin dotted : WebKit on OSX uses a focus halo of a fixed color (usually blue). Chrome on Windows uses an orange outline. Neither of these outlines change with link or background color and people frequently look to remove it with :focus {outline:0;}. They are also different from the focus outline used by other browsers on Windows or OSX. To improve consistency and avoid either having: a fixed focus style that can clash quite badly or be nearly invisible in certain designs; or removing an important accessibility aide, the outline is normalized to thin and dotted with no fixed color.

a:hover, a:active {}

• outline: 0 : Improves readability in all browsers when a link gains keyboard focus and it is hovered over with the mouse. The outline is shown only if the link gains keyboard focus. Source

Typography

h1, h2, h3, h4, h5, h6 {}

• Normalize the font-size and margin. IE6/7 do not derive heading font sizes or margins from the ancestral font-size (i.e., not set in em units) but set them in pt units. Modern browsers alter the font-size of h1's that are nested within section and articles. By normalizing the styles both of these issues are avoided.

abbr[title] {}

• border-bottom: 1px dotted : Addresses styling not present in IE7/8/9, S5, Chrome. By not specifying a border color it defaults to the text color it inherits.

pre, code, kbd, samp {}

• font-family: monospace, serif : Allows proper font-size control. Source

pre {}

• white-space: pre : This value makes the element behave as a pre: all line breaks, tabs and other oddities of the source code are literally followed.

• white-space: pre-wrap : This value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box. But it is not supported by IE6/7, so...

• word-wrap: break-word : ...this property allows long words to be broken and wrap onto the next line in IE6/7.

q:before, q:after {}

• content: "" : Replace pseudo-element content with an empty string. This is needed because Safari 4 does not support the quotes property, or a none value for the content property, and will otherwise display quotes as generated content in pseudo-elements.

• content: none : Display no pseudo-element content if the browser supports the none value.

sub, sup {}

Prevents sub and sup affecting line-height in all browsers. Source

• font-size: 75% : Specified in % so that the sup/sup is the right size relative to the surrounding text.

• line-height: 0 : Zero out the line-height so that it doesn't interfere with the positioning that follows.

• position: relative : Make all browsers position the sup/sup relative to the surrounding text.

• vertical-align: baseline : Set the vertical alignment from the baseline.

sup {}

• top: -0.5em : Move the superscripted text up.

sub {}

• bottom: -0.25em : Move the subscripted text down, but only half as far down as the superscript moved up.

Lists

dl, menu, ol, ul {}

• margin: 1em 0 : The margin of lists in IE6/7 is set using 'pt' units rather than being relative to the ancestral font-size. This is contrary to the HTML5 spec and other modern browsers. Furthermore, IE6/7 apply a left margin by default to ol and ul. This normalization corrects both issues.

nav ul, nav ol {}

• list-style-image: none : A fix for an IE7 bug. Using list-style:none alone will not remove list images that are set on ul inside nav.

Embedded content

img {}

• -ms-interpolation-mode: bicubic : Improves image quality when scaled in IE7. It is on by default in IE8 and is not implemented in IE6. More info

svg:not(:root) {}

• overflow: hidden : Corrects overflow not being hidden in IE9. Earlier versions of IE don't support SVG, so we can safely use the :not() and :root selectors that modern browsers use in the default UA stylesheets to apply this style. SVG Mailing List discussion

Forms

button, input {}

• line-height: normal : FF3/4 sets line-height using !important in the UA stylesheet. This declaration is to set all other browsers to match the FF3/4 style.

button, input[type="button"], input[type="reset"], input[type="submit"] {}

• cursor: pointer : Improves usability by indicating that an action will be performed. Type image already has pointer cursor, so this also improves consistency between related input types.

• -webkit-appearance: button : Corrects inability to style clickable 'input' types in iOS.

• *overflow: visible : Corrects inner spacing displayed oddly in IE7. Doesn't effect IE6; there doesn't seem to be a way to apply it to IE6 (without using a class) and avoid triggering a serious bug in text input's. This style, when applied to text inputs in IE6/7, causes them to expand as more content is written into them. This happens even if there is a fixed width applied. If you need to fix the excess inner-spacing bug on button and clickable inputs in IE6, then apply this style using a class that is used specifically to style those types of elements.

input[type="search"] {}

• -webkit-appearance: textfield : Addresses appearance set to searchfield in Safari 5 and Chrome, without removing the benefits of search inputs (e.g. showing past searches).

  If the -webkit-appearance property value is not changed from searchfield:

  ...in WebKit on OSX/iOS you can't control font, padding, border, and background.

  ...in WebKit on Windows you can't control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border.

• -webkit-box-sizing: content-box : Normalizes the box sizing, which is set to border-box in Safari 5 and Chrome but content-box in all other browsers.

• -moz-box-sizing: content-box : Future-proofing.

• box-sizing: content-box : Future-proofing.

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {}

• -webkit-appearance: none : Remove excess inner padding that appears in Safari 5 and Chrome on OSX once the search input appearance has been changed to textfield. Remove the search input cancel button from Safari 5 and Chrome on OSX once the search input appearance has been changed to textfield. This pseudo-element is not present in other UAs.