CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css

詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。

CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。
CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。

CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css

@acab/reset.css -GitHub

:where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。

@acab/reset.cssの特徴

acab/reset.cssは、CSSの最新機能を取り入れたスタイルのリセットです。このCSSリセットを使用することで、より良いベースを提供します。

サイトのキャプチャ

acab/reset.css -npm

  • :whereを使用して詳細度を低く保つように設計されています。カスケードレイヤー対応。
  • color-schemeによる自動ダークモード。
  • system-uiフォントがあらかじめ適用されています。
  • アクセシブルで、一貫性のあるフォーカスのアウトライン。
  • .visually-hiddenが用意されています。

@acab/reset.cssの中身

CSSリセットには他のCSSリセットでお馴染みのルールだけでなく、CSSの新機能を取り入れたルールもたくさんあります。

acab/reset.css v.0.5.3(2022/10/24)

@acab/reset.css(コメント付き)

作者のツイートにコメント付きがあったので、意訳してみました。

作者のツイート

sponsors

top of page

©2022 coliss