Home

Explaining normalize.css

HTML5 display definitions

article, ...section {}

• display: block : Corrects block display not defined for these elements in IE6/7/8/9 & FF3.

audio, canvas, video {}

• display: inline-block : Corrects inline-block display not defined in Firefox < 3.5.

• *display: inline; *zoom: 1 : Corrects inline-block display not defined in IE7/8/9.

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.

[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 {}

• font-size: 100% : Corrects text resizing oddly in IE6/7 when body font-size is set using em units.

• -webkit-text-size-adjust: 100% : Prevents iOS text size adjust after orientation change, without disabling user zoom.

• -ms-text-size-adjust: 100% :

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.

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 does not derive heading font sizes or margins from the base font-size (i.e., not set in em 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.

b, strong {}

• font-weight: bold : Addresses style set to 'bolder' in FF3/4, S4/5, Chrome.

blockquote {}

• margin: 1em 40px : Normalize blockquote margins, which differ between modern browsers and IE6/7.

dfn {}

• font-style: italic : Addresses styling not present in S5, Chrome.

mark {}

• background: #ff0; color: #000 : Addresses styling not present in IE6/7/8/9.

pre, code, kbd, samp {}

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

• _font-family: 'courier new', serif : Improves poor text-rendering of monospace in IE6.

• font-size: 1em : Set font-size to be equal to ancestor's font-size.

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 {}

• quotes: none : Remove CSS quotes as they are not supported 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.

small {}

• font-size: 75% :

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

ul, ol {}

• margin-left: 0 : Remove default left margin in IE6/7

• padding: 0 0 0 40px : Set the left padding to match modern browser default and ensure that bullets remain visible in IE6/7

dd {}

• margin: 0 0 0 40px :

nav ul, nav ol {}

• list-style: none :
• 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 {}

• border: 0 : Removes border when inside 'a' element in IE6/7/8/9 and Firefox 3.*

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

Figures

figure {}

• margin: 0 : Addresses margin not present in IE6/7/8/9, S5, O11.

Forms

form {}

• margin: 0 : Corrects margin displayed oddly in IE6/7.

fieldset {}

• border: 1px solid #c0c0c0 : Addresses IE rendering rounded corners on fieldset by default, and inconsistent rendering of the border width, color, and joining in other browsers.

• margin: 0 2px :

• padding: 0.35em 0.625em 0.75em :

legend {}

• border: 0 : Corrects color not being inherited in IE6/7/8/9.

• padding: 0 : Remove default 2px horizontal padding.

• white-space: normal : Allow legend text to wrap in FF3.

• *margin-left: -7px : Corrects alignment displayed oddly in IE6/7.

button, input, select, textarea {}

• font-size: 100% : Corrects font size not being inherited in all browsers.

• margin: 0 : Addresses margins set differently in IE6/7, F3/4, S5, Chrome.

• vertical-align: baseline : Produces best looking alignment in modern browsers.

• *vertical-align: middle : Improves appearance in IE6/7 to more closely match baseline value position in other browsers.

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.

button[disabled], input[disabled] {}

• cursor: default : Re-set the cursor on disabled form inputs.

input[type="checkbox"], input[type="radio"] {}

• box-sizing: border-box : Normalizes the box sizing, which is set to content-box in IE8/9 but border-box in all other browsers.

• padding: 0 : Corrects excess space around these inputs in IE8/9 and matches Firefox's UA style sheet setting of padding: 0 !important.

• *width: 13px; *height: 13px : Corrects excess space around these inputs in IE7 by setting explicit dimensions. IE6 remains unaffected.

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.

button::-moz-focus-inner, input::-moz-focus-inner {}

• border: 0; padding: 0 : Removes inner padding and border from FF3/4.

textarea {}

• overflow: auto : Removes default vertical scrollbar on empty textarea in IE6/7/8/9.

• vertical-align: top : Improves readability and alignment in all browsers when accompanied by label text.

Tables

table {}

• border-collapse: collapse :

• border-spacing: 0 :