on syncing with normalize.css 8.0.0

[client9]

Congrats on release of 4.1.0!

Not sure if you want to sync to normalize.css or not, and/or bootstrap/reboot may have a different support matrix.

I'm able to make a PR for some time (and I'm maybe not the best person since I'm not well versed in the nodejs toolchain), but here's my notes.

The change log for version 8 of normalize.css is

8.0.0 (February 2, 2018)

Remove support for older browsers Android 4, lte IE 9, lte Safari 7.
Don't remove search input cancel button in Chrome/Safari.
Form inputs inherit font-family.
Fix text decoration in Safari 8+.

It's doesn't map 1 to 1 with reboot anymore but looking that the diff between v7 and v8, here's the relevant changes. It's mostly just deleting some selectors.

git diff 7.0.0 8.0.0 -- normalize.css

 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }

-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-

-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-

 /**
- * 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.
+ * Correct the inability to style clickable types in iOS and Safari.
  */
 
 button,
-html [type="button"], /* 1 */
+[type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
 }

 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }

comments welcome!

n

[wolfy1339]

Bootstrap's support policy right now is IE 10+/ Edge, Firefox the ESR 2 versions back (>= 38), Chrome >= 45, Android >=4.4, Safari >= 9, iOS >= 9, Opera >= 30

So the changes are good with that.

[XhmikosR]

PRs welcome.

[Herst]

Correct me if I'm wrong but the SVG overflow workaround is still required for IE11.

[client9]

Hello @Herst unclear. The best way to test is for someone to fire up IE 11 and check :-)

svg isn't mentioned at all in normalize 8.0.0 And I didn't see any tickets complaining about it. It was remove in a large commit without much commentary:

necolas/normalize.css@004d58b#diff-bb3dde41d97f19be8ab7b4780a915d5e

Perhaps related, I found this ticket from normalize: svg:not(:root) specificity is very high

which recommend using instead

svg {
  overflow: hidden;
}

svg:root {
  overflow: visible;
}

Seems smart, but unclear what version of normalize is being used and if it matters for IE 11.

Thoughts or explicit tests on IE 11 welcome!

regards,

n

[SuperPat45]

According this page: necolas/normalize.css@004d58b
the SVG workaround may be only need for IE9:

-#### svg:not(:root)

-Adding overflow: hidden fixes IE9's SVG rendering. Earlier versions of IE
-don't support SVG, so we can safely use the :not() and :root selectors that
-modern browsers use in the default UA stylesheets to apply this style.
-Source.

[Herst]

@SuperPat45: It says nothing about newer IE versions, you can't draw that conclusion.

[max-arnold]

Also, it may be worth to remove these two lines from html element #24964 since they are redefined for body

[ysds]

x-ref: #26878