LoginSignup
13

More than 5 years have passed since last update.

Normalize.css v4.0.0 変更点まとめ

Posted at

Normalize.css 1 がメジャーアップデートしていましたので、変更差分を調べてみました。

Normalize.css 4.0.0 での変更点

1. 詳細度を下げる工夫

input[disabled] -> [disabled]
input[type="submit"] -> [type="submit"]

v3.0.3 までの標準的な書き方だと、詳細度が微妙に高かったんですが、晴れて修正されました。

2. 廃止された要素の削除

v3.0.3
hgroup { display: block; }

hgroup 要素は、HTML5の仕様には入りませんでしたので、今回のタイミングで削除されています。

3. 副作用の軽減

効果としては同じですが、より副作用がないように一部書き直されています。

v4.0.0
a:active,
a:hover {
  outline-width: 0; // <- outline: 0;
}
v4.0.0
mark {
  background-color: #ff0; // <- background: #ff0;
}
v4.0.0
img {
  border-style: none; // <- border: 0;
}

4. 太字を揃えるためのこだわり

v3.0.3
b,
strong {
  font-weight: bold;
}
v4.0.0
b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

ちょっと不思議な書き方をしていますが、このあたりで議論されて落ち着いたようです。

5. table関連スタイルの削除

v3.0.3
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0;
}

tableはリセットしなくてもよくなったということなんでしょうか? v4.0.1あたりで復活したりして?

6. その他、削除されたスタイル

以下のスタイルは v4.0.0 からは消えています2。もう必要ないという判断だと思いますが、ちょっと気になりますね。

v3.0.3
audio {
  /* Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
  vertical-align: baseline;
}

canvas {
  /* Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
  vertical-align: baseline;
}

video {
  /* Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
  vertical-align: baseline;
}

abbr[title] {
  /* Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
  border-bottom: 1px dotted;
}

pre {
  /* Contain overflow in all browsers. */
  overflow: auto;
}

button {
  /* Correct color not being inherited. Known issue: affects color of disabled elements. */
  color: inherit;
}

input {
  /* Correct font properties not being inherited. */
  font: inherit;

  /* Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
  line-height: normal;
}

input[type="search"] {
  /* Address `box-sizing` set to `border-box` in Safari and Chrome. */
  box-sizing: content-box;
}

legend {
  /* Correct `color` not being inherited in IE 8/9/10/11. */
  border: 0;
}

optgroup {
  /* Correct color not being inherited. Known issue: affects color of disabled elements. */
  color: inherit;

  /* Correct font properties not being inherited. */
  font: inherit;

  /* Address margins set differently in Firefox 4+, Safari, and Chrome. */
  margin: 0;
}

select {
  /* Correct font properties not being inherited. */
  font: inherit;
}

textarea {
  /* Correct color not being inherited. Known issue: affects color of disabled elements. */
  color: inherit;
}

7. 新規追加分

こちらは新たに必要と判断されたスタイルたちです。

v4.0.0
abbr[title] {
  /* Remove the bottom border in Firefox 39-. */
  border-bottom: none;

  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
  text-decoration: underline;
  text-decoration: underline dotted;
}

hr {
  /* Show the overflow in Edge and IE. */
  overflow: visible;
}

button:-moz-focusring {
  /* Restore the focus styles unset by the previous rule. */
  outline: 1px dotted ButtonText;
}

input {
  /* Show the overflow in Edge and IE.*/
  overflow: visible;
}

input:-moz-focusring {
  /* Restore the focus styles unset by the previous rule. */
  outline: 1px dotted ButtonText;
}

legend {
  /* Correct the text wrapping in Edge and IE. */
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  white-space: normal;

  /* Correct the color inheritance from `fieldset` elements in IE. */
  color: inherit;
}

select {
  /* Show the overflow in Edge, Firefox, and IE. */
  overflow: visible;
}

差分を見た感想

テストも十分にされているライブラリなので問題ないとは思いますが、個人的には v4.0.1 が出るまでちょっと様子見したいと思いました。

脚注


  1. リセット CSS の一種だが、ブラウザ間のスタイルの平坦化を目的としているところが、その他のライブラリと異なる。 

  2. 差分を見るにあたり、コメント等を移動させましたので、オリジナルとはコメントの位置が異なります。 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13