base.css

私の個人サイト（w0s.jp, blog.w0s.jp）で使用している、いわゆるリセット CSS です。個人的な用途をモチベーションに開発していますが、本ドキュメントで記す条件、考え方にマッチしているのであればどのような Web サイトにも使えます。

Reset or Normalize ?

本 CSS は厳密にはリセット CSS でもノーマライズ CSS でもありません。すべてのスタイルをリセットするわけではなく、またブラウザ間の差異をゼロにするつもりもありません。スタイルを revert する必要がないことを目標とし、リセットやノーマライズは最低限としています。

とはいえ思想の入れ込みが完全にゼロなわけではありません。_best-practice.css には個人的な好みが多少混じっています。

適切な呼び名がなく、とくにこだわりもないのですが、Web サイトのベースとなるスタイルであることは間違いないので、パッケージ名は base.css としています。

Web アクセシビリティの考え方

Web アクセシビリティで重要な点のひとつが「ユーザーがブラウザ設定を自由に変更できること」と考えています。ここで言うブラウザ設定とはユーザースタイルシートでカスタマイズしたり、強制ダークモードを適用したり、スクリーンリーダーなどの支援技術を使ったりといったことを指します。

決して「ユーザーの利便性を高めること」がアクセシビリティではありません。ブラウザ設定のカスタマイズを保障することで、結果的に利便性が高まるだけです。

ブラウザによって思想の違いがあるのは当然のことであり、ブラウザの選択の権利はユーザー側にあり、Web サイト側がブラウザ間の差異を過度に平準化すべきではありません。

以下に具体例を4つ記します。

リストマーカー

本 CSS ではリストスタイルのリセットに list-style-type: none を堂々と使用しています。この方法でリストマーカーを消すと Safari では使用箇所によってリストとして認識されなくなる事象があるのですが、これは Webkit の意図的な変更であるため、その意図の尊重を優先しているからです。

Webkit の方針に同意できない意見も多くあるのは事実ですが、それを解決するのはユーザー自身の責任でやるべきことで（ユーザースタイルシートやユーザースクリプトを使えば解決可能です）、リセット CSS をはじめとした制作者スタイルシートが対応する範疇ではないと考えています。

<mark> 要素

<mark> 要素のデフォルトスタイル（UA スタイル）は文字色と背景色のみで他との区別をしているため、たとえば @media print で border を設定するといった工夫が求められるでしょう。しかし <mark> 要素のスタイルはサイトによって異なるため、本 CSS ではそのような対策は行っていません。

<pre> 要素

<pre> 要素はデフォルトスタイルで white-space: pre が設定されているため、長いテキストの表示に不向きであり、とくに印刷では範囲外の文字が印字されない状況となってしまいます。

前述の <mark> 要素の事例と異なり、<pre> 要素の使用に際してテキストの折り返しのスタイルはどのサイトでも大きくは変わらないものと思われます。そのためこの問題に関しては本 CSS で対応することとし、@media print で text-wrap-mode をリセットすることで印刷時のみ折り返しが行われるように工夫しています。

最小化しない

PostCSS 設定（postcss.config.js）のとおり最小化は行っていません。また CSS コメントもユーザーにとって有用なものは残しています。

ユーザースタイルシートを設定する際などにユーザーが制作者スタイルシートを閲覧することがあるため、CSS ファイルを最小化したり、コメントを削除したりすることには慎重であるべきです（HTML と JavaScript も同様です）。通信量を数バイト単位でも節約しないといけないケースはそう多くはないでしょう。

現代ではブラウザに開発者ツールが組み込まれているのでそのようなことは気にする必要がない、というのは誤った考えです。公共施設のパソコンではその機能が封じられている事例があります（国立国会図書館の館内端末を体験してみると良いでしょう）。そのような環境下でも、ユーザーは Web ページのソースコードを直接閲覧する権利があります。

本 CSS ではビルド後に Prettier で整形処理を行うことで、機械可読のみならず人間が見やすいように調整を行っています。

日本語ページ前提

<cite> 要素などが斜字体にならないように font-style をリセットしているのですが、:lang(ja) のみを対象としており、中国語や韓国語は考慮していません。

また <i> 要素や <u> 要素は日本語文脈で使用されることが皆無のため、そもそも使用を想定していません。