CSS
CSS3
MDN
フロントエンド

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

CSSのこと、もっと知りたい!

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

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

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

CSSの単位に大文字と小文字の区別はない

16PX1.5eMも動きます。

ちゃんと動く
.😊 {
  font-size: +.50reM
}

周波数の単位<frequency>であるkhz国際単位系に合わせてkHzと書くといいみたいです。

リンクの疑似クラスはLVHAの順で書く

:link - :visited - :hover - :active
リンク関連の擬似クラスは上書きされてしまう可能性があるため。
MDN :active

@charsetより前に一文字も書いてはいけない

書くと@charsetは無効になります。
@charsetを複数書いた場合は最初の1つのみが有効。
MDN @charset

rgb()には%が使える

hsl()にも使えます。

%が使える
color: rgb(100%, 50%, 50%);
単位揃えないと使えない
color: rgb(100%, 128, 128); /* 使えない */
アルファ値には使えない(Vivaldiで確認)
color: rgba(100%, 50%, 50%, 50%); /* 使えない */

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

color: rgb(255 0 0);

scroll-behaviorでスムーススクロール

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

smooooth・∀・
scroll-behavior: smooth;

MDN scroll-behavior
Can I use scroll-behavior

font-weightは100の倍数に丸められる

MDNの説明があまりにも分かりやすいため抜粋します:eyes:

font-weight 値は離散値 (100 の倍数) によって補間されます。補間は実数の空間で行われ、もっとも近い 100 の倍数に丸めることによって整数に変換されます。100 の倍数の中間値は、正の無限大に向けて丸めます。

MDN font-weight

font-weightのフォールバック

font-weightの指定が400で対応の太さが見つからなかった場合、500を探索します(逆も然り)。それでも見つからなかった場合は指定が400なら最も近い細字を、500なら最も近い太字を参照します。

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

list-styleショートハンドは順不同で指定可能

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

MDN list-style

pointer-eventsnoneは要素へのイベントを通過する

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

html
<a class="上" href="#上">輝夜月だよ!</a>
<a class="下" href="#下">夜神月だよ!</a>
css
a {
  position: absolute;
}
. {
  z-index: 1;
  pointer-events: none;
}

↓ブラウザでの実行結果
#下が選択されてる

MDN pointer-events

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

quotesの2ペア目以降はネスト用

引数の構文は 開始引用符 終了引用符 (開始引用符 終了引用符 ...)

css
q {
  quotes: "😊" "😥" "🍠" "🍠" "🍷" "🍷";
}
html
<q>
  親です
  <q>
    子です
    <q>孫です</q>
    子でした
  </q>
  親でした
</q>

↓ブラウザでの実行結果
quotes.png
MDN quotes

letter-spacingの初期値normal0とは違う

キーワードのnormalはユーザエージェントによって字間調整されることを許可します。
<length>の場合は加える字間の長さを指定します。
MDN letter-spacing

border-stylenonehiddenの優先度

noneではボーダーの衝突が発生する場合はそのまま表示されます。
hiddenはボーダー絶対消すマンです。
MDN border-style

will-changecontents, scroll-position

will-changeの値です。
値に使えるの、ずっと<custom-ident>だけだと思ってました:innocent:
contentsは要素のコンテンツの変化予定を、
scroll-positionはスクロール位置の変化予定を、それぞれブラウザに通知して事前最適化を行います。
MDN will-change

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

(;`・ω・)スタック作るよ!!
isolation: isolate;

スタック文脈に関してはMDNのスタック文脈の解説を参照してください。

MDN isolation

perspectiveは新規スタック文脈を作る

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

MDN 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

font-feature-settingsの値の1/0のエイリアスon/off

引数<feature-tag-value>1の別名はon0の別名はoffです。
以下は全て同じ結果です。

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

MDN font-feature-settings

unicode-bididirectionallでリセットされない

allはすべてのプロパティをリセットしますが、unicode-bididirectionはリセットされません。

MDN all

:dir()擬似クラスはdirectionを無視してhtmlのdir属性を参照する

そもそも対応ブラウザ少なくて使う機会ない気がしますが、一応書いておきます。

<span dir="rtl">hoge?</span>
<span>piyo!</span>
span {
  direction: rtl;
}
:dir(rtl) {
  color: red;
}

↓ブラウザでの実行結果(Firefox Quantumで確認)
hoge?だけ赤色で、piyo!は黒文字のまま

MDN :dir()

<image>型の種類

固有サイズ持ち
jpg, pngなどの一般的な画像です。

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

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

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

MDN <image>

ハイフネーション規則は明確に定義されていない

ほげ...
注記: どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザにより異なります。
MDN :hyphens

ハードハイフンとソフトハイフン

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

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

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

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

transparentrgba(0,0,0,0)にマッチする

見出しそのままです。あたりまえ体操な気もしますけど:rolling_eyes:

root(html要素)でinheritを使った場合、初期値が適応される

使わないから気にもしてなかった...。あたりまえ体操な気もしますけど2:rolling_eyes:

cursorに使えるurl()は二つ目以降がフォールバックになる

a.nagoが有効でない場合はb.curが使われます。
cursor: url(a.nago), url(b.cur), url(c.cur), auto;

url()を使う場合、最後に必ずキーワードを設定します。
Using URL values for the cursor property

MDN cursor

animation-iteration-countは小数も使える

0.5なら、半分だけアニメーションが実行されます。

MDN animation-iteration-count

empty-cellsの値はhiddenじゃなくてhide

overflowとかvisibilityhiddenなのに、なんでだろう?:thinking:

MDN empty-cells

in,mm,cm,pt等は物理的な長さになるとは限らない

ディスプレイは96dpiと仮定して扱われるため、
1in96px3pt4pxになります。

MDN CSSの単位とdots-per-inch

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

flex-basisのサイズ計算はbox-sizingの値が参照される

box-sizingの初期値はcontent-boxなので、
なにも指定していなければflex-basiscontent-boxでサイズを算出します。

MDN flex-basis

おわりの言葉

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

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

太古の昔に書いた記事『珍しい(?)CSSプロパティたち』を近日中に改訂しようと思いますので、こちらもよろしければ!

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

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