Dark Side of The Web

Dark Side of The Web
1. #megurocss 20190306 https://megurocss.connpass.com/event/120644
2. #WEBエンジニア勉強会12 20190329 https://techplay.jp/event/716201

Transcript

1. Dark Side of the Web 2019/3/29 #@WEBMeetupJP Jxck
3. Dark Side
4. Light Side ~陽のあたる場所~
5. Dark Side ~闇をまといし暗黒の地~
6. Light Pill or Dark Pill ~深淵の入り口~
7. なぜ人は闇に落ちるのか
8. • 目に優しい ◦ 体質や人種によっては現状の Web を眩しいと感じる 人も ◦ そうでなくてもベッドで見るスマホは眩しい ◦ 支援技術の一環として似たものは昔からあった • バッテリー消費 ◦ 液晶は黒を出すのに電力を使うので効果は薄い ◦ 有機 EL は光らない状態が黒なので効果が期待される • 見た目 ◦ 僕が見てる世界は暗い、君たちとは違うんだ、、 ◦ (意訳: ヤベー画面黒い俺カッケー、マジどうみてもハッカーだわこれ) なぜダークサイドモードに落ちるのか？
9. Dark Code
10. prefers-color-scheme • Media Query の仕様 • OS の Color Mode を取得 • そこで Dark Mode 用の CSS を書ける
11. @media (prefers-color-scheme: light) { background-color: white; color: black; } @media (prefers-color-scheme: dark) { background-color: black; color: white; } Sample Code ~黒魔法~
12. Demo of Switching Dark Mode ~闇落の儀式~
13. Theme for scheme ~とある書物の彩色目録~ @media (prefers-color-scheme: light) { --theme-base: white; --theme-font: black; --theme-accent: red; } @media (prefers-color-scheme: dark) { --theme-base: black; --theme-font: white; --theme-accent: red; } body { background-color: var(--them-base); font: var(--them-font); } strong { font: var(--them-accent); }
14. Dark Image
15. 画像問題 • Dark Mode 時の画像はどうなるべきか • 画像全部を直すとか無理 • そのままでも良さそうな気もするが • 画像だけ眩しさが目立つ気もする
16. 色彩改変魔法 CSS Filter
17. SVG などは作りによっては反転してもいける filter: invert(100%)
18. 写真だとこれじゃない感 filter: invert(100%)
19. 色味が近いという意味では無くはない filter: grayscale(100%)
20. 調整するとそれっぽくなる filter: grayscale(50%)
21. Dark Scripts
22. Syntax Highlight は反転でいける filter: invert(100%)
23. と思ってた
25. これは始まりにすぎなかった..
26. User Preference Media Features
27. User Preference Media Features • ユーザが閲覧環境に設定した内容を取得 ◦ inverted-colors: 反転設定 ◦ prefers-reduced-motion: アニメーションの削減 ◦ prefers-reduced-transparency: 透過表現の削減 ◦ prefers-contrast: コントラスト変更 ◦ prefers-color-scheme: カラーテーマ変更
28. ただし方向が微妙に違う • Dark Mode (opt-in) ◦ OS は Web コンテンツに手を入れない ◦ 代わりに対応して欲しい旨を伝える ◦ コンテンツ開発者は Opt-In で対応 • High Contrast Mode (intervention) ◦ OS が Web コンテンツに手を入れる(反転など) ◦ 手を入れている旨を伝える ◦ コンテンツ開発者は Override で対応
29. 最適な閲覧環境 • 閲覧環境はユーザが決めるもの • コンテンツは邪魔や拒否ではなく補助を行う • 全環境で同じように見えるという幻想を捨てる • わからなければ OS の邪魔をしない方向に • 特定の挙動に特化しすぎない • 設計の早い段階から意識しておく
30. Welcome to Dark Side Jxck