prefers-color-schemaの話

Transcript

1. 1.

   prefers-color-schemaの話 water-cell tech night #3 1

2. 2.

   Intro prefers-color-schema はシステムのカラーテーマを検出するメディア特性。 Media Queries Level 5 に含まれている仕様の⼀つ。 User Preference

   Media Features と呼ばれる仕様の⼀つ。 ちなみに現在の勧告は Media Queries Level 3 2
3. 3.

   対応ブラウザ Firefox 67以降 (= Developer Edition) Safari 12.1以降 3

4. 4.

   Example @media (prefers-color-scheme: light) { background-color: white; color: black; }

   @media (prefers-color-scheme: dark) { background-color: black; color: white; } 4
5. 5.

   Issue 画像などが元のままだと浮く 5

6. 6.

   他のUser Preference Media Features prefers-reduced-motion(reduce): アニメーションなどの動きを減らす prefers-reduced-transparency(reduce): 透過表現を減らす prefers-contrast(high, low):

   コントラストの⾼低を要求する 6
7. 7.

   参考URL prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features

   | blog.jxck.io prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN 7