iOS16 でサポートされた CSS の機能たち

こんにちは！ウェブエンジニアの城間です。

2022年9月12日 にリリースされた iOS16 に伴い、Safari 16 にさまざまなサポートが追加 されました。
フェンリルでは iOS16 調査分科会を立ち上げ、その中で私は CSS に関する機能について調べていました。 旬は過ぎてしまいましたが、せっかく調べてきたので紹介します！

Container Query のサポート

Container Query のサイズクエリのサポート

メディア クエリと同様に、コンテナー クエリを使用すると、ビューポートのサイズではなくコンテナーのサイズに基づいて、Web ページ上の特定のアイテムのレイアウトまたはスタイルを調整できます。

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

なお、polyfill も開発されており、サポート幅も広いです。
→ GoogleChromeLabs/container-query-polyfill

Browser Support

  • Firefox 69+
  • Chrome 79+
  • Edge 79+
  • Safari 13.4+

コンテナクエリで利用可能な相対的な長さの単位

単位 意味
cqw クエリコンテナの幅の 1%
cqh クエリコンテナの高さの 1%
cqi クエリコンテナのインラインサイズの 1%
cqb クエリコンテナのブロックサイズの 1%
cqmin cqi または cqb の小さい方の値
cqmax cqi または cqb の大きい方の値

※ cqi と cqb は書字方向に依存します。
例えば、cqi のインラインサイズは一般的な横書きにおいて水平方向でコンテナが確保可能な最大サイズを参照するため、cqw と等価の数値がでます。
対称に、cqb のブロックサイズは一般的な横書きにおいて垂直方向でコンテナが確保可能な最大サイズを参照するため、cqh と等価の数値がでます。

参考

Subgrid のサポート

Grid の問題

Grid アイテム内の要素を他の Grid アイテムのコンテンツに応じた可変的な高さや幅と合わせることができない課題があります。

Subgrid の利点

Grid コンテナのルールに合わせて Grid アイテム内の要素をそれぞれレイアウトを合わせ統一することができ、上記の問題を解消することができます。
こちらの記事内の比較写真が Subgrid の効果としてとても直感的でわかりやすかったです。

Demo

Subgrid のサポート状況

CSS Subgrid | Can I use... Support tables for HTML5, CSS3, etc
2022年11月現在でサポート状況は Safari と FireFox のみと限られている状況です。

有用な polyfill も見つからなかったため、本格的な導入利用は各ブラウザの対応に照らし合わせる必要がありますね。

参考

アニメーション可能な Grid のサポート

概要

Grid レイアウトに対して、transition や @keyframes で定義したアニメーションが効くようになりました。

記述

一般的な CSS アニメーションを利用するときと同じように設定して利用できます。
例えば下記はマウスホバー時に Grid アイテム それぞれの幅が 10px → 20px と変化しますが、transition の指定により(0.3秒かけて)なめらかに変化するようになります。

.hoge {
  display: grid;
  grid-template-columns: repeat(4, 10px);
  transition: all ease-in-out 0.3s;
}

.hoge:hover {
  grid-template-columns: repeat(4, 20px);
}

実際の動作イメージは下記 web.dev の記事内がわかりやすいです。
CSS Animated Grid Layouts

サポート状況

"Grid animation" | Can I use... Support tables for HTML5, CSS3, etc

iOS16 のサポートによりモバイル端末含め、モダンブラウザはすべて利用可能で採用しやすくなりました。

Offset Path のサポート

概要

Motion Path とも呼ばれるこの機能は、移動する要素の経路を定義できます。

記述

とある要素を指定した経路で移動させたい時に利用します。

.target {
  offset-path: path('M0,0 L60,70 L-60,30z');
}

MDN のページにて動作が確認できます。

対応状況

iOS16 もとい Safari16 から offset-path には対応されているとは表記されていますが、手元の検証では Safari 15.5 で動作確認ができており、can I use と MDN でも対応バージョンの表記に差異がありました。

また、 offset-path に指定できる値は MDN にある通り以下が指定できますが、手元で検証した結果、path() 以外は動作しなかったため注意が必要です。

