prefers-color-schemaの話

Transcript

1. prefers-color-schemaの話 water-cell tech night #3 1
2. Intro prefers-color-schema はシステムのカラーテーマを検出するメディア特性。 Media Queries Level 5 に含まれている仕様の⼀つ。 User Preference Media Features と呼ばれる仕様の⼀つ。 ちなみに現在の勧告は Media Queries Level 3 2
3. 対応ブラウザ Firefox 67以降 (= Developer Edition) Safari 12.1以降 3
4. Example @media (prefers-color-scheme: light) { background-color: white; color: black; } @media (prefers-color-scheme: dark) { background-color: black; color: white; } 4
5. Issue 画像などが元のままだと浮く 5
6. 他のUser Preference Media Features prefers-reduced-motion(reduce): アニメーションなどの動きを減らす prefers-reduced-transparency(reduce): 透過表現を減らす prefers-contrast(high, low): コントラストの⾼低を要求する 6
7. 参考URL prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features | blog.jxck.io prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN 7