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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
710
0

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019

More Decks by circled9

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

Other Decks in Technology

See All in Technology
AWS Agent Registry の基礎・概要を理解する/aws-agent-registry-intro
Avatar for Renya Kujirada ren8k
3
370
Shipping AI Agents — Lessons from Production
Avatar for vvatanabe vvatanabe
0
230
AI와 협업하는 조직으로의 여정
Avatar for Arawn Park arawn
0
400
AI駆動1on1〜AIに自分を育ててもらう〜
Avatar for Yoshiaki Yasuda yoshiakiyasuda
0
120
生成AIが変える SaaS の競争原理と弁護士ドットコムのプロダクト戦略
Avatar for 弁護士ドットコム bengo4com
0
250
The Journey of Box Building
Avatar for Satoshi Tagomori tagomoris
4
2.4k
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
7.3k
AIが書いたコードを信じられない問題 〜レビュー負荷を下げるために変えたこと〜 / The AI Code Trust Gap: Reducing the Review Burden
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
7
1.3k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
23k
Amazon S3 Filesについて
Avatar for Yuuki Yamashita yama3133
2
210
Standards et agents IA : un tour d’horizon de MCP, A2A, ADK et plus encore
Avatar for Guillaume Laforge glaforge
0
160
扱える不確実性を増やしていく - スタートアップEMが考える「任せ方」
Avatar for kadoppe kadoppe
0
300

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.3k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
69
39k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
370
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.6k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.4k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
270
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k

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