Drop legacy browser support

No longer supports IE 6/7, Firefox < 4, and Safari < 5.

* Make use of `inherit` to simplify some of the rules.

* Remove a lot of padding and margin normalization, particularly for
  typographic elements, because modern browsers share common base
  styles.

* Add `quotes` normalization. While all target browsers support
  `quotes`, they don't share a common set of quote styles. Opera and IE
  use "curly" quotes whereas other browsers do not. Browsers don't
  appear to set different quotes depending on the language (via the
  `lang` attribute) of the content.

* Remove all list normalizations and they aren't needed anymore.

* Remove a handful of form normalizations that targetted IE 6/7 or
  Firefox 3.
This commit is contained in:
Nicolas Gallagher 2012-08-16 22:34:39 +01:00
parent 9d729698e6
commit 7e014980b9
3 changed files with 43 additions and 161 deletions

View File

@ -1,3 +1,12 @@
== HEAD
* Remove legacy browser form normalizations.
* Remove all list normalizations.
* Add `quotes` normalizations.
* Remove all heading normalizations except `h1` font size.
* Form elements automatically inherit `font-family` from ancestor.
* Drop support for IE 6/7, Firefox < 4, and Safari < 5.
== 1.0.1 (August 19, 2012) == 1.0.1 (August 19, 2012)
* Adjust `small` font size normalization. * Adjust `small` font size normalization.

View File

@ -26,10 +26,10 @@ override the defaults later in your CSS.
## Browser support ## Browser support
* Google Chrome * Google Chrome
* Mozilla Firefox 3+ * Mozilla Firefox 4+
* Apple Safari 4+ * Apple Safari 5+
* Opera 10+ * Opera 12+
* Internet Explorer 6+ * Internet Explorer 8+
## Contribute ## Contribute

187
normalize.css vendored
View File

