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)
* Adjust `small` font size normalization.

View File

@ -26,10 +26,10 @@ override the defaults later in your CSS.
## Browser support
* Google Chrome
* Mozilla Firefox 3+
* Apple Safari 4+
* Opera 10+
* Internet Explorer 6+
* Mozilla Firefox 4+
* Apple Safari 5+
* Opera 12+
* Internet Explorer 8+
## 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,
@ -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,
@ -45,9 +45,7 @@ audio:not([controls]) {
}
/*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
* and Safari 4.
* Known issue: no IE 6 support.
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
@ -59,33 +57,19 @@ audio:not([controls]) {
========================================================================== */
/*
* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/*
* Addresses margins handled incorrectly in IE 6/7.
* Removes default margin.
*/
body {
@ -118,43 +102,16 @@ a:hover {
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
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] {
@ -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,
@ -170,10 +127,6 @@ strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/*
* 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 {
@ -191,17 +144,9 @@ mark {
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,
@ -209,7 +154,6 @@ kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
@ -224,21 +168,11 @@ pre {
}
/*
* Addresses CSS quotes not supported in IE 6/7.
* Sets consistent quote types.
*/
q {
quotes: none;
}
/*
* Addresses `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
@ -269,57 +203,16 @@ sub {
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
========================================================================== */
/*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7.
* Removes border when inside `a` element in IE 8/9.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
border: 0;
}
/*
@ -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 {
@ -346,14 +239,6 @@ figure {
Forms
========================================================================== */
/*
* Corrects margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/*
* Define consistent border, margin, and padding.
*/
@ -365,37 +250,32 @@ fieldset {
}
/*
* 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7.
* 1. Corrects color not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
padding: 0; /* 2 */
}
/*
* 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improves appearance and consistency in all browsers.
* 1. Corrects font family not being inherited in all browsers.
* 2. Corrects font size not being inherited in all browsers.
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 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.
*/
@ -410,8 +290,6 @@ input {
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
@ -420,7 +298,6 @@ input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
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.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
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,
@ -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.
*/