🧭

Safari16で使えるようになるcss

2022/07/30に公開

はじめに

TechFeedのオンラインイベントTechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう が2022/7/27(水)に開催されました。

鹿野壮さんの 2022年のモダンCSS の発表の中から「Safari16.0の登場で全モダンブラウザで使えるようになるcss」についてまとめました。
基本的に元動画にでてきたことを簡単に文字起こししたものになります。(元の動画も8分くらいなので気軽に見れておすすめです。)
YouTubeのvideoIDが不正ですhttps://youtu.be/6ZGANgMlAsg?t=3120

Safari16.0のリリース

2022年秋頃にSafari16.0がリリースされるようですね。

Safari16.0がリリースされると以下のcssプロパティが使えるようになるようです。  

参考:https://caniuse.com/?compare=safari+15.6,safari+16.0&compareCats=all

Safari16.0でサポートされたcssプロパティ一覧

text-align-last
subgrid
overscroll-behavior
Motion Path
Container Query Units

特にSafari16以降は、text-align-lastoverscroll-behavior が全モダンブラウザで使えるようになります。

text-align-last

https://developer.mozilla.org/ja/docs/Web/CSS/text-align-last

text-align-last はテキストの最後を整列する時に使用するプロパティです。

使用例

このようなのテーブルを

このように両端揃えしたい時に使用できます。

サンプルコード

text-alignjustify を指定をすると対応できそうな気がするんですが、

th {
  text-align: justify;
}

text-align: justify; では最終行だけ left を指定した場合と同じ挙動になります。
よって text-align: justify では両端揃えできないんですが、text-align-last で解決できます。

th {
  text-align-last: justify;
}

overscroll-behavior

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior

overscroll-behavior はスクロール領域の境界に達したときにブラウザーが何をするかを設定します。

使用例

元動画の説明がとても分かり易いんですが、スマホでハンバーガーメニューを表示した際に役立ちます。
ハンバーガーメニューのスクロールが下まで行ってしまうと、メインコンテンツまでスクロールされてしまうことを制御できます。

色々調べてたらMDNに良さそうな例が記載されていましたね。
従来であればjsで制御していたこともSafari16からは overscroll-behavior だけで制御できそうです。

おわりに

IEのサポートが終了したいま、ポストIEと言われていたSafariが対応していないcssプロパティがいくつかあると思います。
Safari16のリリースと、16.0以降のアップデートが楽しみです。

Discussion