From 6992935807a5ed7ec60fb97e3f9fd02cc102a110 Mon Sep 17 00:00:00 2001 From: thoppe Date: Sun, 12 Jan 2014 12:56:12 +0100 Subject: [PATCH 001/139] Fix fieldset width in Chrome and Firefox Fixes an issue in Firefox [1] and Chrome [2]. The implicit width of `fieldset` can be determined by the width of descendants rather than the parent container. This change (adding `min-width:0`) makes the `fieldset` behave like a `div` in this regard. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=504622 [2] http://stackoverflow.com/questions/8084343/google-chrome-fieldset-overflow-bug Close #272 --- normalize.css | 10 ++++++---- test.html | 7 +++++++ 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/normalize.css b/normalize.css index c2de8df94..a892722c5 100644 --- a/normalize.css +++ b/normalize.css @@ -257,13 +257,15 @@ figure { ========================================================================== */ /** - * Define consistent border, margin, and padding. + * 1. Define consistent border, margin, and padding. + * 2. Address width being affected by wide descendants in Chrome and Firefox. */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; /* 1 */ + margin: 0 2px; /* 1 */ + min-width: 0; /* 2 */ + padding: 0.35em 0.625em 0.75em; /* 1 */ } /** diff --git a/test.html b/test.html index c90099163..ab9a79b7d 100644 --- a/test.html +++ b/test.html @@ -268,6 +268,13 @@

Tabular data

Forms

+
+
+ Fieldset with a wider child +
+
+
+
Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.

From 0b5badd591e63b1dcc914a2479f681b9297e6514 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 15 Jan 2014 14:21:28 -0800 Subject: [PATCH 002/139] Fix `font` and `color` inheritance for forms Inherit all `font` properties. Inherit `color` for form controls. Chrome and Safari on OS X will not inherit `color` as they heavily restrict the author-defined styles that will be respected for that element. Fix gh-157 --- normalize.css | 9 +++++---- test.html | 9 +++++++++ 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/normalize.css b/normalize.css index a892722c5..4601d6f7f 100644 --- a/normalize.css +++ b/normalize.css @@ -279,8 +279,9 @@ legend { } /** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. + * 1. Correct color not being inherited in all browsers. + * Known issue: `select` will not inherit color in Chrome and Safari on OS X. + * 2. Correct font properties not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ @@ -288,8 +289,8 @@ button, input, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ + color: inherit; /* 1 */ + font: inherit; /* 2 */ margin: 0; /* 3 */ } diff --git a/test.html b/test.html index ab9a79b7d..51dda7b37 100644 --- a/test.html +++ b/test.html @@ -275,6 +275,15 @@

Forms

+
+ Color inheritance +

+

+

+

+

+
+
Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.

From 496702aab6a80bdb1d03f3011a0c0962635a8b02 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 15 Jan 2014 14:40:36 -0800 Subject: [PATCH 003/139] Set correct display for `progress` in IE 8/9 Set to `inline-block` to match default value in modern browsers. Fix #253 Close #254 --- normalize.css | 1 + 1 file changed, 1 insertion(+) diff --git a/normalize.css b/normalize.css index 4601d6f7f..cf184607c 100644 --- a/normalize.css +++ b/normalize.css @@ -29,6 +29,7 @@ summary { audio, canvas, +progress, video { display: inline-block; } From 37d1c1ef8ba2ddd5708bfc93083cda964711e6aa Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 15 Jan 2014 16:16:32 -0800 Subject: [PATCH 004/139] Remove default table cell padding Normalize.css makes some convenience changes to the default table rendering. This change removes the 1px of padding around table cells. --- normalize.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/normalize.css b/normalize.css index cf184607c..d38d7914b 100644 --- a/normalize.css +++ b/normalize.css @@ -408,3 +408,8 @@ table { border-collapse: collapse; border-spacing: 0; } + +td, +th { + padding: 0; +} From 3d3096db745224192292584445b5114bf1af8a71 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 15 Jan 2014 16:30:33 -0800 Subject: [PATCH 005/139] Normalize `optgroup` Address Firefox not inheriting `font` properties for `optgroup`. Fix gh-102 --- normalize.css | 1 + 1 file changed, 1 insertion(+) diff --git a/normalize.css b/normalize.css index d38d7914b..94b03c707 100644 --- a/normalize.css +++ b/normalize.css @@ -288,6 +288,7 @@ legend { button, input, +optgroup, select, textarea { color: inherit; /* 1 */ From 5b9bf5e1a365509141bb26669cc6cd45ed2cda1e Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 15 Jan 2014 16:45:04 -0800 Subject: [PATCH 006/139] Fix `optgroup` normalization and add test Ref gh-102 --- normalize.css | 9 +++++++++ test.html | 7 +++++++ 2 files changed, 16 insertions(+) diff --git a/normalize.css b/normalize.css index 94b03c707..771c8f3d1 100644 --- a/normalize.css +++ b/normalize.css @@ -296,6 +296,15 @@ textarea { margin: 0; /* 3 */ } +/** + * Re-apply the `font-weight` to avoid modifying the default UX, and because + * the default cannot be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. diff --git a/test.html b/test.html index 51dda7b37..ef13851bf 100644 --- a/test.html +++ b/test.html @@ -300,6 +300,13 @@

