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

[Normalize.css](https://github.com/necolas/normalize.css) [^1] がメジャーアップデートしていましたので、変更差分を調べてみました。

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

## Normalize.css 4.0.0 での変更点

### 1. 詳細度を下げる工夫

```css
input[disabled] -> [disabled]
```

```css
input[type="submit"] -> [type="submit"]
```

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

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

```css:v3.0.3
hgroup { display: block; }
```

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

### 3. 副作用の軽減

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

```scss:v4.0.0
a:active,
a:hover {
  outline-width: 0; // <- outline: 0;
}
```

```scss:v4.0.0
mark {
  background-color: #ff0; // <- background: #ff0;
}
```

```scss:v4.0.0
img {
  border-style: none; // <- border: 0;
}
```

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

```css:v3.0.3
b,
strong {
  font-weight: bold;
}
```

```css:v4.0.0
b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}
```

ちょっと不思議な書き方をしていますが、[このあたり](https://github.com/necolas/normalize.css/pull/342)で議論されて落ち着いたようです。

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

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

th,
td {
  padding: 0;
}
```

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

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

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

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

```css: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. 新規追加分

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

```css: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` が出るまでちょっと様子見したいと思いました。

## 脚注