kosukeyamashita.dev

State of CSS 2022

Google IO 2022 の State of CSS - web.dev セッションから気になるところをまとめ

ブラウザ互換性向上の取り組み

  • 2019年からMozilla, Googleを中心として開発者の問題を理解するためのサーベイを開始した
  • 2021年に集めたサーベイの結果から、上位の問題に対してブラウザの互換性向上に取り組む Compat 2021 というPJが開始された

Compat 2021

ref: Compat 2021: Eliminating five top compatibility pain points on the web

主要なブラウザベンダーとそのほかの関係者で構成されている

Compat PJでは複数の基準で改善項目を決めている

  1. 機能の仕様状況。例えばFlexboxは全ページビューの75％で仕様されている
  2. バグの数（Chromium, Gecko, WebKit）、Chromiumについてはそれらのバグがいくつstarを持っているか
  3. サーベイの結果
  4. web-platform-tests のテスト結果
  5. Can I use の Most searched features

その結果以下の5つの機能を絞り、2021年に修正を目指した。

  1. sticky positioning
  2. aspect-ratio sizing
  3. flex layout
  4. grid layout
  5. transform positioning and animation

実際の進捗状況はCompat2021のダッシュボードで確認できる

Interop 2022

  • compat 2021 が既存のCSSプロパティの互換性及び安定性を向上させることが目的であったが、Interop 2022 と名付けられたこのPJでは新しいスタイリング方法を実装していく
  • Compat 2021では参加していなかった、Appleが参加
  • 以下の10の項目の提供を計画している
  1. @layer
  2. Color spaces and functions
  3. Containment
  4. <dialog>
  5. Form compatibility
  6. Scrolling
  7. Subgrid
  8. Typography
  9. Viewport units
  10. Web compat

↓ 一部 Pick

Inert

ref https://web.dev/state-of-css-2022/#inert https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/inert polyfill: https://github.com/wicg/inert

  • DOMツリーの一部を不活性状態としてマークできる
  • そのツリー内のフォーム要素、リンクなどのフォーカス可能な要素も不活性となり、フォーカスや各種イベントもされない。また支援技術によるフォーカスも当たらなくなる
  • そのためDialogやスライドメニューなどフォーカストラップしたい際に複雑なJSの記述を使用せず実装できる
<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

※Dialog要素のサポートも主要ブラウザでサポートされたのでモーダルの場合はこっち使った方がより楽かもしれない（まだよくわかってない)

Viewport Unit

  • 100vh などした時に画面縦幅 + アドレスバーの高さで微妙にスクロールできてしまう時があった
  • dvh, lvh, svhが追加されそのあたりの解決ができる

Viewport units

ref: https://web.dev/state-of-css-2022/#viewport-units

:has()

ref https://web.dev/state-of-css-2022/#:has() https://developer.mozilla.org/ja/docs/Web/CSS/:has

  • 特定の子要素を持っているときに親要素に対してスタイルを当てられる
<head>
  <style>
    .container:has(.fuga) {
      background: red;
    }
  </style>
</head>

<body>
  <div class="container">
    <p class="hoge">hoge</p>
  </div>
  <div class="container">
    <p class="fuga">fuga</p>
  </div>
</body>

:has() Pseudo-class sample