-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Normalize.css comes with inline documentation. What follows is extended documentation about parts of normalize.css v1 that merit additional detail and explanation.
-
display: none
: Modern browsers with support foraudio
will not displayaudio
elements that do not have controls. Because the previous rule displaysaudio
elements, this rule is needed to ensure that Firefox 3/4/5, Safari 4, and Opera will hideaudio
elements that do not have controls. Chrome, Safari 5, and IE9 will never displayaudio
elements that lack thecontrols
attribute. -
height: 0
: iOS5 leaves excess height onaudio
elements without controls. This declaration removes it.
-
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.
-
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.
-
margin: 0
: Removes margin in all browsers and addresses margins handled incorrectly in IE6/7. The modern browser default is for an8px
margin, but this is not considered to be a practical starting point in an author's CSS.
-
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.
-
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
- Normalize the
font-size
andmargin
. IE6/7 do not derive heading font sizes or margins from the ancestralfont-size
(i.e., not set inem
units) but set them inpt
units. Modern browsers alter thefont-size
ofh1
's that are nested withinsection
andarticles
. By normalizing the styles both of these issues are avoided.
-
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.
-
font-family: monospace, serif
: Allows proper font-size control. Source
-
white-space: pre
: This value makes the element behave as apre
: 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.
-
content: ""
: Replace pseudo-element content with an empty string. This is needed because Safari 4 does not support thequotes
property, or anone
value for thecontent
property, and will otherwise display quotes as generated content in pseudo-elements. -
content: none
: Display no pseudo-element content if the browser supports thenone
value.
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.
-
top: -0.5em
: Move the superscripted text up.
-
bottom: -0.25em
: Move the subscripted text down, but only half as far down as the superscript moved up.
-
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 tool
andul
. This normalization corrects both issues.
-
list-style-image: none
: A fix for an IE7 bug. Usinglist-style:none
alone will not remove list images that are set onul
insidenav
.
-
-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
-
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
-
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.
-
cursor: pointer
: Improves usability by indicating that an action will be performed. Typeimage
already has pointer cursor, so this also improves consistency between relatedinput
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 textinput
'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 onbutton
and clickable inputs in IE6, then apply this style using a class that is used specifically to style those types of elements.
-
-webkit-appearance: textfield
: Addresses appearance set tosearchfield
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 fromsearchfield
:...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 toborder-box
in Safari 5 and Chrome butcontent-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 totextfield
. Remove the search input cancel button from Safari 5 and Chrome on OSX once the search input appearance has been changed totextfield
. This pseudo-element is not present in other UAs.