@ -5,7 +5,7 @@
========================================================================== */ ========================================================================== */
/* /*
* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. * Corrects `block` display not defined in IE 8/9.
*/ */
article, article,
@ -23,7 +23,7 @@ summary {
} }
/* /*
* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. * Corrects `inline-block` display not defined in IE 8/9.
*/ */
audio, audio,
@ -45,9 +45,7 @@ audio:not([controls]) {
} }
/* /*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * Addresses styling for `hidden` attribute not present in IE 8/9.
* and Safari 4.
* Known issue: no IE 6 support.
*/ */
[hidden] { [hidden] {
@ -59,33 +57,19 @@ audio:not([controls]) {
========================================================================== */ ========================================================================== */
/* /*
* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using * 1. Sets default font family to sans-serif.
* `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling * 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom. * user zoom.
*/ */
html { html {
font-size: 100%; /* 1 */ font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */
} }
/* /*
* Addresses `font-family` inconsistency between `textarea` and other form * Removes default margin.
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/*
* Addresses margins handled incorrectly in IE 6/7.
*/ */
body { body {
@ -118,43 +102,16 @@ a:hover {
========================================================================== */ ========================================================================== */
/* /*
* Addresses font sizes and margins set differently in IE 6/7. * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * Safari 5, and Chrome.
* and Chrome.
*/ */
h1 { h1 {
font-size: 2em; font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
} }
/* /*
* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/ */
abbr[title] { abbr[title] {
@ -162,7 +119,7 @@ abbr[title] {
} }
/* /*
* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/ */
b, b,
@ -170,10 +127,6 @@ strong {
font-weight: bold; font-weight: bold;
} }
blockquote {
margin: 1em 40px;
}
/* /*
* Addresses styling not present in Safari 5 and Chrome. * Addresses styling not present in Safari 5 and Chrome.
*/ */
@ -183,7 +136,7 @@ dfn {
} }
/* /*
* Addresses styling not present in IE 6/7/8/9. * Addresses styling not present in IE 8/9.
*/ */
mark { mark {
@ -191,17 +144,9 @@ mark {
color: #000; color: #000;
} }
/*
* Addresses margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/* /*
* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. * Corrects font family set oddly in Safari 5 and Chrome.
*/ */
code, code,
@ -209,7 +154,6 @@ kbd,
pre, pre,
samp { samp {
font-family: monospace, serif; font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; font-size: 1em;
} }
@ -224,21 +168,11 @@ pre {
} }
/* /*
* Addresses CSS quotes not supported in IE 6/7. * Sets consistent quote types.
*/ */
q { q {
quotes: none; quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
* Addresses `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
} }
/* /*
@ -269,57 +203,16 @@ sub {
bottom: -0.25em; bottom: -0.25em;
} }
/* ==========================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/*
* Addresses paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/*
* Corrects list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ========================================================================== /* ==========================================================================
Embedded content Embedded content
========================================================================== */ ========================================================================== */
/* /*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. * Removes border when inside `a` element in IE 8/9.
* 2. Improves image quality when scaled in IE 7.
*/ */
img { img {
border: 0; /* 1 */ border: 0;
-ms-interpolation-mode: bicubic; /* 2 */
} }
/* /*
@ -335,7 +228,7 @@ svg:not(:root) {
========================================================================== */ ========================================================================== */
/* /*
* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. * Addresses margin not present in IE 8/9 and Safari 5.
*/ */
figure { figure {
@ -346,14 +239,6 @@ figure {
Forms Forms
========================================================================== */ ========================================================================== */
/*
* Corrects margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/* /*
* Define consistent border, margin, and padding. * Define consistent border, margin, and padding.
*/ */
@ -365,37 +250,32 @@ fieldset {
} }
/* /*
* 1. Corrects color not being inherited in IE 6/7/8/9. * 1. Corrects color not being inherited in IE 8/9.
* 2. Corrects text not wrapping in Firefox 3. * 2. Remove padding so people aren't caught out if they zero out fieldsets.
* 3. Corrects alignment displayed oddly in IE 6/7.
*/ */
legend { legend {
border: 0; /* 1 */ border: 0; /* 1 */
padding: 0; padding: 0; /* 2 */
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
} }
/* /*
* 1. Corrects font size not being inherited in all browsers. * 1. Corrects font family not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, * 2. Corrects font size not being inherited in all browsers.
* and Chrome. * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
* 3. Improves appearance and consistency in all browsers.
*/ */
button, button,
input, input,
select, select,
textarea { textarea {
font-size: 100%; /* 1 */ font-family: inherit; /* 1 */
margin: 0; /* 2 */ font-size: 100%; /* 2 */
vertical-align: baseline; /* 3 */ margin: 0; /* 3 */
*vertical-align: middle; /* 3 */
} }
/* /*
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet. * the UA stylesheet.
*/ */
@ -410,8 +290,6 @@ input {
* 2. Corrects inability to style clickable `input` types in iOS. * 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type * 3. Improves usability and consistency of cursor style between image-type
* `input` and others. * `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/ */
button, button,
@ -420,7 +298,6 @@ input[type="reset"],
input[type="submit"] { input[type="submit"] {
-webkit-appearance: button; /* 2 */ -webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */ cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
} }
/* /*
@ -433,18 +310,14 @@ input[disabled] {
} }
/* /*
* 1. Addresses box sizing set to content-box in IE 8/9. * 1. Addresses box sizing set to `content-box` in IE 8/9.
* 2. Removes excess padding in IE 8/9. * 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/ */
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */ padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
} }
/* /*
@ -471,7 +344,7 @@ input[type="search"]::-webkit-search-decoration {
} }
/* /*
* Removes inner padding and border in Firefox 3+. * Removes inner padding and border in Firefox 4+.
*/ */
button::-moz-focus-inner, button::-moz-focus-inner,
@ -481,7 +354,7 @@ input::-moz-focus-inner {
} }
/* /*
* 1. Removes default vertical scrollbar in IE 6/7/8/9. * 1. Removes default vertical scrollbar in IE 8/9.
* 2. Improves readability and alignment in all browsers. * 2. Improves readability and alignment in all browsers.
*/ */