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

CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。

CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。
:where():not()allプロパティやunset値やrevert値など、見慣れないCSSがあるかもしれませんが、IE11を除くすべてのブラウザでサポートされています。

CSSの新しい機能を使用したCSSリセット -The New CSS Reset

The New CSS Reset
The New CSS Reset -GitHub

The New CSS Resetの特徴

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

  • グローバルなCSSリセットにunsetrevertというキーワード。
  • すべてのプロパティをまとめてリセットできる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要素のスタイルを元に戻したい場合は、下記のように記述します。

The New CSS Resetの中身

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

2021年、モダンブラウザに適したCSSリセットのまとめ

現在の制作環境に合わせて制作された新しいCSSリセットの中から特に注目すべきCSSリセットをまとめた記事も参考にどうぞ。CSSのテクニックや知見も満載です!

モダンブラウザに適したCSSリセットのまとめ

2021年、モダンブラウザに適したCSSリセットのまとめ

sponsors

top of page

©2021 coliss