MDNのCSSリファレンスをAからZまで読んで得た知見まとめ

**CSSのこと、もっと知りたい！**

MDNのCSSリファレンスをAからZまで読んでいって「へー！めちゃおもしろい」って思った私的知見を共有します。
おいしいところだけ召し上がってください:relaxed:

`既に知っていたもの`、`私にとってあまり面白くないもの`、`あとで読もうと思って忘却してしまったもの`は書いてません。
_（それと...翻訳されてないページは一旦飛ばしました。私の英語力が🐜レベルのため）_

それでは、以下が私の知見です:airplane:

## CSSの単位に大文字と小文字の区別はない
`16PX`も`1.5eM`も動きます。

```css:ちゃんと動く
.😊 {
  font-size: +.50reM
}
```
周波数の単位[`<frequency>`](https://developer.mozilla.org/ja/docs/Web/CSS/frequency)である`khz`は[国際単位系](https://ja.wikipedia.org/wiki/%E5%9B%BD%E9%9A%9B%E5%8D%98%E4%BD%8D%E7%B3%BB)に合わせて`kHz`と書くといいみたいです。

## リンクの疑似クラスはLVHAの順で書く
`:link` - `:visited` - `:hover` - `:active`
リンク関連の擬似クラスは上書きされてしまう可能性があるため。
[MDN :active](https://developer.mozilla.org/ja/docs/Web/CSS/:active)

## `@charset`より前に一文字も書いてはいけない
書くと`@charset`は無効になります。
`@charset`を複数書いた場合は最初の１つのみが有効。
[MDN @charset](https://developer.mozilla.org/ja/docs/Web/CSS/@charset)

## `rgb()`には`%`が使える
`hsl()`にも使えます。

```css:%が使える
color: rgb(100%, 50%, 50%);
```

```css:単位揃えないと使えない
color: rgb(100%, 128, 128); /* 使えない */
```

```css:アルファ値には使えない（Vivaldiで確認）
color: rgba(100%, 50%, 50%, 50%); /* 使えない */
```

## `rgb()`の引数はスペース区切りでも良い

```css
color: rgb(255 0 0);
```

## `scroll-behavior`でスムーススクロール
スムーススクロールを実現する`scroll-behavior`
いつの間にやらChromeでも対応していたので書いておきますφ(.. )

```css:smooooth・∀・
scroll-behavior: smooth;
```
[MDN scroll-behavior](https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior)
[Can I use scroll-behavior](https://caniuse.com/#search=scroll-behavior)

## `font-weight`は100の倍数に丸められる
MDNの説明があまりにも分かりやすいため抜粋します:eyes:
> `font-weight` 値は離散値 (100 の倍数) によって補間されます。補間は実数の空間で行われ、もっとも近い 100 の倍数に丸めることによって整数に変換されます。100 の倍数の中間値は、正の無限大に向けて丸めます。

[MDN font-weight](https://developer.mozilla.org/ja/docs/Web/CSS/font-weight#Syntax)

## `font-weight`のフォールバック
`font-weight`の指定が`400`で対応の太さが見つからなかった場合、`500`を探索します（逆も然り）。それでも見つからなかった場合は指定が`400`なら最も近い細字を、`500`なら最も近い太字を参照します。

**しかし、MDNには『このセクションは、技術的レビュー待ちの状態です』とあるため、要検証。**

## `list-style`ショートハンドは順不同で指定可能
- [list-style-type](https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type)
- [list-style-image](https://developer.mozilla.org/ja/docs/Web/CSS/list-style-image)
- [list-style-position](https://developer.mozilla.org/ja/docs/Web/CSS/list-style-position)

の中から1~3個、順不同で設定できます。

[MDN list-style](https://developer.mozilla.org/ja/docs/Web/CSS/list-style)

## `pointer-events`の`none`は要素へのイベントを通過する
`pointer-events: none;`によってマウスイベントを捕捉しなくなった要素の下に別要素がある場合、そちらがマウスイベントの対象になります。

```html:html
<a class="上" href="#上">輝夜月だよ！</a>
<a class="下" href="#下">夜神月だよ！</a>
```

```css:css
a {
  position: absolute;
}
.上 {
  z-index: 1;
  pointer-events: none;
}
```

↓ブラウザでの実行結果
<img width="239" alt="#下が選択されてる" src="https://qiita-image-store.s3.amazonaws.com/0/57005/0a84883e-2eac-f5ef-2df3-aab84e82b5f0.png">

[MDN pointer-events](https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events)

_ずっと気になってました。検証の良い機会となりました:relaxed:_

## `quotes`の2ペア目以降はネスト用
引数の構文は `開始引用符 終了引用符 (開始引用符 終了引用符 ...)`

```css:css
q {
  quotes: "😊" "😥" "🍠" "🍠" "🍷" "🍷";
}
```

```html:html
<q>
  親です
  <q>
    子です
    <q>孫です</q>
    子でした
  </q>
  親でした
</q>
```
↓ブラウザでの実行結果
<img width="422" alt="quotes.png" src="https://qiita-image-store.s3.amazonaws.com/0/57005/bc76bc20-05ea-efff-5d42-fae8a8d433b0.png">
[MDN quotes](https://developer.mozilla.org/ja/docs/Web/CSS/quotes)

## `letter-spacing`の初期値`normal`は`0`とは違う
キーワードの`normal`はユーザエージェントによって字間調整されることを許可します。
`<length>`の場合は**加える**字間の長さを指定します。
[MDN letter-spacing](https://developer.mozilla.org/ja/docs/Web/CSS/letter-spacing)

## `border-style`の`none`と`hidden`の優先度
`none`ではボーダーの衝突が発生する場合はそのまま表示されます。
`hidden`はボーダー絶対消すマンです。
[MDN border-style](https://developer.mozilla.org/ja/docs/Web/CSS/border-style)

## `will-change`の`contents`, `scroll-position`
`will-change`の値です。
値に使えるの、ずっと`<custom-ident>`だけだと思ってました:innocent:
`contents`は要素のコンテンツの変化予定を、
`scroll-position`はスクロール位置の変化予定を、それぞれブラウザに通知して事前最適化を行います。
[MDN will-change](https://developer.mozilla.org/ja/docs/Web/CSS/will-change)

## `isolation`で新規スタック文脈作成

```css:(；`・ω・）スタック作るよ！！
isolation: isolate;
```
スタック文脈に関しては[MDNのスタック文脈の解説](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)を参照してください。

[MDN isolation](https://developer.mozilla.org/ja/docs/Web/CSS/isolation)

## `perspective`は新規スタック文脈を作る
値に`0`, `none`以外を設定している場合、スタック文脈が作られます。

[MDN perspective](https://developer.mozilla.org/ja/docs/Web/CSS/perspective)

## `float`は暗黙的に`display`の計算値を変更する場合がある
| 指定値              | 計算値 |
|:-------------------|:------|
| inline             | block |
| inline-block       | block |
| inline-table       | table |
| table-row          | block |
| table-row-group    | block |
| table-column       | block |
| table-column-group | block |
| table-cell         | block |
| table-caption      | block |
| table-header-group | block |
| table-footer-group | block |

[MDN float](https://developer.mozilla.org/ja/docs/Web/CSS/float)

## `font-feature-settings`の値の`1`/`0`のエイリアス`on`/`off`
引数`<feature-tag-value>`の`1`の別名は`on`、`0`の別名は`off`です。
以下は全て同じ結果です。

```css:デフォルトは1
font-feature-settings: "palt";
```
```css:1を明示(on/off切り替えるときとか)
font-feature-settings: "palt" 1;
```
```css:1の別名のon
font-feature-settings: "palt" on;
```

[MDN font-feature-settings](https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings)

## `unicode-bidi`と`direction`は`all`でリセットされない
`all`はすべてのプロパティをリセットしますが、[`unicode-bidi`](https://developer.mozilla.org/ja/docs/Web/CSS/unicode-bidi)と[`direction`](https://developer.mozilla.org/ja/docs/Web/CSS/direction)はリセットされません。

[MDN all](https://developer.mozilla.org/ja/docs/Web/CSS/all)

## `:dir()`擬似クラスは`direction`を無視してhtmlの`dir`属性を参照する
そもそも対応ブラウザ少なくて使う機会ない気がしますが、一応書いておきます。

```html
<span dir="rtl">hoge?</span>
<span>piyo!</span>
```

```css
span {
  direction: rtl;
}
:dir(rtl) {
  color: red;
}
```

↓ブラウザでの実行結果（Firefox Quantumで確認）
<img width="110" alt="hoge?だけ赤色で、piyo!は黒文字のまま" src="https://qiita-image-store.s3.amazonaws.com/0/57005/e312d445-5add-d83e-2871-483d7f4ced9e.png">

[MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir)

## `<image>`型の種類
**固有サイズ持ち**
`jpg`, `png`などの一般的な画像です。 

**固有サイズ複数持ち**
`ico`がこれにあたります。

**サイズ無しアス比持ち**
`svg`などのベクター画像です。

**サイズもアス比も無し**
CSSグラデーションがこれにあたります。

[MDN \<image\>](https://developer.mozilla.org/ja/docs/Web/CSS/image)

## ハイフネーション規則は明確に定義されていない
ほげ...
[<img width="684" alt="注記: どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザにより異なります。" src="https://qiita-image-store.s3.amazonaws.com/0/57005/7588fbf8-35a2-fc6e-751f-95d009ed2f3e.png">
MDN :hyphens](https://developer.mozilla.org/ja/docs/Web/CSS/hyphens)

## ハードハイフンとソフトハイフン
改行候補位置を示すUnicodeを書くことでハードハイフンとソフトハイフンが実現できます。

**U+2010 (HYPHEN)**
ハードハイフンです。改行されなくてもハイフンが表示されます。

**U+00AD (SHY)**
ソフトハイフンです。表示はされませんが、単語分割の候補となります。
HTML特殊文字では`&shy;`です。

`hyphens`の`manual`キーワードは、これらを使ってハイフネーションを行うようです。

## `transparent`は`rgba(0,0,0,0)`にマッチする
見出しそのままです。あたりまえ体操な気もしますけど:rolling_eyes:

## root(html要素)で`inherit`を使った場合、初期値が適応される
使わないから気にもしてなかった...。あたりまえ体操な気もしますけど2:rolling_eyes:

## `cursor`に使える`url()`は二つ目以降がフォールバックになる
```css:a.nagoが有効でない場合はb.curが使われます。
cursor: url(a.nago), url(b.cur), url(c.cur), auto;
```
`url()`を使う場合、最後に必ずキーワードを設定します。
[Using URL values for the cursor property](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property)

[MDN cursor](https://developer.mozilla.org/ja/docs/Web/CSS/cursor)

## `animation-iteration-count`は小数も使える
`0.5`なら、半分だけアニメーションが実行されます。

[MDN animation-iteration-count](https://developer.mozilla.org/ja/docs/Web/CSS/animation-iteration-count)

## `empty-cells`の値は`hidden`じゃなくて`hide`
`overflow`とか`visibility`は`hidden`なのに、なんでだろう？:thinking:

[MDN empty-cells](https://developer.mozilla.org/ja/docs/Web/CSS/empty-cells)

## `in`,`mm`,`cm`,`pt`等は物理的な長さになるとは限らない
ディスプレイは`96dpi`と仮定して扱われるため、
`1in`は`96px`、`3pt`は`4px`になります。

[MDN CSSの単位とdots-per-inch](https://developer.mozilla.org/ja/docs/Web/CSS/length#CSS_units_and_dots-per-inch)

**未検証！いつか検証したら追記します:rolling_eyes:**

## `flex-basis`のサイズ計算は`box-sizing`の値が参照される
`box-sizing`の初期値は`content-box`なので、
なにも指定していなければ`flex-basis`は`content-box`でサイズを算出します。

[MDN flex-basis](https://developer.mozilla.org/ja/docs/Web/CSS/flex-basis)


# おわりの言葉

少しでも「へー！おもしろい」って思っていただけたらうれしいです:blush:

「なにいってるねん！ちゃうわ！」とか「戦争です:raised_hand:」って箇所ありましたら、やさしく教えてください。

太古の昔に書いた記事『[珍しい（？）CSSプロパティたち](https://qiita.com/rigani/items/7e46ed3040b1b7d50c98)』を近日中に改訂しようと思いますので、こちらもよろしければ！

_MDNの翻訳者様、本当にありがとうございました。すごく助かってます。_

**[雑感]**
量子コンピュータってムネキュン？