CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy

最近、CSSのリセットを見直す動きが少しずつあるようです。
2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。

今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。

CSS Remedy -GitHub

• CSS Remedyの特徴
• CSS Remedyのコード

CSS Remedyの特徴

CSS RemedyはMozilla Developerによる、CSSリセットの新しいプロジェクトです。

CSSリセットの今までの流れ

何年もの間、リセット用やベース用のスタイルシートは、Web制作者がより早く作業を始めるのに役立ちました。

初期のリセットではすべての視覚的なスタイルが削除され、Web制作者がすべての要素にスタイルを定義するという負担がかかりました。要素やプロパティの数はそれほど多くなく、当時は各ブラウザが他のブラウザとはまったく異なる動作をしていたため、これは理にかなっています。このアプローチを採用したリセット用スタイルシートはたくさんあり、最も人気が高かったのはEric Meyer's Reset CSSです。

最近になると、Normalize.cssやそれに類似したプロジェクトでは異なるアプローチを採用しています。すべてのスタイルを削除するのではなく、実用的なデフォルトを作成してブラウザのバグを削除することを目指しました。これらのどれか一つを使用すると、すべてのブラウザで一貫したベースのスタイルを手に入れることができます。

CSS Remedyのアプローチ

CSS Remedyのアプローチは、少し異なります。
最近のブラウザは、CSSのレンダリングにおいてはるかに一貫性があります。しかし、ブラウザがUAスタイルシートをどれだけ改善できるかには限界があります。Webのためのデフォルトは、過去のものと矛盾していない必要があります。UAスタイルシートに大きな変更を加えてしまうと、何百万もの既存のWebサイトに影響を与えてしまうからです。

CSSがデフォルトでどのように動作するべきか、現代的な考えでUAスタイルを上書きすることができます。

CSS Remedyの特徴

• プロパティや値を、後方互換性について心配する必要がない場合のみ、定義します。
• フォームの要素とコントロールはカスタマイズしやすいように、基本的なスタイルを適用します。基本的なスタイルを提供することと、フォーム入力がどのように機能するかをOSレベルで制御できるようにすること（iOSでの数字パッド機能など）のバランスを取りたいと思います。
• 非常に軽量なファイルをとして提供します。スタイルの定義は少ないので、上書きする必要がありません（例えば、font-familyは定義されていません）。

CSS Remedyの注意点

このプロジェクトはまだ始まったばかりです。他のフレームワークの一部として配布するのは時期尚早です。
気軽にファイルを読み、インスピレーションを得てください。

CSS Remedyのコード

CSS Remedyは、remedy.cssにコードがまとめられています。
参考までにコメントをすべて、意訳しました。