Forms

+

From ccbb28b123186a419abd8f8211f7431885943fd9 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 15 Jan 2014 16:52:18 -0800 Subject: [PATCH 007/139] Fix `figure` margin normalization All browsers that support `figure` apply margin of `1em 40px`. Fix gh-262 --- normalize.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/normalize.css b/normalize.css index 771c8f3d1..9d23b7f2b 100644 --- a/normalize.css +++ b/normalize.css @@ -250,7 +250,7 @@ svg:not(:root) { */ figure { - margin: 0; + margin: 1em 40px; } /* ========================================================================== From 4b94eb7d4d290251d43684a087d0564ef4eb3685 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 15 Jan 2014 21:32:00 -0800 Subject: [PATCH 008/139] Remove `a:focus` outline normalization My hypothesis is that it's more important for a user to get the focus style they expect *within* their browser than it is to have consistent focus styles *between* browsers. In particular, replacing Chrome's default focus style (esp. just for links) seems presumptuous. Component designers/developers can make the decision on when to modify these browser defaults. Fix gh-216 --- normalize.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/normalize.css b/normalize.css index 9d23b7f2b..cd2bbee1f 100644 --- a/normalize.css +++ b/normalize.css @@ -90,14 +90,6 @@ a { background: transparent; } -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - /** * Improve readability when focused and also mouse hovered in all browsers. */ From d86aa8500ee7e8c6568413ccfc115fe437010727 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2014 12:59:12 -0800 Subject: [PATCH 009/139] Fix number input button cursor on OS X Chrome Fix the cursor style for Chrome's increment/decrement buttons on `input[type="number"]. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. Fix gh-283 --- normalize.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/normalize.css b/normalize.css index cd2bbee1f..530ef2da9 100644 --- a/normalize.css +++ b/normalize.css @@ -355,6 +355,17 @@ input[type="radio"] { padding: 0; /* 2 */ } +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome From 20e58223c9f07607289063c649a7e0e569ec7f97 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2014 13:03:24 -0800 Subject: [PATCH 010/139] Revert `textarea` alignment modification Leave the default baseline alignment in place. Fix gh-280 --- normalize.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/normalize.css b/normalize.css index 530ef2da9..615fa33a0 100644 --- a/normalize.css +++ b/normalize.css @@ -400,13 +400,11 @@ input::-moz-focus-inner { } /** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. + * Remove default vertical scrollbar in IE 8/9. */ textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ + overflow: auto; } /* ========================================================================== From e372fcd83d2de2f08ce6755660c36da7954fdb4d Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2014 13:15:41 -0800 Subject: [PATCH 011/139] Fix rendering of test file on mobile --- test.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test.html b/test.html index ef13851bf..a2257bada 100644 --- a/test.html +++ b/test.html @@ -2,7 +2,7 @@ - + Normalize CSS From 68322db312c1c8eb9fd1e9d2571c7728ea9c4cbe Mon Sep 17 00:00:00 2001 From: Oleg Korsunsky Date: Fri, 24 Jan 2014 13:16:11 -0800 Subject: [PATCH 012/139] Address `button` overflow in IE 8/9/10 --- normalize.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/normalize.css b/normalize.css index 615fa33a0..7ae90bb87 100644 --- a/normalize.css +++ b/normalize.css @@ -297,12 +297,19 @@ optgroup { font-weight: bold; } +/** + * Address `overflow` set to `hidden` in IE 8/9/10. + */ + +button { + overflow: visible; +} + /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ -button, input { line-height: normal; } From 45cc401523c73a7ea48d433a269a7164059a4812 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2014 13:23:52 -0800 Subject: [PATCH 013/139] Change indentation: 4 -> 2 spaces --- CONTRIBUTING.md | 2 +- normalize.css | 130 ++++++++++++++++++++++++------------------------ 2 files changed, 66 insertions(+), 66 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4c526bb08..abcbae257 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -172,6 +172,6 @@ cutting new releases. added to the CHANGELOG (inc. date), and the `bower.json`, `component.json`, and `normalize.css` files. 3. The commit message must be of `v0.0.0` format. -4. Create an annotated tag for the version: `git tag -m "v0.0.0" v0.0.0`. +4. Create an annotated tag for the version: `git tag -m "v0.0.0" 0.0.0`. 5. Push the changes and tags to GitHub: `git push --tags origin master` 6. Checkout the `gh-pages` branch and follow the instructions in the README. diff --git a/normalize.css b/normalize.css index 7ae90bb87..955481d6a 100644 --- a/normalize.css +++ b/normalize.css @@ -20,7 +20,7 @@ main, nav, section, summary { - display: block; + display: block; } /** @@ -31,7 +31,7 @@ audio, canvas, progress, video { - display: inline-block; + display: inline-block; } /** @@ -40,8 +40,8 @@ video { */ audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } /** @@ -51,7 +51,7 @@ audio:not([controls]) { [hidden], template { - display: none; + display: none; } /* ========================================================================== @@ -65,9 +65,9 @@ template { */ html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ } /** @@ -75,7 +75,7 @@ html { */ body { - margin: 0; + margin: 0; } /* ========================================================================== @@ -87,7 +87,7 @@ body { */ a { - background: transparent; + background: transparent; } /** @@ -96,7 +96,7 @@ a { a:active, a:hover { - outline: 0; + outline: 0; } /* ========================================================================== @@ -109,8 +109,8 @@ a:hover { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } /** @@ -118,7 +118,7 @@ h1 { */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } /** @@ -127,7 +127,7 @@ abbr[title] { b, strong { - font-weight: bold; + font-weight: bold; } /** @@ -135,7 +135,7 @@ strong { */ dfn { - font-style: italic; + font-style: italic; } /** @@ -143,9 +143,9 @@ dfn { */ hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } /** @@ -153,8 +153,8 @@ hr { */ mark { - background: #ff0; - color: #000; + background: #ff0; + color: #000; } /** @@ -165,8 +165,8 @@ code, kbd, pre, samp { - font-family: monospace, serif; - font-size: 1em; + font-family: monospace, serif; + font-size: 1em; } /** @@ -174,7 +174,7 @@ samp { */ pre { - white-space: pre-wrap; + white-space: pre-wrap; } /** @@ -182,7 +182,7 @@ pre { */ q { - quotes: "\201C" "\201D" "\2018" "\2019"; + quotes: "\201C" "\201D" "\2018" "\2019"; } /** @@ -190,7 +190,7 @@ q { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -199,18 +199,18 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } /* ========================================================================== @@ -222,7 +222,7 @@ sub { */ img { - border: 0; + border: 0; } /** @@ -230,7 +230,7 @@ img { */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } /* ========================================================================== @@ -242,7 +242,7 @@ svg:not(:root) { */ figure { - margin: 1em 40px; + margin: 1em 40px; } /* ========================================================================== @@ -255,10 +255,10 @@ figure { */ fieldset { - border: 1px solid #c0c0c0; /* 1 */ - margin: 0 2px; /* 1 */ - min-width: 0; /* 2 */ - padding: 0.35em 0.625em 0.75em; /* 1 */ + border: 1px solid #c0c0c0; /* 1 */ + margin: 0 2px; /* 1 */ + min-width: 0; /* 2 */ + padding: 0.35em 0.625em 0.75em; /* 1 */ } /** @@ -267,8 +267,8 @@ fieldset { */ legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ + border: 0; /* 1 */ + padding: 0; /* 2 */ } /** @@ -283,9 +283,9 @@ input, optgroup, select, textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ } /** @@ -294,7 +294,7 @@ textarea { */ optgroup { - font-weight: bold; + font-weight: bold; } /** @@ -302,7 +302,7 @@ optgroup { */ button { - overflow: visible; + overflow: visible; } /** @@ -311,7 +311,7 @@ button { */ input { - line-height: normal; + line-height: normal; } /** @@ -323,7 +323,7 @@ input { button, select { - text-transform: none; + text-transform: none; } /** @@ -338,8 +338,8 @@ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ } /** @@ -348,7 +348,7 @@ input[type="submit"] { button[disabled], html input[disabled] { - cursor: default; + cursor: default; } /** @@ -358,8 +358,8 @@ html input[disabled] { input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** @@ -370,7 +370,7 @@ input[type="radio"] { input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } /** @@ -380,10 +380,10 @@ input[type="number"]::-webkit-outer-spin-button { */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; } /** @@ -393,7 +393,7 @@ input[type="search"] { input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** @@ -402,8 +402,8 @@ input[type="search"]::-webkit-search-decoration { button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } /** @@ -411,7 +411,7 @@ input::-moz-focus-inner { */ textarea { - overflow: auto; + overflow: auto; } /* ========================================================================== @@ -423,11 +423,11 @@ textarea { */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } td, th { - padding: 0; + padding: 0; } From 37ea6ae1874dce2ecd4aa3a5b0edc89f7da29337 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2014 21:59:28 -0800 Subject: [PATCH 014/139] Fix vertical alignment of `progress` Chrome, Firefox, and Opera set `vertical-align: -0.2em`. The browser implementations aren't great. They scale badly with font size and when the height of the element is changed. Aligning them to the baseline, as IE does, helps make their alignment consistent with other similar elements. --- normalize.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/normalize.css b/normalize.css index 955481d6a..a7a42e76a 100644 --- a/normalize.css +++ b/normalize.css @@ -24,14 +24,16 @@ summary { } /** - * Correct `inline-block` display not defined in IE 8/9. + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { - display: inline-block; + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** From a8edd0c5aa06b905e8e1550fd6a5c01e46375194 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2014 22:04:39 -0800 Subject: [PATCH 015/139] Fix `pre` text formatting and overflow Don't visually break `pre` text over multiple lines. Trigger a scrollbar when the preformatted text is too wide for its container. --- normalize.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/normalize.css b/normalize.css index a7a42e76a..41d438124 100644 --- a/normalize.css +++ b/normalize.css @@ -172,11 +172,11 @@ samp { } /** - * Improve readability of pre-formatted text in all browsers. + * Contain overflow in all browsers. */ pre { - white-space: pre-wrap; + overflow: auto; } /** From 7e80851c5fd2d49772235e2d453c9e1caaeb2bc5 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 24 Jan 2014 23:09:36 -0800 Subject: [PATCH 016/139] Fix i18n for `q` element Don't attempt to normalize `q` because it prevents the browser from automatically adapting the quotes used based on the value of a `lang` attribute. --- normalize.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/normalize.css b/normalize.css index 41d438124..0fbd474e0 100644 --- a/normalize.css +++ b/normalize.css @@ -179,14 +179,6 @@ pre { overflow: auto; } -/** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - /** * Address inconsistent and variable font size in all browsers. */ From a2ae3b5d7a49b67da03ff9b0878c2d2a53fbc821 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 25 Jan 2014 16:50:27 -0800 Subject: [PATCH 017/139] Revert 6992935807a5ed7ec60fb97e3f9fd02cc102a110 Doesn't work in Firefox. --- normalize.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/normalize.css b/normalize.css index 0fbd474e0..691996f52 100644 --- a/normalize.css +++ b/normalize.css @@ -244,15 +244,13 @@ figure { ========================================================================== */ /** - * 1. Define consistent border, margin, and padding. - * 2. Address width being affected by wide descendants in Chrome and Firefox. + * Define consistent border, margin, and padding. */ fieldset { - border: 1px solid #c0c0c0; /* 1 */ - margin: 0 2px; /* 1 */ - min-width: 0; /* 2 */ - padding: 0.35em 0.625em 0.75em; /* 1 */ + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** From 3fe0df0fe511a914bee47c6e11b1832a5a6830ff Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 25 Jan 2014 20:37:46 -0800 Subject: [PATCH 018/139] Reorganise normalize.css and edit comments Update comments in line with any changes browsers have introduced. Minor reordering of rulesets. --- normalize.css | 226 +++++++++++++++++++++++++------------------------- 1 file changed, 112 insertions(+), 114 deletions(-) diff --git a/normalize.css b/normalize.css index 691996f52..ffde8a6e5 100644 --- a/normalize.css +++ b/normalize.css @@ -1,7 +1,26 @@ /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ -/* ========================================================================== - HTML5 display definitions +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions ========================================================================== */ /** @@ -56,32 +75,7 @@ template { display: none; } -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links +/* Links ========================================================================== */ /** @@ -101,20 +95,9 @@ a:hover { outline: 0; } -/* ========================================================================== - Typography +/* Text-level semantics ========================================================================== */ -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ @@ -141,13 +124,13 @@ dfn { } /** - * Address differences between Firefox and other browsers. + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. */ -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; +h1 { + font-size: 2em; + margin: 0.67em 0; } /** @@ -159,26 +142,6 @@ mark { color: #000; } -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - /** * Address inconsistent and variable font size in all browsers. */ @@ -207,8 +170,7 @@ sub { bottom: -0.25em; } -/* ========================================================================== - Embedded content +/* Embedded content ========================================================================== */ /** @@ -227,8 +189,7 @@ svg:not(:root) { overflow: hidden; } -/* ========================================================================== - Figures +/* Grouping content ========================================================================== */ /** @@ -239,34 +200,48 @@ figure { margin: 1em 40px; } -/* ========================================================================== - Forms - ========================================================================== */ +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} /** - * Define consistent border, margin, and padding. + * Contain overflow in all browsers. */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +pre { + overflow: auto; } /** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * Address odd `em`-unit font size rendering in all browsers. */ -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } +/* Forms + ========================================================================== */ + /** - * 1. Correct color not being inherited in all browsers. - * Known issue: `select` will not inherit color in Chrome and Safari on OS X. - * 2. Correct font properties not being inherited in all browsers. + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ @@ -280,15 +255,6 @@ textarea { margin: 0; /* 3 */ } -/** - * Re-apply the `font-weight` to avoid modifying the default UX, and because - * the default cannot be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - /** * Address `overflow` set to `hidden` in IE 8/9/10. */ @@ -297,20 +263,11 @@ button { overflow: visible; } -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. + * Correct `button` style inheritance in Firefox, IE 8+, and Opera + * Correct `select` style inheritance in Firefox. */ button, @@ -344,6 +301,28 @@ html input[disabled] { } /** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ @@ -379,8 +358,9 @@ input[type="search"] { } /** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, @@ -389,13 +369,23 @@ input[type="search"]::-webkit-search-decoration { } /** - * Remove inner padding and border in Firefox 4+. + * Define consistent border, margin, and padding. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `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; /* 2 */ } /** @@ -406,8 +396,16 @@ textarea { overflow: auto; } -/* ========================================================================== - Tables +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables ========================================================================== */ /** From 5b57298fc3ed1be2cafc7c02aef83a7f07bb1a5e Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 25 Jan 2014 20:39:18 -0800 Subject: [PATCH 019/139] Explicit tests for each normalization Use a test-like presentation to make it clearer what the test file is looking to test. Don't use the file as a dumping ground for every HTML element. This change makes the tests more focused and useful. Fix gh-276 Fix gh-284 Fix gh-285 --- test.html | 887 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 506 insertions(+), 381 deletions(-) diff --git a/test.html b/test.html index a2257bada..e6d63e7b2 100644 --- a/test.html +++ b/test.html @@ -1,383 +1,508 @@ - - - - Normalize CSS - - - - - -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
- -
-

Heading 1 (in section)

-

Heading 2 (in section)

-

Heading 3 (in section)

-

Heading 4 (in section)

-
Heading 5 (in section)
-
Heading 6 (in section)
-
- -
-

Heading 1 (in article)

-

Heading 2 (in article)

-

Heading 3 (in article)

-

Heading 4 (in article)

-
Heading 5 (in article)
-
Heading 6 (in article)
-
- -
-
-

Heading 1 (in hgroup)

-

Heading 2 (in hgroup)

-
- -
- -

Text-level semantics

- - - -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

- -
Address: somewhere, world
- -
- -
- -

- The a element example
- The abbr element and abbr element with title examples
- The b element example
- The cite element example
- The code element example
- The del element example
- The dfn element and dfn element with title examples
- The em element example
- The i element example
- The img element example
- The ins element example
- The kbd element example
- The mark element example
- The q element inside a q element example
- The s element example
- The samp element example
- The small element example
- The span element example
- The strong element example
- The sub element example
- The sup element example
- The u element example
- The var element example -

- -

Template content

- - -

Embedded content

- -

audio

- - - - -

img

- - - - -

svg

- - - - - -

video

- - - - -

Interactive content

- -

details / summary

-
- More info -

Additional information

-
    -
  • Point 1
  • -
  • Point 2
  • -
-
- -

Grouping content

- -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

- -

pre

- -
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
- -
<html>
-    <head>
-    </head>
-    <body>
-        <div class="main"> <div>
-    </body>
-</html>
- -

blockquote

- -
-

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

-
- -
Even better philosophical quote marked up with just a <blockquote> element.
- -

ordered list

- -
    -
  1. list item 1
  2. -
  3. list item 1 -
      -
    1. list item 2
    2. -
    3. list item 2 -
        -
      1. list item 3
      2. -
      3. list item 3
      4. -
      -
    4. -
    5. list item 2
    6. -
    7. list item 2
    8. -
    -
  4. -
  5. list item 1
  6. -
  7. list item 1
  8. -
- -

unordered list

- -
    -
  • list item 1
  • -
  • list item 1 -
      -
    • list item 2
    • -
    • list item 2 -
        -
      • list item 3
      • -
      • list item 3
      • -
      -
    • -
    • list item 2
    • -
    • list item 2
    • -
    -
  • -
  • list item 1
  • -
  • list item 1
  • -
- -

description list

- -
-
Description name
-
Description value
-
Description name
-
Description value
-
Description value
-
Description name
-
Description name
-
Description value
-
- -

figure

- -
- -
Figcaption content
-
- -

Tabular data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsys1970$12.00
- -

Forms

- - -
-
- Fieldset with a wider child -
-
-
- -
- Color inheritance -

-

-

-

-

-
- -
- Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping. -

-

-

-

-

-

-

- -

-

-

-

- -

-

-

-
- -
- Inputs as siblings of labels -

-

-

-

-

-

-

-

- -

-

-

-

- -

-

-
- -
- Clickable inputs and buttons -

-

-

-

-

- - -

-

-

-

-
- -
- box-sizing tests -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
-
-
- - - - + + +Normalize CSS: UI tests + + + + +
+ . + +

Normalize.css: UI tests

+ +

html

+

should have san-serif font family (opinionated)

+
+ abcdefghijklmnopqrstuvwxyz +
+ +

body

+

should have no margin (opinionated)

+
+ (there should be no red background visible on this page) +
+ +

article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary

+

should render as block

+
+
article
+ +
+ summary + details +
+
+ figure +
figcaption
+
+
footer
+
header
+
hgroup
+
main
+ +
section
+
+ +

audio, canvas, progress, video

+

should render as inline-block and baseline-aligned

+
+ + canvas + progress + +
+ +

audio:not([controls]), template, [hidden]

+

should not display

+
+ + + +
+ +

a

+

should have a transparent background when active

+ +

should not have a focus outline when both focused and hovered (opinionated)

+ + +

abbr[title]

+

should have a dotted bottom border

+
+ abbr +
+ +

b, strong

+

should have bold font-weight

+
+ b + strong +
+ +

dfn

+

should have italic font-style

+
+ dfn +
+ +

h1

+

should not change size within an article

+
+

Heading (control)

+
+

Heading (in article)

+
+
+

should not change size within a section

+
+

Heading (control)

+
+

Heading (in section)

+
+
+ +

mark

+

should have a yellow background

+
+ mark +
+ +

small

+

should render equally small in all browsers

+
+ control. small. +
+ +

sub and sup

+

should not affect a line's visual line-height

+
+

control.

+

control. sub.

+

control. sup.

+
+ +

img

+

should not have a border when wrapped in an anchor

+ + +

svg

+

should not overflow

+
+ + + +
+ +

figure

+

should have margins

+
+
+ +
+
+ +

hr

+

should have a content-box box model

+
+
+
+ +

pre

+

should trigger a scrollbar when too wide for its container

+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
+
+ +

code, kbd, pre, samp

+

should render em-unit preformatted text at the same absolute size as normal text

+
+ span: abcdefghijklmnopqrstuvwxyz.
+ code: abcdefghijklmnopqrstuvwxyz.
+ kbd: abcdefghijklmnopqrstuvwxyz.
+ samp: abcdefghijklmnopqrstuvwxyz. +
pre: abcdefghijklmnopqrstuvwxyz.
+
+ +

button, input, optgroup, select, textarea

+

should inherit color from ancestor

+
+
+
+
+ +
+

should inherit font from ancestor

+
+
+
+
+ +
+

should not have margins

+
+ + + + + +
+ +

button

+

should have visible overflow

+
+ + +
+ +

button, select

+

should not inherit text-transform

+
+ + +
+ +

button and button-style input

+

should have pointer cursor style

+
+

+

+

+

+

+
+

should be stylable

+
+ +

+

+

+

+

+
+ +

disabled button and input

+

should have default cursor style

+
+

+

+

+

+

+
+ +

button, input

+

should not have extra inner padding in Firefox

+
+ +

+

+

+

+

+
+ +

input

+

should not inherit line-height

+
+ +
+ +

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

+

should have a border-box box model

+
+ + + +
+

should not have padding

+
+ + +
+ +

input[type="number"]

+

should display a default cursor for the decrement button's click target in Chrome

+
+ +
+ +

input[type="search"]

+

should be stylable

+
+ +
+

should have a content-box box model

+
+
+ +
+
+

should not have a cancel button in Safari or Chrome

+
+ +
+ +

fieldset

+

should have consistent border, padding, and margin

+
+
+
+
+
+ +

legend

+

should inherit color

+
+
+ legend +
+
+

should not have padding

+
+
+ legend +
+
+ +

legend

+

should not have a scrollbar unless overflowing

+
+ +
+ +

table

+

should not have spaces between cells

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsys1970$12.00
+
+ +
From d00c1c98ae09f760ee8f9a72a61d92dae88cdc30 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 25 Jan 2014 20:53:05 -0800 Subject: [PATCH 020/139] Update browser support --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 273482726..b1dd82517 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ The project relies on researching the differences between default browser styles in order to precisely target only the styles that need or benefit from normalizing. -[Check out the demo](http://necolas.github.io/normalize.css/latest/test.html) +[View the test file](http://necolas.github.io/normalize.css/latest/test.html) ## Install @@ -34,10 +34,11 @@ library code. ## Browser support -* Google Chrome -* Mozilla Firefox 4+ -* Apple Safari 5+ -* Opera 12+ +* Google Chrome (latest) +* Mozilla Firefox (latest) +* Mozilla Firefox 4 +* Opera (latest) +* Apple Safari 6+ * Internet Explorer 8+ [Normalize.css v1 provides legacy browser From 488f365fdd04fb9b2c9e85718952a698cb2e6e84 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 25 Jan 2014 21:06:09 -0800 Subject: [PATCH 021/139] Update CHANGELOG --- CHANGELOG.md | 14 ++++++++++++++ test.html | 4 ++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86d0d1df5..71ffe403e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,19 @@ === HEAD +* Explicit tests for each normalization. +* Fix i18n for `q` element. +* Fix `pre` text formatting and overflow. +* Fix vertical alignment of `progress`. +* Address `button` overflow in IE 8/9/10. +* Revert `textarea` alignment modification. +* Fix number input button cursor in Chrome on OS X. +* Remove `a:focus` outline normalization. +* Fix `figure` margin normalization. +* Normalize `optgroup`. +* Remove default table cell padding. +* Set correct display for `progress` in IE 8/9. +* Fix `font` and `color` inheritance for forms. + === 2.1.3 (August 26, 2013) * Fix component.json. diff --git a/test.html b/test.html index e6d63e7b2..e85aafb76 100644 --- a/test.html +++ b/test.html @@ -334,7 +334,7 @@

should have pointer cursor style

-

should be stylable

+

should be styleable

-

+

+

@@ -344,7 +341,6 @@

disabled button and inputshould have default cursor style

-

@@ -362,13 +358,46 @@

should not have extra inner padding in Firefox

}

-

-

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

+

fieldset

+

should have consistent border, padding, and margin

+
+
+
+
+
+ +

legend

+

should inherit color

+
+
+ legend +
+
+

should not have padding

+
+
+ legend +
+
+

should wrap text

+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me. +
+
+ +

textarea

+

should not have a scrollbar unless overflowing

+
+ +
+ +

[type="checkbox"], [type="radio"]

should have a border-box box model