diff options
author | JohnAlbin <virtually.johnalbin@gmail.com> | 2016-05-19 16:51:09 +0300 |
---|---|---|
committer | JohnAlbin <virtually.johnalbin@gmail.com> | 2016-05-20 20:10:38 +0300 |
commit | 6c3e24cea6b32e34604b8bc8cd7af26a6152841f (patch) | |
tree | d71213d56cbdaeed7eee478678cc66302b7196d1 /test | |
parent | bcc4052f44e686b9f8cab8ac7547b3d4de0b0d37 (diff) |
Update to normalize.css 4.1.1. Fixes #55
Diffstat (limited to 'test')
33 files changed, 3652 insertions, 4292 deletions
diff --git a/test/fixtures/fork-versions/default/output.css b/test/fixtures/fork-versions/default/output.css index 4cc55e0..4aa06f1 100644 --- a/test/fixtures/fork-versions/default/output.css +++ b/test/fixtures/fork-versions/default/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,105 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre, +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +145,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,22 +168,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -166,160 +191,166 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } - -/** - * Contain overflow in all browsers. - */ -pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -327,38 +358,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/fork-versions/ruby-sass-compass/output.css b/test/fixtures/fork-versions/ruby-sass-compass/output.css index b3af703..2530f56 100644 --- a/test/fixtures/fork-versions/ruby-sass-compass/output.css +++ b/test/fixtures/fork-versions/ruby-sass-compass/output.css @@ -9,9 +9,8 @@ html { line-height: 1.5em; } /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -22,7 +21,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -30,10 +29,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -42,7 +40,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -51,86 +48,107 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { display: inline-block; - /* 1 */ *display: inline; - *zoom: 1; - vertical-align: baseline; - /* 2 */ } + *zoom: 1; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5em 40px; } + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } /** - * Address styling not present in Safari and Chrome. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre, +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { /* Set the font-size and line-height while keeping a proper vertical rhythm. */ @@ -171,27 +189,21 @@ h6 { margin-bottom: 2.23881em; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -p, -pre { - margin: 1.5em 0; } - -/** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -200,14 +212,36 @@ sup { position: relative; vertical-align: baseline; } +sub { + bottom: -0.25em; } + sup { top: -0.5em; } -sub { - bottom: -0.25em; } +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE <11. + */ +img { + border-style: none; + /* Improve image quality when scaled in IE 7. */ + -ms-interpolation-mode: bicubic; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 1.5em 40px; } -/* Lists - ========================================================================== */ /** * Address margins set differently in IE 6/7. */ @@ -236,60 +270,53 @@ nav ol { list-style: none; list-style-image: none; } -/* Embedded content - ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ -img { - border: 0; - /* Improve image quality when scaled in IE 7. */ - -ms-interpolation-mode: bicubic; } - -/** - * Correct overflow not hidden in IE 9/10/11. + * Add the correct margin in IE 8. */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Address margin not present in IE 8/9 and Safari. - */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /** - * Contain overflow in all browsers. - */ + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +p, pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } + margin: 1.5em 0; } /* Forms ========================================================================== */ /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). */ /** * Correct margin displayed oddly in IE 6/7. @@ -298,98 +325,86 @@ form { margin: 0; } /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ + /* 2 */ *font-family: sans-serif; - /* 4 */ + /* 3 */ *vertical-align: middle; - /* 5 */ } + /* 4 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ - *overflow: visible; - /* 4 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ input { + overflow: visible; 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -402,35 +417,46 @@ input[type="radio"] { /* 3 */ } /** - * 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { margin: 0 2px; @@ -450,40 +476,36 @@ fieldset { padding-right: 0.875em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; /* 1 */ - padding: 0; + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; /* 2 */ + padding: 0; + /* 3 */ *margin-left: -7px; - /* 3 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 4 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/fork-versions/typey-chroma-kss/output.css b/test/fixtures/fork-versions/typey-chroma-kss/output.css index b993a45..2f3ee21 100644 --- a/test/fixtures/fork-versions/typey-chroma-kss/output.css +++ b/test/fixtures/fork-versions/typey-chroma-kss/output.css @@ -24,7 +24,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -36,32 +35,33 @@ audio, canvas, progress, video { - display: inline-block; - vertical-align: baseline; } + display: inline-block; } audio:not([controls]) { display: none; height: 0; } -[hidden] { - display: none; } +progress { + vertical-align: baseline; } -template { +template, +[hidden] { display: none; } :link { - color: #0072b9; } + color: #0072b9; + background-color: transparent; + -webkit-text-decoration-skip: objects; } :visited { color: #003353; } a:active { - color: #c00; - background-color: transparent; } + color: #c00; } a:active, a:hover { - outline: 0; } + outline-width: 0; } @media print { :link, @@ -113,20 +113,34 @@ h6 { margin-bottom: 1.5rem; } abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } @media print { abbr[title]:after { content: " (" attr(title) ")"; } } b, strong { - font-weight: bold; } + font-weight: inherit; } + +b, +strong { + font-weight: bolder; } + +pre, +code, +kbd, +samp, +var { + font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif; + font-size: 1em; } dfn { font-style: italic; } mark { - background: #fd0; + background-color: #fd0; color: #000; } small { @@ -139,12 +153,12 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -.5em; } - sub { bottom: -.25em; } +sup { + top: -.5em; } + .divider, hr { margin: 1.5rem 0; @@ -153,6 +167,9 @@ hr { .divider > :first-child, hr > :first-child { margin-top: 1.5rem; } +blockquote { + margin: 1.5rem 2rem; } + dl, menu, ol, @@ -173,32 +190,20 @@ ol, ul { padding: 0 0 0 32px; } -blockquote { - margin: 1.5rem 2rem; } - figure { margin: 1.5rem 2rem; } hr { box-sizing: content-box; - height: 0; } + height: 0; + overflow: visible; } p, pre { margin: 1.5rem 0; } -code, -kbd, -samp, -var, pre { - font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif; - font-size: 1em; } - -pre { - overflow: auto; } - img { - border: 0; } + border-style: none; } img, svg { @@ -265,7 +270,6 @@ select, textarea { box-sizing: border-box; max-width: 100%; - color: inherit; font: inherit; margin: 0; } @@ -276,30 +280,48 @@ button, select { text-transform: none; } -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } - -html input[type="button"], +button, +html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +input { + overflow: visible; } + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } -input[type="search"] { - -webkit-appearance: textfield; } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; } + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -input[type="text"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], textarea { - line-height: inherit; } +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } -input[type="checkbox"], -input[type="radio"] { +[type="checkbox"], +[type="radio"] { box-sizing: border-box; padding: 0; } @@ -309,7 +331,11 @@ fieldset { margin: 0 2px; } legend { - border: 0; + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + color: inherit; margin-left: -5px; padding: 0 5px; } diff --git a/test/fixtures/fork-versions/typey/output.css b/test/fixtures/fork-versions/typey/output.css index bfd0949..af0725c 100644 --- a/test/fixtures/fork-versions/typey/output.css +++ b/test/fixtures/fork-versions/typey/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-size: 100%; @@ -18,7 +17,7 @@ html { font-size: 12pt; } } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -26,10 +25,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -38,7 +36,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -47,78 +44,105 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre, +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2rem; @@ -152,20 +176,21 @@ h6 { margin: 1.5rem 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -174,22 +199,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -197,6 +222,12 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 1.5rem 2.5rem; } + +/** * Address margins set differently in IE 6/7. */ dl, @@ -226,23 +257,22 @@ ul { padding: 0 0 0 40px; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5rem 2.5rem; } - -/** - * Address margin not present in IE 8/9 and Safari. + * Add the correct margin in IE 8. */ figure { margin: 1.5rem 2.5rem; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /** * Set 1 unit of vertical rhythm on the top and bottom margin. @@ -251,147 +281,149 @@ p, pre { margin: 1.5rem 0; } -/** - * Contain overflow in all browsers. - */ -pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -samp, pre { - font-family: monospace, monospace; - font-size: 1em; } - /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { padding: 0.525rem 0.9375rem 0.975rem; @@ -399,38 +431,34 @@ fieldset { margin: 0 2px; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/import-now/output.css b/test/fixtures/import-now/output.css index e19499d..c0b488c 100644 --- a/test/fixtures/import-now/output.css +++ b/test/fixtures/import-now/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -166,160 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -327,38 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/normalize/exclude-multiple/output.css b/test/fixtures/normalize/exclude-multiple/output.css index a9d3184..9fd06a5 100644 --- a/test/fixtures/normalize/exclude-multiple/output.css +++ b/test/fixtures/normalize/exclude-multiple/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } /** - * Address styling not present in Safari and Chrome. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/** + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,138 +165,155 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Forms ========================================================================== */ /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -282,38 +321,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/normalize/exclude-single/output.css b/test/fixtures/normalize/exclude-single/output.css index fb447ef..6ee0f9b 100644 --- a/test/fixtures/normalize/exclude-single/output.css +++ b/test/fixtures/normalize/exclude-single/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -166,43 +188,23 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } - -/* Tables - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } diff --git a/test/fixtures/normalize/exclude-string/output.css b/test/fixtures/normalize/exclude-string/output.css index 0c1b015..c0b488c 100644 --- a/test/fixtures/normalize/exclude-string/output.css +++ b/test/fixtures/normalize/exclude-string/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -166,160 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -327,25 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } + /* 3 */ } /** - * Remove default vertical scrollbar in IE 8/9/10/11. + * Restore the font weight unset by a previous rule. */ -textarea { - overflow: auto; } +optgroup { + font-weight: bold; } /** - * 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. + * Remove the default vertical scrollbar in IE. */ -optgroup { - font-weight: bold; } +textarea { + overflow: auto; } diff --git a/test/fixtures/normalize/include-multiple/output.css b/test/fixtures/normalize/include-multiple/output.css index 78b32ed..75e1da7 100644 --- a/test/fixtures/normalize/include-multiple/output.css +++ b/test/fixtures/normalize/include-multiple/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,34 +39,31 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } diff --git a/test/fixtures/normalize/include-single/output.css b/test/fixtures/normalize/include-single/output.css index ba6a833..71978f3 100644 --- a/test/fixtures/normalize/include-single/output.css +++ b/test/fixtures/normalize/include-single/output.css @@ -2,15 +2,19 @@ /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } diff --git a/test/fixtures/normalize/include-string/output.css b/test/fixtures/normalize/include-string/output.css index 0e428a0..89b6b57 100644 --- a/test/fixtures/normalize/include-string/output.css +++ b/test/fixtures/normalize/include-string/output.css @@ -2,27 +2,50 @@ /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/** + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -30,20 +53,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -52,8 +76,8 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } + +sup { + top: -0.5em; } diff --git a/test/fixtures/variables/default/output.css b/test/fixtures/variables/default/output.css index e19499d..c0b488c 100644 --- a/test/fixtures/variables/default/output.css +++ b/test/fixtures/variables/default/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -166,160 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -327,38 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/font/output.css b/test/fixtures/variables/font/output.css index 735dca1..92f24a7 100644 --- a/test/fixtures/variables/font/output.css +++ b/test/fixtures/variables/font/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-size: 150%; @@ -15,7 +14,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -23,10 +22,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -35,7 +33,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -44,78 +41,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } /** - * Address styling not present in Safari and Chrome. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/** + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 72px; @@ -167,20 +188,21 @@ h6 { margin: 1.5rem 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -189,22 +211,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -212,6 +234,13 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 36px 40px; + margin: 1.5rem 40px; } + +/** * Address margins set differently in IE 6/7. */ dl, @@ -222,8 +251,8 @@ ul { margin: 1.5rem 0; } /** - * Turn off margins on nested lists. - */ + * Turn off margins on nested lists. + */ ol ol, ol ul, ul ol, @@ -242,25 +271,23 @@ ul { padding: 0 0 0 40px; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 36px 40px; - margin: 1.5rem 40px; } - -/** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 36px 40px; margin: 1.5rem 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /** * Set 1 unit of vertical rhythm on the top and bottom margin. @@ -270,148 +297,153 @@ pre { margin: 36px 0; margin: 1.5rem 0; } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ input { - line-height: normal; } + overflow: visible; } /** - * 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -419,38 +451,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/indent-amount/output.css b/test/fixtures/variables/indent-amount/output.css index 54befc8..0df4d40 100644 --- a/test/fixtures/variables/indent-amount/output.css +++ b/test/fixtures/variables/indent-amount/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-size: 100%; @@ -15,7 +14,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -23,10 +22,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -35,7 +33,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -44,78 +41,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -149,20 +170,21 @@ h6 { margin: 2.23881em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -171,22 +193,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -194,6 +216,12 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 1.5em 3em; } + +/** * Address margins set differently in IE 6/7. */ dl, @@ -203,8 +231,8 @@ ul { margin: 1.5em 0; } /** - * Turn off margins on nested lists. - */ + * Turn off margins on nested lists. + */ ol ol, ol ul, ul ol, @@ -223,23 +251,22 @@ ul { padding: 0 0 0 3em; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5em 3em; } - -/** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 3em; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /** * Set 1 unit of vertical rhythm on the top and bottom margin. @@ -248,148 +275,153 @@ p, pre { margin: 1.5em 0; } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ input { - line-height: normal; } + overflow: visible; } /** - * 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -397,38 +429,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/chrome9/output.css b/test/fixtures/variables/support-for/chrome9/output.css deleted file mode 100644 index 88206ef..0000000 --- a/test/fixtures/variables/support-for/chrome9/output.css +++ /dev/null @@ -1,314 +0,0 @@ -/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device 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 - ========================================================================== */ -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; } - -/** - * 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 { - vertical-align: baseline; - /* 2 */ } - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ -template { - display: none; } - -/* Links - ========================================================================== */ -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ -a:active, -a:hover { - outline: 0; } - -/* Text-level semantics - ========================================================================== */ -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ -abbr[title] { - border-bottom: 1px dotted; } - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ -b, -strong { - font-weight: bold; } - -/** - * Address styling not present in Safari and Chrome. - */ -dfn { - font-style: italic; } - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Address inconsistent and variable font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } - -sub { - bottom: -0.25em; } - -/* Embedded content - ========================================================================== */ -/** - * Correct overflow not hidden in IE 9/10/11. - */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Address differences between Firefox and other browsers. - */ -hr { - box-sizing: content-box; - height: 0; } - -/** - * Contain overflow in all browsers. - */ -pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } - -/* Forms - ========================================================================== */ -/** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. - */ -button, -input, -optgroup, -select, -textarea { - color: inherit; - /* 1 */ - font: inherit; - /* 2 */ - margin: 0; - /* 3 */ } - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ -button { - overflow: visible; } - -/** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ -button, -select { - text-transform: none; } - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } - -/** - * Re-set default cursor for disabled elements. - */ -button[disabled], -html input[disabled] { - cursor: default; } - -/** - * 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; } - -/** - * 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 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - -webkit-box-sizing: content-box; - box-sizing: content-box; - /* 2 */ - /** - * 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, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * Define consistent border, margin, and padding. - */ -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/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. - */ -legend { - padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } - -/** - * 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 - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } diff --git a/test/fixtures/variables/support-for/firefox28/input.scss b/test/fixtures/variables/support-for/firefox28/input.scss deleted file mode 100644 index d0fc97f..0000000 --- a/test/fixtures/variables/support-for/firefox28/input.scss +++ /dev/null @@ -1,6 +0,0 @@ -$support-for: ( - firefox: 28, -); - -@import 'normalize'; -@include normalize(); diff --git a/test/fixtures/variables/support-for/firefox28/output.css b/test/fixtures/variables/support-for/firefox28/output.css deleted file mode 100644 index e26e100..0000000 --- a/test/fixtures/variables/support-for/firefox28/output.css +++ /dev/null @@ -1,314 +0,0 @@ -/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device 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 - ========================================================================== */ -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; } - -/** - * 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 { - vertical-align: baseline; - /* 2 */ } - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ -template { - display: none; } - -/* Links - ========================================================================== */ -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ -a:active, -a:hover { - outline: 0; } - -/* Text-level semantics - ========================================================================== */ -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ -abbr[title] { - border-bottom: 1px dotted; } - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ -b, -strong { - font-weight: bold; } - -/** - * Address styling not present in Safari and Chrome. - */ -dfn { - font-style: italic; } - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Address inconsistent and variable font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } - -sub { - bottom: -0.25em; } - -/* Embedded content - ========================================================================== */ -/** - * Correct overflow not hidden in IE 9/10/11. - */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Address differences between Firefox and other browsers. - */ -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; } - -/** - * Contain overflow in all browsers. - */ -pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } - -/* Forms - ========================================================================== */ -/** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. - */ -button, -input, -optgroup, -select, -textarea { - color: inherit; - /* 1 */ - font: inherit; - /* 2 */ - margin: 0; - /* 3 */ } - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ -button { - overflow: visible; } - -/** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ -button, -select { - text-transform: none; } - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } - -/** - * Re-set default cursor for disabled elements. - */ -button[disabled], -html input[disabled] { - cursor: default; } - -/** - * 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; } - -/** - * 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 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - box-sizing: content-box; - /* 2 */ - /** - * 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, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * Define consistent border, margin, and padding. - */ -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/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. - */ -legend { - padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } - -/** - * 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 - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } diff --git a/test/fixtures/variables/support-for/chrome9/input.scss b/test/fixtures/variables/support-for/firefox29/input.scss index 987e278..3e5b271 100644 --- a/test/fixtures/variables/support-for/chrome9/input.scss +++ b/test/fixtures/variables/support-for/firefox29/input.scss @@ -1,5 +1,5 @@ $support-for: ( - chrome: 9, + firefox: 29, ); @import 'normalize'; diff --git a/test/fixtures/variables/support-for/firefox29/output.css b/test/fixtures/variables/support-for/firefox29/output.css new file mode 100644 index 0000000..3df3b76 --- /dev/null +++ b/test/fixtures/variables/support-for/firefox29/output.css @@ -0,0 +1,393 @@ +/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * Add the correct display in IE <10. + */ +audio, +canvas, +progress, +video { + display: inline-block; } + +/** + * Add the correct display and remove excess height in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } + +/** + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. + */ +template, +[hidden] { + display: none; } + +/* Links + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ +a:active, +a:hover { + outline-width: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/** + * Add the correct font style in Android <4.4. + */ +dfn { + font-style: italic; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + margin: 0.75em 0; } + +/** + * Add the correct background and color in IE <10. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE <11. + */ +img { + border-style: none; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1.5em 40px; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +pre { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. + */ +button, +input, +optgroup, +select, +textarea { + font: inherit; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + */ +button { + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Show the overflow in Edge. + */ +input { + overflow: visible; + line-height: normal; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ + /** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ } + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. + */ +legend { + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ + padding: 0; + /* 3 */ } + +/** + * Restore the font weight unset by a previous rule. + */ +optgroup { + font-weight: bold; } + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/ie10/output.css b/test/fixtures/variables/support-for/ie10/output.css index 0e75f21..c0b488c 100644 --- a/test/fixtures/variables/support-for/ie10/output.css +++ b/test/fixtures/variables/support-for/ie10/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,76 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -119,13 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct background and color in IE <10. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -134,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -157,154 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address differences between Firefox and other browsers. + * Add the correct margin in IE 8. */ -hr { - box-sizing: content-box; - height: 0; } +figure { + margin: 1.5em 40px; } /** - * Contain overflow in all browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -pre { - overflow: auto; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { +pre { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -312,38 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/ie11/output.css b/test/fixtures/variables/support-for/ie11/output.css index 1b96241..c0b488c 100644 --- a/test/fixtures/variables/support-for/ie11/output.css +++ b/test/fixtures/variables/support-for/ie11/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,64 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -template { +progress { + vertical-align: baseline; } + +/** + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. + */ +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -107,13 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct background and color in IE <10. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -122,16 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Correct overflow not hidden in IE 9/10/11. + * Remove the border on images inside links in IE <11. + */ +img { + border-style: none; } + +/** + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -139,138 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address differences between Firefox and other browsers. + * Add the correct margin in IE 8. */ -hr { - box-sizing: content-box; - height: 0; } +figure { + margin: 1.5em 40px; } /** - * Contain overflow in all browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -pre { - overflow: auto; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { +pre { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ input { - line-height: normal; } + overflow: visible; } /** - * 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`. + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -278,38 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/ie6/output.css b/test/fixtures/variables/support-for/ie6/output.css index 72a910c..9a5d478 100644 --- a/test/fixtures/variables/support-for/ie6/output.css +++ b/test/fixtures/variables/support-for/ie6/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-size: 100%; @@ -14,7 +13,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -22,10 +21,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -34,7 +32,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -43,80 +40,105 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { display: inline-block; - /* 1 */ *display: inline; - *zoom: 1; - vertical-align: baseline; - /* 2 */ } + *zoom: 1; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + _font-family: 'courier new', monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -144,20 +166,21 @@ h6 { margin: 2.23881em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -166,24 +189,24 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; + border-style: none; /* Improve image quality when scaled in IE 7. */ -ms-interpolation-mode: bicubic; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -191,6 +214,12 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 1.5em 40px; } + +/** * Address margins set differently in IE 6/7. */ dl, @@ -219,23 +248,22 @@ nav ol { list-style-image: none; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5em 40px; } - -/** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /** * Set 1 unit of vertical rhythm on the top and bottom margin. @@ -244,19 +272,7 @@ p, pre { margin: 1.5em 0; } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } @@ -264,8 +280,23 @@ samp { /* Forms ========================================================================== */ /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). */ /** * Correct margin displayed oddly in IE 6/7. @@ -274,98 +305,85 @@ form { margin: 0; } /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ + /* 2 */ *font-family: sans-serif; - /* 4 */ + /* 3 */ *vertical-align: middle; - /* 5 */ } + /* 4 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ - *overflow: visible; - /* 4 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ input { - line-height: normal; } + overflow: visible; } /** - * 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; @@ -376,33 +394,46 @@ input[type="radio"] { /* 3 */ } /** - * 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -410,40 +441,36 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; /* 1 */ - padding: 0; + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; /* 2 */ + padding: 0; + /* 3 */ *margin-left: -7px; - /* 3 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 4 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/ie7/output.css b/test/fixtures/variables/support-for/ie7/output.css index 9e28cbb..899696d 100644 --- a/test/fixtures/variables/support-for/ie7/output.css +++ b/test/fixtures/variables/support-for/ie7/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-size: 100%; @@ -14,7 +13,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -22,10 +21,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -34,7 +32,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -43,80 +40,104 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { display: inline-block; - /* 1 */ *display: inline; - *zoom: 1; - vertical-align: baseline; - /* 2 */ } + *zoom: 1; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } /** - * Address styling not present in Safari and Chrome. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/** + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -144,20 +165,21 @@ h6 { margin: 2.23881em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -166,24 +188,24 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; + border-style: none; /* Improve image quality when scaled in IE 7. */ -ms-interpolation-mode: bicubic; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -191,6 +213,12 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 1.5em 40px; } + +/** * Address margins set differently in IE 6/7. */ dl, @@ -219,23 +247,22 @@ nav ol { list-style-image: none; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5em 40px; } - -/** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /** * Set 1 unit of vertical rhythm on the top and bottom margin. @@ -244,27 +271,30 @@ p, pre { margin: 1.5em 0; } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). */ /** * Correct margin displayed oddly in IE 6/7. @@ -273,98 +303,85 @@ form { margin: 0; } /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ + /* 2 */ *font-family: sans-serif; - /* 4 */ + /* 3 */ *vertical-align: middle; - /* 5 */ } + /* 4 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ - *overflow: visible; - /* 4 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ input { - line-height: normal; } + overflow: visible; } /** - * 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; @@ -375,33 +392,46 @@ input[type="radio"] { /* 3 */ } /** - * 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -409,40 +439,36 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; /* 1 */ - padding: 0; + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; /* 2 */ + padding: 0; + /* 3 */ *margin-left: -7px; - /* 3 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 4 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/ie8/output.css b/test/fixtures/variables/support-for/ie8/output.css index e19499d..c0b488c 100644 --- a/test/fixtures/variables/support-for/ie8/output.css +++ b/test/fixtures/variables/support-for/ie8/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -166,160 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -327,38 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/ie9/output.css b/test/fixtures/variables/support-for/ie9/output.css index e19499d..c0b488c 100644 --- a/test/fixtures/variables/support-for/ie9/output.css +++ b/test/fixtures/variables/support-for/ie9/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,78 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -121,20 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address styling not present in IE 8/9. - */ + * Add the correct background and color in IE <10. + */ mark { - background: #ff0; + background-color: #ff0; color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -143,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -166,160 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. - */ + * Add the correct margin in IE 8. + */ figure { margin: 1.5em 40px; } /** - * Address differences between Firefox and other browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; - height: 0; } + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Contain overflow in all browsers. - */ pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -327,38 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/negative-value/output.css b/test/fixtures/variables/support-for/negative-value/output.css index 0e75f21..c0b488c 100644 --- a/test/fixtures/variables/support-for/negative-value/output.css +++ b/test/fixtures/variables/support-for/negative-value/output.css @@ -1,8 +1,7 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; @@ -13,7 +12,7 @@ html { /* 2 */ } /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } @@ -21,10 +20,9 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE <10. + * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. + * Add the correct display in IE for `main`. */ article, aside, @@ -33,7 +31,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -42,76 +39,102 @@ summary { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Add the correct display in IE <10. */ audio, canvas, progress, video { - vertical-align: baseline; - /* 2 */ } + display: inline-block; } /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display and remove excess height in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - */ -[hidden] { - display: none; } + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } /** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct display in IE <11, Safari <8, and Firefox <22. + * 1. Add the correct display in IE. */ -template { +template, +[hidden] { display: none; } /* Links ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. - */ + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ a { - background-color: transparent; } + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; } + outline-width: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox <40. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; } + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font style in Android <4.4. */ dfn { font-style: italic; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; @@ -119,13 +142,21 @@ h1 { margin: 0.75em 0; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct background and color in IE <10. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. */ small { font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -134,22 +165,22 @@ sup { position: relative; vertical-align: baseline; } -sup { - top: -0.5em; } - sub { bottom: -0.25em; } +sup { + top: -0.5em; } + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. - */ + * Remove the border on images inside links in IE <11. + */ img { - border: 0; } + border-style: none; } /** - * Correct overflow not hidden in IE 9/10/11. + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } @@ -157,154 +188,170 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address differences between Firefox and other browsers. + * Add the correct margin in IE 8. */ -hr { - box-sizing: content-box; - height: 0; } +figure { + margin: 1.5em 40px; } /** - * Contain overflow in all browsers. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -pre { - overflow: auto; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { +pre { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. + * Known issues: + * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * select, unless a border property is set. The default font weight on + * optgroup elements cannot safely be changed in Chrome on OSX and Safari on + * OS X. + * - It is recommended that you do not style checkbox and radio inputs as + * Firefox's implementation does not respect box-sizing, padding, or width. + * - Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from default to text. + * - The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control font, padding, border, or background. In Chrome + * and Safari 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. Applying -webkit-appearance: textfield + * addresses these issues without removing the benefits of search inputs (e.g. + * showing past searches). Safari (but not Chrome) will clip the cancel button + * on when it has padding (and textfield appearance). + */ +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 4. Improve appearance and consistency with IE 6/7. */ button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ font: inherit; - /* 2 */ + /* 1 */ margin: 0; - /* 3 */ } + /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. */ button { overflow: visible; } /** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { + /* 1 */ text-transform: none; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +html [type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } + /* 2 */ } /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Show the overflow in Edge. */ 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. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ -input[type="checkbox"], -input[type="radio"] { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE <11. + * 2. Remove the padding in IE <11. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +[type="checkbox"], +[type="radio"] { box-sizing: border-box; /* 1 */ 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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ /** - * 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). + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; @@ -312,38 +359,34 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + * 4. Correct alignment displayed oddly in IE 6/7. */ legend { - border: 0; + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; + /* 1 */ + color: inherit; + /* 2 */ padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } + /* 3 */ } /** - * 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. + * Restore the font weight unset by a previous rule. */ optgroup { font-weight: bold; } -/* Tables - ========================================================================== */ /** - * Remove most spacing between table cells. + * Remove the default vertical scrollbar in IE. */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } +textarea { + overflow: auto; } diff --git a/test/fixtures/variables/support-for/safari5/input.scss b/test/fixtures/variables/support-for/safari5/input.scss deleted file mode 100644 index 6d49663..0000000 --- a/test/fixtures/variables/support-for/safari5/input.scss +++ /dev/null @@ -1,6 +0,0 @@ -$support-for: ( - safari: 5, -); - -@import 'normalize'; -@include normalize(); diff --git a/test/fixtures/variables/support-for/safari5/output.css b/test/fixtures/variables/support-for/safari5/output.css deleted file mode 100644 index 30f750e..0000000 --- a/test/fixtures/variables/support-for/safari5/output.css +++ /dev/null @@ -1,320 +0,0 @@ -/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device 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 - ========================================================================== */ -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; } - -/** - * 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 { - vertical-align: baseline; - /* 2 */ } - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ -template { - display: none; } - -/* Links - ========================================================================== */ -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ -a:active, -a:hover { - outline: 0; } - -/* Text-level semantics - ========================================================================== */ -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ -abbr[title] { - border-bottom: 1px dotted; } - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ -b, -strong { - font-weight: bold; } - -/** - * Address styling not present in Safari and Chrome. - */ -dfn { - font-style: italic; } - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Address inconsistent and variable font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } - -sub { - bottom: -0.25em; } - -/* Embedded content - ========================================================================== */ -/** - * Correct overflow not hidden in IE 9/10/11. - */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Address margin not present in IE 8/9 and Safari. - */ -figure { - margin: 1.5em 40px; } - -/** - * Address differences between Firefox and other browsers. - */ -hr { - box-sizing: content-box; - height: 0; } - -/** - * Contain overflow in all browsers. - */ -pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } - -/* Forms - ========================================================================== */ -/** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. - */ -button, -input, -optgroup, -select, -textarea { - color: inherit; - /* 1 */ - font: inherit; - /* 2 */ - margin: 0; - /* 3 */ } - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ -button { - overflow: visible; } - -/** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ -button, -select { - text-transform: none; } - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } - -/** - * Re-set default cursor for disabled elements. - */ -button[disabled], -html input[disabled] { - cursor: default; } - -/** - * 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; } - -/** - * 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 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - -webkit-box-sizing: content-box; - box-sizing: content-box; - /* 2 */ - /** - * 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, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * Define consistent border, margin, and padding. - */ -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/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. - */ -legend { - padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } - -/** - * 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 - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } diff --git a/test/fixtures/variables/support-for/safari6/input.scss b/test/fixtures/variables/support-for/safari6/input.scss deleted file mode 100644 index b2406b9..0000000 --- a/test/fixtures/variables/support-for/safari6/input.scss +++ /dev/null @@ -1,6 +0,0 @@ -$support-for: ( - safari: 6, -); - -@import 'normalize'; -@include normalize(); diff --git a/test/fixtures/variables/support-for/safari6/output.css b/test/fixtures/variables/support-for/safari6/output.css deleted file mode 100644 index c61ba98..0000000 --- a/test/fixtures/variables/support-for/safari6/output.css +++ /dev/null @@ -1,319 +0,0 @@ -/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device 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 - ========================================================================== */ -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; } - -/** - * 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 { - vertical-align: baseline; - /* 2 */ } - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ -template { - display: none; } - -/* Links - ========================================================================== */ -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ -a:active, -a:hover { - outline: 0; } - -/* Text-level semantics - ========================================================================== */ -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ -abbr[title] { - border-bottom: 1px dotted; } - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ -b, -strong { - font-weight: bold; } - -/** - * Address styling not present in Safari and Chrome. - */ -dfn { - font-style: italic; } - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Address inconsistent and variable font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } - -sub { - bottom: -0.25em; } - -/* Embedded content - ========================================================================== */ -/** - * Correct overflow not hidden in IE 9/10/11. - */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Address margin not present in IE 8/9 and Safari. - */ -figure { - margin: 1.5em 40px; } - -/** - * Address differences between Firefox and other browsers. - */ -hr { - box-sizing: content-box; - height: 0; } - -/** - * Contain overflow in all browsers. - */ -pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } - -/* Forms - ========================================================================== */ -/** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. - */ -button, -input, -optgroup, -select, -textarea { - color: inherit; - /* 1 */ - font: inherit; - /* 2 */ - margin: 0; - /* 3 */ } - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ -button { - overflow: visible; } - -/** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ -button, -select { - text-transform: none; } - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } - -/** - * Re-set default cursor for disabled elements. - */ -button[disabled], -html input[disabled] { - cursor: default; } - -/** - * 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; } - -/** - * 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 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - box-sizing: content-box; - /* 2 */ - /** - * 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, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * Define consistent border, margin, and padding. - */ -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/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. - */ -legend { - padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } - -/** - * 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 - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } diff --git a/test/fixtures/variables/support-for/safari7/input.scss b/test/fixtures/variables/support-for/safari7/input.scss deleted file mode 100644 index e37a003..0000000 --- a/test/fixtures/variables/support-for/safari7/input.scss +++ /dev/null @@ -1,6 +0,0 @@ -$support-for: ( - safari: 7, -); - -@import 'normalize'; -@include normalize(); diff --git a/test/fixtures/variables/support-for/safari7/output.css b/test/fixtures/variables/support-for/safari7/output.css deleted file mode 100644 index dc28e07..0000000 --- a/test/fixtures/variables/support-for/safari7/output.css +++ /dev/null @@ -1,313 +0,0 @@ -/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device 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 - ========================================================================== */ -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; } - -/** - * 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 { - vertical-align: baseline; - /* 2 */ } - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ -template { - display: none; } - -/* Links - ========================================================================== */ -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ -a:active, -a:hover { - outline: 0; } - -/* Text-level semantics - ========================================================================== */ -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ -abbr[title] { - border-bottom: 1px dotted; } - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ -b, -strong { - font-weight: bold; } - -/** - * Address styling not present in Safari and Chrome. - */ -dfn { - font-style: italic; } - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Address inconsistent and variable font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } - -sub { - bottom: -0.25em; } - -/* Embedded content - ========================================================================== */ -/** - * Correct overflow not hidden in IE 9/10/11. - */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Address differences between Firefox and other browsers. - */ -hr { - box-sizing: content-box; - height: 0; } - -/** - * Contain overflow in all browsers. - */ -pre { - overflow: auto; } - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } - -/* Forms - ========================================================================== */ -/** - * 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, and Chrome. - * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 - * 5. Improve appearance and consistency with IE 6/7. - */ -button, -input, -optgroup, -select, -textarea { - color: inherit; - /* 1 */ - font: inherit; - /* 2 */ - margin: 0; - /* 3 */ } - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ -button { - overflow: visible; } - -/** - * 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 Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ -button, -select { - text-transform: none; } - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } - -/** - * Re-set default cursor for disabled elements. - */ -button[disabled], -html input[disabled] { - cursor: default; } - -/** - * 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; } - -/** - * 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 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - box-sizing: content-box; - /* 2 */ - /** - * 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, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * Define consistent border, margin, and padding. - */ -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/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - * 3. Correct alignment displayed oddly in IE 6/7. - */ -legend { - padding: 0; - /* 2 */ } - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ -textarea { - overflow: auto; } - -/** - * 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 - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; } - -td, -th { - padding: 0; } diff --git a/test/test_variables.js b/test/test_variables.js index f54df44..00210f4 100644 --- a/test/test_variables.js +++ b/test/test_variables.js @@ -30,12 +30,8 @@ describe('Configuration variables', function() { }); describe('$support-for', function() { - it('should support Chrome 9', function() { - return sassyTest.renderFixture('variables/support-for/chrome9'); - }); - - it('should support Firefox 28', function() { - return sassyTest.renderFixture('variables/support-for/firefox28'); + it('should support Firefox 29', function() { + return sassyTest.renderFixture('variables/support-for/firefox29'); }); it('should support IE 6', function() { @@ -62,18 +58,6 @@ describe('Configuration variables', function() { return sassyTest.renderFixture('variables/support-for/ie11'); }); - it('should support Safari 5', function() { - return sassyTest.renderFixture('variables/support-for/safari5'); - }); - - it('should support Safari 6', function() { - return sassyTest.renderFixture('variables/support-for/safari6'); - }); - - it('should support Safari 7', function() { - return sassyTest.renderFixture('variables/support-for/safari7'); - }); - it('should support "last X versions" with -X value', function() { return sassyTest.renderFixture('variables/support-for/negative-value'); }); |