2022年になりました。矢倉眞隆
取り上げるトピックの数やそのインパクトから,
2022年以降のCSSは大きく変化しそうだなと思っています。これまでも,
Compat 2021とInterop 2022で互換性の向上
CSSのつらいところとしてまず取り上げられるのが,position: sticky
,aspect-ratio
プロパティの実装が行われました。
FirefoxやSafariでもバグの修正や機能の実装が行われ,
プロジェクトが一定の成果をみせたことで,
:focus-visible
擬似クラスが全ブラウザでサポート
ウェブページでTabキーを押すと,
フォーカスリングのスタイル指定には:focus
という,:focus-visible
という擬似クラスが登場したのです。
:focus
疑似クラスはフォーカスされた状態にマッチするのですが,
/* アクセシビリティを損なうよくないCSS */
:focus {
outline: none;
}
これはアクセシビリティを損なうものなので,:focus-visible
擬似クラスになります。
:focus-visible
擬似クラスは
/* 見えるべきときに見えるフォーカスリング */
:focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
この実装に合わせ,:focus-visible
が実装・:focus
を使い消すのではなく,:focus-visible
を使って見やすいフォーカスリングのスタイルとなるようにしてください。
Scroll-linked Animationsが実装中
Scroll-linked Animationsという仕様があります。アニメーションというと時間経過による値の変化を指すことが多いですが,
こうした表現は華美であるものの,@scroll-timeline
というブロックを追加することで,
Chromeでは以前から実装が行われており,