【CSS】State of CSS 2021 - アクセシビリティなど

前回、前々回に続いてState of CSS 2021で知らなかったところをキャッチアップしたい

2021.stateofcss.com

前々回の 　 uga-box.hatenablog.com

前回の
uga-box.hatenablog.com

アクセシビリティ

prefers-reduced-motion

前庭運動障害者など、特定のアニメーションを不快に感じるユーザがシステム設定でこれらを制御している場合、prefers-reduced-motionを設定しておくとそのシステムに設定に応じて動きを抑制することができる

prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN

prefers-color-scheme

ユーザがダークモードの設定にしているかを検出することができる

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

こちらが参考になった

prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features | blog.jxck.io

prefers-reduced-data

ユーザーが情報量の少ない軽量なコンテンツを要求しているかどうかを検出することができる

prefers-reduced-data - CSS: Cascading Style Sheets | MDN

いまのところ利用できるブラウザはない

color-contrast()

Exploring color-contrast() for the First Time - CSS-Tricks

tabindex属性

指定した要素に入力フォーカスがあたるようにすることができ、キーボードのTabで移動できるかどうか、どの順番で移動するかを指定することができる

tabindex - HTML: HyperText Markup Language | MDN

その他

CSS封じ込め

ページ内のコンテンツが独立していることをブラウザに伝え、ウェブページの表示性能を向上させる

独立していることをブラウザーが伝えることで、レンダリングを最適化し、表示性能を向上させることができる

CSS 封じ込め - CSS: カスケーディングスタイルシート | MDN