metaタグのcolor-schemeとCSSのcolor-schemeプロパティー

カラー・スキームへの反応を指示するcolor-schemeは、metaタグとCSSプロパティーのどちらでも定義できる。しかし、CSSプロパティーとして書いてしまうと、HTMLのレンダリング開始が速すぎる場合、FOUCのように一瞬白くなることがある。そのためmetaタグの方が安全なようだ。このウェブサイトでもCSSに書くように変えてから、ちょくちょくフラッシュしていた。今はもうmetaタグに戻している。

仕様をよく読むと、やや機能が違うこともわかってくる。color-schemeプロパティーはコンポーネントで挙動を変えたい時だけ使うことになりそうだ。他にはSVG画像で使っても良いだろう。SVGファビコンなど、単独で利用される場合は必要になる。

まだあまり使われていないcolor-schemeプロパティーは、その機能に混乱があるように思う。たまに以下のようなコードを見る。このような書き方でも期待通りになるが、冗長だろう。

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

color-schemeプロパティーは、どのカラー・スキームでレンダリングするように設計されているかを示すものだ。両対応しているのなら以下のように書くだけで済む。

:root {
  color-scheme: light dark;
}

最近になって「ダーク・モード対応を止めた」という記事をちょくちょく見るようになっている。雰囲気を維持することが難しいというような観点は頷ける。手元では消したので、来週くらいにはなくなっていることと思う。