From: Mark Otto Date: Sat, 21 Jan 2017 22:14:25 +0000 (-0800) Subject: Drop Normalize, port relevant parts to Reboot (#21741) X-Git-Tag: v4.0.0-beta~147^2~188 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4fa7749442ea7ab609d1c8c25dc4ba750194e542;p=thirdparty%2Fbootstrap.git Drop Normalize, port relevant parts to Reboot (#21741) * Get this party started by removing mention of Normalize.css * Nuke the old comment, consolidate to a single line and number as appropriate * Bring over styles for HTML element from Normalize to Reboot * Move margin override for body element from Normalize to Reboot * Drop the block reset for HTML5 elements in IE9- from Normalize given we dropped IE9 support * Building on previous commit, do the same thing for figure, figcaption, and main * Remove IE9- display from Normalize given our browser support * Drop IE8 figure margin because we're IE10+ * No need for the h1 overrides because we reset these font and margin styles anyway in _type.scss already * Drop Safari 6 b and strong normalization because we're Safari 8+ * Remove mark styles for IE9- from Normalize * Remove old iOS audio fixes from Normalize * Remove IE9- display for progress from Normalize * Remove more IE9- rules from Normalize * One more IE9- display removal for canvas element * Move pre overrides from Normalize to Reboot * Move over some link resets to Reboot, drop others - Move over background-color and text-decoration - Drop focus outline change given it affects the offset on hover of focused links * Move over more code element resets, consolidate with pre overrides, too * Move over sub and sup wholesale * Move over img normalization to Reboot * Move over SVG override too * - Drop dupe hidden, but add comment for it - Move over template - Move over summary * Remove bulk of @viewport comment * edit down that code comment * consolidate html-based normalizations * update comments * Consolidate abbr styles * move over more type elements * move over hr changes * move over form controls and more * move over button resets * move over firefox button changes * move over search changes and more * we nuke all these styles for fieldsets anyway, so outright remove them * no need for those, we override them * move over legend, fieldset, progress * line break * delete normalize file * linting * update comment * clarify docs mentions of normalize and reboot * remove normalize excludes from linter * remove normalize excludes from cli task * linting * callout license since we forked part of normalize * Improve comments, move table background reset to .table class instead of in reboot * trailing space --- diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 08ad15a6ac..ff4f0dc72b 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -1,7 +1,7 @@ --- layout: docs title: Reboot -description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css. +description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that heavily builds on Normalize.css. group: content redirect_from: "/content/" --- diff --git a/docs/content/typography.md b/docs/content/typography.md index 7e3fbe7268..4fe5bbe021 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -155,7 +155,7 @@ Change text alignment, transform, style, weight, and color with our [text utilit ## Abbreviations -Stylized implementation of HTML's `` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline from Normalize.css and gain a help cursor to provide additional context on hover and to users of assistive technologies. +Stylized implementation of HTML's `` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. Add `.initialism` to an abbreviation for a slightly smaller font-size. diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md index 9d6fa2ce4d..d70a42627c 100644 --- a/docs/getting-started/introduction.md +++ b/docs/getting-started/introduction.md @@ -106,9 +106,9 @@ With the above snippet, nested elements—including generated content via `:befo Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/). -### Normalize.css +### Reboot -For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/). +For improved cross-browser rendering, we use [Reboot]({{ site.baseurl }}/content/reboot/) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements. ## Community diff --git a/package.json b/package.json index 69c7f62235..ae913bbc1d 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "postcss-docs": "postcss --config grunt/postcss.js --no-map --replace docs/assets/css/docs.min.css && postcss --config grunt/postcss.js --no-map --replace docs/examples/**/*.css", "sass": "node-sass --output-style expanded --source-map true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css", "sass-docs": "node-sass --output-style expanded --source-map true --precision 6 docs/assets/scss/docs.scss docs/assets/css/docs.min.css", - "scss-lint": "bundle exec scss-lint --config scss/.scss-lint.yml --exclude scss/_normalize.scss scss/*.scss", + "scss-lint": "bundle exec scss-lint --config scss/.scss-lint.yml scss/*.scss", "scss-lint-docs": "bundle exec scss-lint --config scss/.scss-lint.yml --exclude docs/assets/scss/docs.scss docs/assets/scss/*.scss", "uglify": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output dist/js/bootstrap.min.js dist/js/bootstrap.js", "uglify-docs": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output docs/assets/js/docs.min.js docs/assets/js/vendor/anchor.min.js docs/assets/js/vendor/clipboard.min.js docs/assets/js/vendor/holder.min.js docs/assets/js/src/application.js", diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index 9d6e7ec4e8..845001ef42 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -3,9 +3,6 @@ scss_files: - "**/*.scss" - "docs/assets/scss/**/*.scss" -exclude: - - "scss/_normalize.scss" - plugin_directories: ['.scss-linters'] # List of gem names to load custom linters from (make sure they are already @@ -28,8 +25,6 @@ linters: BorderZero: enabled: true convention: zero # or `none` - exclude: - - _normalize.scss ChainedClasses: enabled: false @@ -43,7 +38,6 @@ linters: Comment: enabled: true exclude: - - _normalize.scss - bootstrap.scss style: silent @@ -108,8 +102,6 @@ linters: LeadingZero: enabled: true style: exclude_zero # or 'include_zero' - exclude: - - _normalize.scss MergeableSelector: enabled: false @@ -138,8 +130,6 @@ linters: ignore_unspecified: false min_properties: 2 separate_groups: false - exclude: - - _normalize.scss order: - position - top @@ -538,8 +528,6 @@ linters: identifier_list: base additional_identifiers: [] excluded_identifiers: [] - exclude: - - _normalize.scss ZeroUnit: enabled: true diff --git a/scss/_normalize.scss b/scss/_normalize.scss deleted file mode 100644 index 6bafd53f63..0000000000 --- a/scss/_normalize.scss +++ /dev/null @@ -1,461 +0,0 @@ -/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ - -// -// 1. Change the default font family in all browsers (opinionated). -// 2. Correct the line height in all browsers. -// 3. Prevent adjustments of font size after orientation changes in -// IE on Windows Phone and in iOS. -// - -// Document -// ========================================================================== - -html { - font-family: sans-serif; // 1 - line-height: 1.15; // 2 - -ms-text-size-adjust: 100%; // 3 - -webkit-text-size-adjust: 100%; // 3 -} - -// Sections -// ========================================================================== - -// -// Remove the margin in all browsers (opinionated). -// - -body { - margin: 0; -} - -// -// Add the correct display in IE 9-. -// - -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -// -// Correct the font size and margin on `h1` elements within `section` and -// `article` contexts in Chrome, Firefox, and Safari. -// - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -// Grouping content -// ========================================================================== - -// -// Add the correct display in IE 9-. -// 1. Add the correct display in IE. -// - -figcaption, -figure, -main { // 1 - display: block; -} - -// -// Add the correct margin in IE 8. -// - -figure { - margin: 1em 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 -} - -// -// 1. Correct the inheritance and scaling of font size in all browsers. -// 2. Correct the odd `em` font sizing in all browsers. -// - -pre { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 -} - -// Text-level semantics -// ========================================================================== - -// -// 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; -} - -// -// 1. Remove the bottom border in Firefox 39-. -// 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; // 1 - font-size: 1em; // 2 -} - -// -// Add the correct font style in Android 4.3-. -// - -dfn { - font-style: italic; -} - -// -// Add the correct background and color in IE 9-. -// - -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 -// ========================================================================== - -// -// Add the correct display in IE 9-. -// - -audio, -video { - display: inline-block; -} - -// -// Add the correct display in iOS 4-7. -// - -audio:not([controls]) { - display: none; - height: 0; -} - -// -// Remove the border on images inside links in IE 10-. -// - -img { - border-style: none; -} - -// -// Hide the overflow in IE. -// - -svg:not(:root) { - overflow: hidden; -} - -// Forms -// ========================================================================== - -// -// 1. Change the font styles in all browsers (opinionated). -// 2. Remove the margin in Firefox and Safari. -// - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; // 1 - font-size: 100%; // 1 - line-height: 1.15; // 1 - margin: 0; // 2 -} - -// -// Show the overflow in IE. -// 1. Show the overflow in Edge. -// - -button, -input { // 1 - 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"], // 1 -[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; -} - -// -// 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. -// - -legend { - box-sizing: border-box; // 1 - color: inherit; // 2 - display: table; // 1 - max-width: 100%; // 1 - padding: 0; // 3 - white-space: normal; // 1 -} - -// -// 1. Add the correct display in IE 9-. -// 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. -// - -progress { - display: inline-block; // 1 - vertical-align: baseline; // 2 -} - -// -// Remove the default vertical scrollbar in IE. -// - -textarea { - overflow: auto; -} - -// -// 1. Add the correct box sizing in IE 10-. -// 2. Remove the padding in IE 10-. -// - -[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 macOS. -// - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -// -// 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 -} - -// Interactive -// ========================================================================== - -// -// Add the correct display in IE 9-. -// 1. Add the correct display in Edge, IE, and Firefox. -// - -details, // 1 -menu { - display: block; -} - -// -// Add the correct display in all browsers. -// - -summary { - display: list-item; -} - -// Scripting -// ========================================================================== - -// -// Add the correct display in IE 9-. -// - -canvas { - display: inline-block; -} - -// -// Add the correct display in IE. -// - -template { - display: none; -} - -// Hidden -// ========================================================================== - -// -// Add the correct display in IE 10-. -// - -[hidden] { - display: none; -} diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 266ed78194..30a5728f27 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -1,86 +1,58 @@ -// scss-lint:disable QualifyingElement, DuplicateProperty +// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix // Reboot // -// Global resets to common HTML elements and more for easier usage by Bootstrap. -// Adds additional rules on top of Normalize.css, including several overrides. +// Normalization of HTML elements, manually forked from Normalize.css to remove +// styles targeting irrelevant browsers while applying new styles. +// +// Normalize is licensed MIT. https://github.com/necolas/normalize.css -// Reset the box-sizing -// -// Change from `box-sizing: content-box` to `border-box` so that when you add -// `padding` or `border`s to an element, the overall declared `width` does not -// change. For example, `width: 100px;` will always be `100px` despite the -// `border: 10px solid red;` and `padding: 20px;`. -// -// Heads up! This reset may cause conflicts with some third-party widgets. For -// recommendations on resolving such conflicts, see -// https://getbootstrap.com/getting-started/#third-box-sizing. +// Document // -// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ +// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. +// 2. Change the default font family in all browsers. +// 3. Correct the line height in all browsers. +// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. +// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so +// we force a non-overlapping, non-auto-hiding scrollbar to counteract. +// 6. Change the default tap highlight to be completely transparent in iOS. html { - box-sizing: border-box; + box-sizing: border-box; // 1 + font-family: sans-serif; // 2 + line-height: 1.15; // 3 + -ms-text-size-adjust: 100%; // 4 + -webkit-text-size-adjust: 100%; // 4 + -ms-overflow-style: scrollbar; // 5 + -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 } *, *::before, *::after { - box-sizing: inherit; + box-sizing: inherit; // 1 } - -// Make viewport responsive -// -// @viewport is needed because IE 10+ doesn't honor in -// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. -// Eventually @viewport will replace . -// -// However, `device-width` is broken on IE 10 on Windows (Phone) 8, -// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) -// and the fix for that involves a snippet of JavaScript to sniff the user agent -// and apply some conditional CSS. -// -// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. -// -// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., -// `.class-name { @import "bootstrap"; }`). +// IE10+ doesn't honor `` in some cases. @at-root { @-ms-viewport { width: device-width; } } +// Body // -// Reset HTML, body, and more -// - -html { - // We assume no initial pixel `font-size` for accessibility reasons. This - // allows web visitors to customize their browser default font-size, making - // your project more inclusive and accessible to everyone. - - // As a side-effect of setting the @viewport above, - // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. - // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, - // thus making it hard to click on stuff near the right edge of the page. - // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar. - // See https://github.com/twbs/bootstrap/issues/18543 - // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/ - -ms-overflow-style: scrollbar; - - // Changes the default tap highlight to be completely transparent in iOS. - -webkit-tap-highlight-color: rgba(0,0,0,0); -} +// 1. Remove the margin in all browsers. +// 2. As a best practice, apply a default `background-color`. body { + margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height-base; - // Go easy on the eyes and use something other than `#000` for text color: $body-color; - // By default, `` has no `background-color` so we set one as a best practice. - background-color: $body-bg; + background-color: $body-bg; // 2 } // Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -93,6 +65,18 @@ body { } +// Content grouping +// +// 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 +} + + // // Typography // @@ -116,10 +100,18 @@ p { } // Abbreviations +// +// 1. Remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +// 3. Add explicit cursor to indicate changed behavior. +// 4. Duplicate behavior to the data-* attribute for our tooltip plugin + abbr[title], -// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 -abbr[data-original-title] { - cursor: help; +abbr[data-original-title] { // 4 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 + cursor: help; // 3 + border-bottom: 0; // 1 } address { @@ -155,6 +147,35 @@ blockquote { margin: 0 0 1rem; } +dfn { + font-style: italic; // Add the correct font style in Android 4.3- +} + +b, +strong { + font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari +} + +small { + font-size: 80%; // Add the correct font size in all browsers +} + +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. +// + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { bottom: -.25em; } +sup { top: -.5em; } + // // Links @@ -163,6 +184,8 @@ blockquote { a { color: $link-color; text-decoration: $link-decoration; + background-color: transparent; // Remove the gray background on active links in IE 10. + -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. @include hover { color: $link-hover-color; @@ -195,12 +218,20 @@ a:not([href]):not([tabindex]) { // Code // +pre, +code, +kbd, +samp { + font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers. + font-size: 1em; // Correct the odd `em` font sizing in all browsers. +} + pre { // Remove browser default top margin margin-top: 0; // Reset browser default of `1em` to use `rem`s margin-bottom: 1rem; - // Normalize v4 removed this property, causing `
` content to break out of wrapping code snippets
+  // Don't allow content to break outside
   overflow: auto;
 }
 
@@ -210,22 +241,22 @@ pre {
 //
 
 figure {
-  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
-  // We reset that to create a better flow in-page.
+  // Apply a consistent margin strategy (matches our type styles).
   margin: 0 0 1rem;
 }
 
 
 //
-// Images
+// Images and content
 //
 
 img {
-  // By default, ``s are `inline-block`. This assumes that, and vertically
-  // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
-  // Note: ``s are deliberately not made responsive by default.
-  // For the rationale behind this, see the comments on the `.img-fluid` class.
+  border-style: none; // Remove the border on images inside links in IE 10-.
+}
+
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
 }
 
 
@@ -268,10 +299,7 @@ textarea {
 //
 
 table {
-  // No longer part of Normalize since v4
-  border-collapse: collapse;
-  // Reset for nesting within parents with `background-color`.
-  background-color: $table-bg;
+  border-collapse: collapse; // Prevent double borders
 }
 
 caption {
@@ -283,7 +311,7 @@ caption {
 }
 
 th {
-  // Centered by default, but left-align-ed to match the `td`s below.
+  // Matches default `` alignment
   text-align: left;
 }
 
@@ -310,14 +338,48 @@ button:focus {
 input,
 button,
 select,
+optgroup,
 textarea {
-  // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
-  // properly inherited. However, `line-height` isn't inherited there.
+  margin: 0; // Remove the margin in Firefox and Safari
+  font-family: inherit;
+  font-size: inherit;
   line-height: inherit;
 }
 
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // Remove the inheritance of text transform in Firefox
+}
+
+// 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"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
 input[type="radio"],
 input[type="checkbox"] {
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. Remove the padding in IE 10-
+
   // Apply a disabled cursor for radios and checkboxes.
   //
   // Note: Neither radios nor checkboxes can be readonly.
@@ -340,6 +402,7 @@ input[type="month"] {
 }
 
 textarea {
+  overflow: auto; // Remove the default vertical scrollbar in IE.
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
   resize: vertical;
 }
@@ -357,33 +420,76 @@ fieldset {
   border: 0;
 }
 
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
 legend {
-  // Reset the entire legend element to match the `fieldset`
   display: block;
   width: 100%;
+  max-width: 100%; // 1
   padding: 0;
   margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// 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;
 }
 
-input[type="search"] {
+[type="search"] {
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see
   // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
   -webkit-appearance: none;
 }
 
-// todo: needed?
+//
+// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
 output {
   display: inline-block;
-//  font-size: $font-size-base;
-//  line-height: $line-height;
-//  color: $input-color;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+}
+
+template {
+  display: none; // Add the correct display in IE
 }
 
 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
 [hidden] {
   display: none !important;
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 47be2c5084..47c3ac2979 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -6,6 +6,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: $spacer;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
 
   th,
   td {
diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index 978b086a1a..fd5ba0ca05 100644
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -6,5 +6,4 @@
 @import "mixins";
 @import "custom";
 
-@import "normalize";
 @import "reboot";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index e47021ce9d..f7577f5c79 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -10,8 +10,6 @@
 @import "variables";
 @import "mixins";
 
-// Reset and dependencies
-@import "normalize";
 @import "print";
 
 // Core CSS