このページの色をかけた魂の戦い
皆さんこんにちは。この記事では、筆者が最近勉強した CSS Color Adjustment Module Level 1 の内容をご紹介します。 この仕様は記事執筆現在Candidate Recommendationという段階にあり、一部ブラウザでの実装もされています。 どんな仕様？ 仕様の名前が示している通り、この仕様はページの色の調整に関するCSSプロパティやその関連概念を定義するものです。特に、この仕様はページの色（カラースキーマ）をどう調整するかに関して著者（ページのCSSを書く人）とユーザーとの間のネゴシエーションを可能とする点が特徴的です。 color-scheme: サポートするカラースキーマの表明 昨今、ダークモードという概念がWebやその周辺を圧巻し、多くのアプリやウェブサイトがダークモードに対応しています。CSSにおいては、@mediaとprefers-color-s
meta要素のname=color-schemeについて
ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それだけでは、例えばテキストエリアで出てくるスクロールバーが明るいままなので、かなり浮いてしまう。meta要素でname=color-schemeを適切に設定すると、そういったスクロールバーの色も含めたあらゆるものの色を暗く(明るく)できる。 書き方は特に難しくない。ダーク・モードへ適応しようと、prefers-color-schemeメディア・クエリーを使って、明るい背景と暗い背景を切り替えるなら、以下のようにHTMLファイルのhead要素以下に書けばいい。viewportと似たようなものだ。 <meta name="color-scheme" content="light dark"> lightとdarkの順序は、逆でも意味は変わらない。これだけでユーザーのOSやブラウザーでのダーク・モー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
