kiso.css

kiso.cssの最大の特徴は、日本語環境での使用を前提とした設計にあります。

多くのリセットCSSは欧文を前提としており、日本語のWebサイトで使用する際には追加の調整が必要になることが少なくありません。

kiso.cssでは、副作用が少ない範囲で日本語に特化したスタイル調整を加えています。もちろん、英語圏の方にも配慮しています。

kiso.cssでは、疑似要素や!importantが明示的に指定されたスタイルを除き、すべてのセレクタを:where()擬似クラスで囲むことで詳細度を0にしています。

kiso.cssはスタイルを容易に上書きできるため、カスタマイズ性の高いリセットCSSとなっています。

リセットCSSでありがちなキーボード操作時のフォーカスリングの消失を防止します。また、強制カラーモードをサポートしたアクセシブルな実装を行っています。

SafariとVoiceOverの組み合わせではlist-style:noneが指定された<ul>や<ol>を「リスト」として認識しない仕様がありますが、kiso.cssは他のリセットCSSとの差別点として「リスト」として認識できるように配慮しています。

text-wrap、text-autospace、text-spacing-trim、scrollbar-gutter などのプログレッシブ・エンハンスメントで利用できる新しいCSSプロパティを活用しています。

<dialog>、<model>、 <search>、 ポップオーバー属性などの新しいHTMLもサポートしています。

kiso.cssは闇雲にリセットするのではなく、リセットするスタイルを厳選しています。

過去の経験を基に、リセットする方が都合の良いスタイルとそうでないものを洗い出し、前者を選択的にリセットする方針を取りました。

残すところは残しつつ、普段の実装では無しにしたほうが都合の良いUAスタイルはリセットしています。

npm、CDN、直接ダウンロードに対応。1行のインポートですぐに使用開始できます。