Safari16で使えるようになるcss
はじめに
TechFeedのオンラインイベントTechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう が2022/7/27(水)に開催されました。
鹿野壮さんの 2022年のモダンCSS の発表の中から「Safari16.0の登場で全モダンブラウザで使えるようになるcss」についてまとめました。
基本的に元動画にでてきたことを簡単に文字起こししたものになります。(元の動画も8分くらいなので気軽に見れておすすめです。)
YouTubeのvideoIDが不正です
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-last と overscroll-behavior が全モダンブラウザで使えるようになります。
text-align-last
text-align-last はテキストの最後を整列する時に使用するプロパティです。
使用例
このようなのテーブルを
このように両端揃えしたい時に使用できます。
text-align で justify を指定をすると対応できそうな気がするんですが、
th {
text-align: justify;
}
text-align: justify; では最終行だけ left を指定した場合と同じ挙動になります。
よって text-align: justify では両端揃えできないんですが、text-align-last で解決できます。
th {
text-align-last: justify;
}
overscroll-behavior
overscroll-behavior はスクロール領域の境界に達したときにブラウザーが何をするかを設定します。
使用例
元動画の説明がとても分かり易いんですが、スマホでハンバーガーメニューを表示した際に役立ちます。
ハンバーガーメニューのスクロールが下まで行ってしまうと、メインコンテンツまでスクロールされてしまうことを制御できます。
色々調べてたらMDNに良さそうな例が記載されていましたね。
従来であればjsで制御していたこともSafari16からは overscroll-behavior だけで制御できそうです。
おわりに
IEのサポートが終了したいま、ポストIEと言われていたSafariが対応していないcssプロパティがいくつかあると思います。
Safari16のリリースと、16.0以降のアップデートが楽しみです。
Discussion