新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset

サイト構築 -CSS

Post on:2021年7月19日

The New CSS Resetの特徴

この新しいCSSリセットは、CSSの新しい機能を使用しています。

グローバルなCSSリセットにunsetとrevertというキーワード。
すべてのプロパティをまとめてリセットできるallという新しいプロパティ。
セレクタの詳細度を0にする:where()疑似クラス。
特定のclassがない要素を選択する:not()疑似クラス。

CSSの新しい機能はIEを除くすべてのブラウザでサポートされています。

参考: CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
参考: CSSの否定疑似クラス「:not()」で、複数のclassを指定する場合の使い方

対応ブラウザ

すべてのエバーグリーンブラウザ^*1（Samsungインターネットブラウザ14を除く、次のバージョンでサポートされる予定です）。
^*1: 自動的にバージョンアップされるブラウザのことです。

The New CSS Resetは何をリセットするのか？

The New CSS Resetは、displayプロパティを除いて、ブラウザから取得されるデフォルトのスタイルを使用したくないという目的に基づいて構築されています。

このCSSリセットにより、すでに述べたとおりdisplayプロパティを除き、さらにiframe, canvas, img, svg, videoなどの特別なHTML要素を除き、HTML要素で得られるすべてのデフォルトのスタイルを削除します。

デフォルトのスタイルを削除したHTML要素のスタイルを元に戻したい場合は、下記のように記述します。

input[type="checkbox"],
input[type="radio"]{
    all: revert;
}

input[type="checkbox"],

input[type="radio"]{

all: revert;

}

The New CSS Resetの中身

2021年7月現在、The New CSS Resetの最新版は下記の通りです。
通常のCSSリセットと同様に、reset.cssとして外部ファイルで利用できます。

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

/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)){
    all: unset;
    display: revert;
}

/* box-sizingの優先値 */
*,
*::before,
*::after{
    box-sizing: border-box;
}

/* リストのスタイル（箇条書き・番号）を削除します */
ol, ul {
    list-style: none;
}

/* 画像がコンテナを超えないようにするため */
img {
    max-width: 100%;
}

/* テーブルのセル間のスペースを削除します */
table{
    border-collapse: collapse;
}