/* 関数値 */
offset-path: ray(45deg closest-side contain);

/* URL */
offset-path: url(#path);

/* 図形 */
offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');

/* 位置ボックス */
offset-path: margin-box;
offset-path: stroke-box;

これは can I use にもあるとおり、 offset-path の値に利用できる関数のサポート状況が追いついていないことが原因のようでした。
※ Chrome はサポート済み表記で動作しなかったり、Safari は path() が未対応と書かれているが動作したりと情報が錯綜しています。

<basic-shape> のサポート状況も確認したが、手元の検証とサポート状況に差異がありました。
※ 上記の通り path() は動作したが Safari はサポート外、 circle() は動作しないが Safari がサポート済みという具合です。

サポート状況が芳しくなく、動作するかしないかの情報もキャッチアップしづらい状態のため、将来的には LP の制作等で有効に使えそうですが、2023年2月現在では利用しない方が無難ですね。

Overscroll Behavior のサポート

概要

スクロールが境界値(上端や下端)に達した時の挙動を設定することができる機能です。
例えばスクロールが発生する要素が入れ子で存在した場合はスクロール連鎖をさせるかどうか等を指定することができます。

対応状況

主要なモダンブラウザでは全てサポートされており、iOS16 でのサポートにより採用がしやすくなりました。
※ MDN の Edge 対応状況が v18 で Partial support となっていますが、旧 Edge のバージョンのことで Chromium ベースの Edge (2023.1 現在の v109)ではフルサポートです。

実装

/* キーワード値 */
overscroll-behavior: auto; /* 既定 */
overscroll-behavior: contain;
overscroll-behavior: none;

/* 2 つの値 */
overscroll-behavior: auto contain;

※ overscroll-behavior: auto contain; と2つの値を指定した場合、x, y の順番で適応されます。

実際の挙動に関しては overscroll-behavior - CSS: カスケーディングスタイルシート | MDN のページがわかりやすかったです。

参考

text-align-last のサポート

概要

ブロックの最後の行、あるいは強制的な改行の直前の行の配置を指定できる機能です。

実装

/* キーワード値 */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

簡単なデモを用意しました。
改行前の最終行にも影響するのがわかります。

text-align とも併用でき、MDN 上でのデモで動作を確認できます。

対応状況

iOS16 のサポートで主要なモダンブラウザではすべて対応済みとなり、気軽に利用できるようになりました。

参考

resolution メディアクエリのサポート

出力端末のピクセル解像度をテストするために使用するメディア特性です。
端末の解像度に応じて画像やレイアウト等を変更するのに利用できます。

実装例

resolution - CSS: カスケーディングスタイルシート | MDN より

/* 正確な解像度 */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}
/* 最小解像度 */
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}
/* 最大解像度 */
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}

単位

単位 意味
dpi 1インチあたりのドット数
dpcm 1cm あたりのドット数
dppx, x 1px あたりのドット数

Safari に関してはこの単位のサポートがされていないと表記されていますが、実機で確認したところ動作したため詳細は不明でした。
そもそも resolution メディアクエリ にはこの単位の指定が切り離せない関係のため、Safari が v16 にてサポートしていると公表しておきながら単位が動作しないと言うのは不可解ですしね...

対応状況

前述した Safari の不可解な点を除けば、モダンなブラウザではサポートされているため利用しやすい状況です。

ただし、ピクセル密度の高い高解像度のディスプレイはユーザーが設定で解像度を落として利用することが多くの場合で見られ、技術の向上により低解像度の端末で閲覧するユーザーもほとんど見受けられません。
そのため多くの場合は px にて考慮し、解像度まで計算するケースは少なく利用シーンは限定的であります。 (有用な利用実績や利用経験がなかったため、私は利用シーンが思いつきませんでした。)

参考

最後に

ウェブあるあるですが、せっかく新機能が追加されてもブラウザ対応状況によって使えなかったりするのが辛いところですね。 採用できそうな技術があれば積極的に利用していき、より多くの人により良く利用してもらえるよう最高のプロダクトを作っていきましょう！