Save 37% off PRO during our Black Friday Sale! »

Dark Side of The Web

1ff811939fd0923df8321ec6d8bf9d4b?s=47 Jxck
March 29, 2019

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

1ff811939fd0923df8321ec6d8bf9d4b?s=128

Jxck

March 29, 2019
Tweet

Transcript

  1. Dark Side of the Web 2019/3/29 #@WEBMeetupJP Jxck

  2. None
  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. と思ってた

  24. None
  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