本ブログのリセット CSS を切り出し

投稿

本ブログで使用しているリセット CSS を @w0s/base.css(GitHub) として独立させました。npm 経由で使用できるのですが、積極的に広く使ってもらおうという気はあまりなくて、自分自身が npm の恩恵にあずかりたいのと、秘密にする必要もないから公開しただけに過ぎない、って感じです。

これまで本ブログで使用していた自作のリセット CSS は何年も手直ししていなかったのですが、改めて調べてみたら Firefox の ::-moz-focus-inner が2017年のバージョン53で廃止されていた[1]など今では不必要な記述が複数あったのでそれらは一掃し、逆に text-autospace プロパティ(W3C)の ideograph-alpha 値が Firefox と Safari の最新版で対応され、「日本語とアルファベットの間は間隔を空けたいが、日時など数字との間は空けたくない」というケースを満たせるようになったため、それを採用するなど新しいプロパティも取り込んでいます。

さらに近年多くのブラウザで強制ダークモードが搭載され、その対応が避けられなくなってきています。リセット CSS の範疇でできることは限られていますが、対応できる箇所は対応しています。

そのほかアクセシビリティももちろん考慮しているわけですが、「それはリセット CSS で行うべき範疇なのか」は慎重に判断したつもりです。たとえば2017年頃からリストマーカーを list-style-type: none で消すと Safari では使用箇所によってリストとして認識されなくなる事象があります。これに対し Webkit の判断に同意できない意見が多数挙がり、その回避方法(developer.mozilla.org)を採用するケースも見られるのですが、私はあえて list-style-type: none を使っています。

そもそもなぜ Safari がそのようなことをするようになったのかというと、Web ページでリストが乱用されたことで VoiceOver ユーザーが「リスト」の読み上げを煩わしく思っていることが理由として挙げられています[2]。その昔、<table> 要素がレイアウト構築のために乱用されたために、レイアウトテーブルとデータテーブルを区別する必要に駆られたのと同様の問題がリストでも起こっていることは想像に難くありません。

「だから Webkit の方針に従うべき」と言いたいのではありません。Webkit に同意できなくても良いのですが、それはリストがリスト扱いされないことで困るユーザーがユーザースタイルシートで回避するか、あるいは「うちのサイトはリストの乱用などしていない」と言い切れるサイトオーナーがその制作者スタイルシートで行えば良いのであって、リストが乱用されているサイトでも使われるであろうリセット CSS が回避策を採用するのは別の問題を発生させうると考えます。

既存のリセット CSS（あるいはノーマライズ CSS）で適当なものがあればそれを使っても良かったのですが、以下の条件をすべて満たすものが見つからなかったので自分で作った次第です。

  • メンテナンスが継続しており、古い記述は随時削除され、新しいプロパティを積極的に採用している
  • アクセシビリティに対する考え方に同意できる（ユーザーの利便性を追求するのではなく、リセット CSS としてあるべき姿を体現している）
  • <cite> 要素等の font-style をリセットするなど、日本語コンテンツに適したスタイルが設定されている

脚注