劇薬の The New CSS Reset

2021-07-20

新しいプロパティを使ったCSSリセットが紹介されていましたが、扱いが難しそうな印象だったので解説します。

The New CSS Reset とは

The New CSS Reset | the-new-css-reset は、簡潔にいうと all: unset で、全ての要素に対してブラウザのデフォルトのスタイルシート（UAスタイルシート）を亡き者にした後に、 display: revert でUAスタイルシートのdisplayの値を蘇生させたCSSリセットです。

/*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)){
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after{
    box-sizing: border-box;
}

/* Remove list styles (bullets/numbers) */
ol, ul {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table{
    border-collapse: collapse;
}

具体的に説明すると、 all: unset を使って問答無用で全てのHTMLにかかっているUAスタイルシートのCSSプロパティの値を初期化させます。
ただし、ここには落とし穴があります。UAスタイルシートは、様々な要素のdisplayプロパティの値も定義しています。
しかし全ての要素の値を初期化するということは、これらのdisplayプロパティも初期値である inline になることを意味しており、意図しない見え方になるのです。
下記は、BlinkのUAスタイルシートの抜粋です。

html {
    display: block
}
/* children of the <head> element all have display:none */
head {
    display: none
}
meta {
    display: none
}
title {
    display: none
}
/* generic block-level elements */
body {
    display: block;
    margin: 8px
}
p {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1__qem;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}
div {
    display: block
}

上記のようなdisplayプロパティが初期化されて inline になると、title要素が見えてしまったり、div要素がインラインの振る舞いになります。
それでは困るので display: revert を使用して、displayの値をUAスタイルシート準拠に復元します。
またiframe, canvas, img, svg, videoを詳細度が変化しない状態で除外しているのも特徴です。

さて、これらを行うことでブラウザのUAスタイルシートにほぼ依存しないCSSが書けます。
おそらく多くの人がよく分からないUAスタイルシートから開放されるのは喜ばしいことのように聞こえますが、このCSSリセットは劇薬です。

劇薬

なぜこのCSSリセットが劇薬なのか？
それは意図しないCSSのプロパティの値も初期化してしまうからです。

同じような理由で使用されなくなったユニバーサルセレクタを用いたCSSリセットの方が、まだ可愛いでしょう。

* {
  padding: 0;
  margin: 0;
  font-size: 100%;
}

「The New CSS Reset」の初期化具合は、上記の比ではありません。
アクセシビリティでいえば、tabキーによるフォーカスリングを消してしまったり、PCでリンクをマウスオーバーした時のカーソルの変化などがなくなります。

a要素のフォーカスリングが消える

またh1, h2要素といった見出しやstrong, b要素などの太文字でも問題ないであろうスタイルも初期化します。
input, textareaなどのフォーム関連の要素やhr要素などに関しては、スタイル自体が消失するので、そのままでは見えなくなるものもあります。

これを回避するために「The New CSS Reset」の紹介ページでは all: unset ではなく all: revert を付与してUAスタイルシートを復活させる方法も紹介されています。
しかし下記のような記述を行った場合は、指定した箇所のUAスタイルシートを復活させるだけで、改めて別のCSSリセットをかけ直す必要があります。

input,
textarea,
select {
  all: revert;
}

どうしても「The New CSS Reset」が使ってみたい方は、CSSプロパティの初期値とUAスタイルシートの理解を深めておくことの2点をおすすめします。
CSSプロパティの初期値とUAスタイルシートの理解を深めておく理由としては all: unset によって問答無用で初期化されるので、その値が何に変わるのか理解できるようにしておくことが1つ。
そしてUAスタイルシートが消失するので、何が消えるのか、何を戻すべきかを作成すべきデザインと比較して、頭の中でCSSの宣言や値の選別しやすくさせるためです。

この2点が頭に入っていれば「The New CSS Reset」をうまく扱えるようになるでしょう。
むしろ初期値とUAスタイルシートが頭に入っていれば、以下のような階層としてCSSを見れるようになるため、どんなCSSリセットでも扱えるようになります。
達成すべきデザインに合わせて、自分でCSSリセットをカスタマイズすることも容易です。

CSSの初期値
UAスタイルシート
制作者CSS

リセット
コンポーネントなど

The New CSS Reset の使い道

無理矢理CSSを更地できるので、ブラウザのフォームなどのUIを全て新しく再開発するwebアプリケーションを制作する時。
次世代の新しいデバイスが登場した時にレンダリングエンジンがBuggyすぎる時ぐらいしか、思いつかないです。