Upgrade to Pro — share decks privately, control downloads, hide ads and more …

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
730
0

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019

More Decks by circled9

See All by circled9
キースイッチ入門
Avatar for circled9 circled9
0
110
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
930
0.0.0.0 day
Avatar for circled9 circled9
0
140
小数の丸め誤差の話
Avatar for circled9 circled9
0
150
数値の文字列をパースしよう
Avatar for circled9 circled9
0
280
🔥 Hono v4 やってみた
Avatar for circled9 circled9
1
250
JetBrains AI Assistant を試してみた
Avatar for circled9 circled9
1
600
Fresh
Avatar for circled9 circled9
0
280
React Hooks 勉強会 vol.3
Avatar for circled9 circled9
2
460

Other Decks in Technology

See All in Technology
AIで政治は変わるのか？ — 中高生と考えたAI時代の民主主義（東海高校サタデープログラム）
Avatar for 須田英太郎 eitarosuda
0
410
AWS Summit の片隅で、体育座りしながらコミュニティがにぎわう理由を考えた
Avatar for Kazuki Adachi k_adachi_01
2
360
クラウド上のデータ復旧で見落としがちな制約: 医療系 SaaS の BCP 設計から得た教訓
Avatar for KAKEHASHI kakehashi
PRO
0
2.9k
型は壁、Rustでもバグを直すな、表現できなくせよ
Avatar for nwiizo nwiizo
12
1.9k
Terraform共通モジュールをチーム横断で“変えられる”運用へ ― リリースと適用の分離
Avatar for kekke-n kekke_n
1
2.2k
小さいから、全部わかる。— 常駐AI "xangi" のすすめ
Avatar for suguuuuuすぐー sugupoko
0
280
生成AIの活用/high_school2026
Avatar for Oka Natsuki okana2ki
0
110
キャリアの中で本を作る / Making a Book During Your Career
Avatar for akihisa1210 ak1210
0
120
デジタル・デザイン：次の50年を描く「進化する青写真」
Avatar for Sayaka Ishizuka y150saya
0
840
貴方はどのエンジニアリングを磨くのか
Avatar for hatyibei hatyibei
0
100
CSに"SLO"は要らない、経営層に"99.9%"は伝わらない - SREを全社に"翻訳"する3原則
Avatar for サイバーセキュリティクラウド cscengineer
PRO
1
4k
ゼロをイチにする仕事が終わったあと
Avatar for Masato Sugiyama smasato
0
320

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
280
Scaling GitHub
Avatar for Zach Holman holman
464
140k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
500
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
220
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k

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