待ってました！Safari 15.4でサポートされたHTMLやCSS
- 投稿日：
はじめに
2022年3月14日に私が待ち望んでいたSafari 15.4がリリースされました。これにより、すべてのモダンブラウザでサポートされたものや、Safariのみ先行してサポートされたCSSなどが増えたので、少し紹介します。
※Safari 15.4にアップデートするには、macOS/iOS/iPad OSを最新バージョンにアップデートする必要があります。
CSS
カスケードレイヤーのサポート
Safari 15.4のリリースによって、すべてのモダンブラウザでカスケードレイヤーがサポートされました。
以前、単体で記事を投稿していますので詳細はこちらをご覧ください。
ビューポート単位の追加
スモール（svw, svh, svi, svb, svmin, svmax）、ラージ（lvw, lvh, lvi, lvb, lvmin, lvmax）、ダイナミック（dvw, dvh, dvi, dvb, dvmin, dvmax）、論理（vi, vb）ビューポートユニットが新たに追加されました。
今まで、Safariでvhを使用すると、アドレスバーなどの画面上下にあるUIの影響で思い通りの挙動にならないことが多々ありました。ここで新たに追加されたsvhを使うと、ビューポートの短い方を100%とした単位として使うことができます。
個人的にはsvhよりdvhの方が求めていた挙動をしました。シームレスとまではいきませんが、モーダル表示時にUIの大きさに応じて上手く高さが変化してくれました。モーダルの背景を表示させるときに以下の記述をしてみました。
まだ、dvhはSafari 15.4しか使えませんが、100vhを使ってもレイアウトが崩れるほどの影響はないので、dvhがサポートされているブラウザのみdvhが適用される記述をしています。
.modal-background {
height: 100vh;
height: 100dvh; /* for Safari 15.4+ */
}appearanceに-webkit-が不要に
button要素の装飾をリセットするための記述の一部に以下の記述を見たことがあるでしょう。しかし、Safari 15.4でベンダープレフィックス無しのappearanceプロパティがついにサポートされました。サポートブラウザが最新のみで良いのなら、-webkit-appearanceは今後使わなくなりそうです。
button {
-webkit-appearance: none;
appearance: none;
}text-decoration-skip-inkのサポート
text-decoration-skip-inkは上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定するプロパティです。初期値はautoで、上の1行目のような表示になりますが、noneにすることでテキストに線が重なったような表示になります。
p {
/* 1行目のテキストに指定 */
text-decoration-skip-ink: auto;
/* 2行目のテキストに指定 */
text-decoration-skip-ink: none;
}:has()のサポート
他のモダンブラウザに先行してSafari 15.4でサポートされた擬似クラス「:has()」は引数に指定したセレクタに該当する要素が1つ以上の要素と一致します。すべてのモダンブラウザでサポートされれば、非常に画期的な擬似クラスになることでしょう。
/* img要素を直接子に持つa要素のみを選択 */
a:has(> img) { }
/* 直後にp要素を持つh2要素のみを選択 */
h2:has(+ p) { }三角関数などの数学関数のサポート
sin, cos, tan, e, pi, exp, log, atan, acos, asin, atan2が使えるようになったようです。
その他
- 擬似要素「::backdrop」のサポート
- 擬似クラス「:focus-visible」のサポート
- font-paletteプロパティと@font-palette-valuesのサポート
- containプロパティのサポート
- accent-colorプロパティのサポート
- backface-visibilityプロパティのサポート
HTML
<dialog>要素のサポート
リリースされるまで知らなかったのですが、どうやらdialog要素がすべてのモダンブラウザでサポートされたようです。
ただ記述するだけというよりはCSSで装飾、JavaScriptで操作周りの制御をするような感じでしたので後日dialog要素を使ってモーダルの実装を試してみようかと思います。
img要素にloading属性を持つ画像のlazy-loadの対応
Safariは今までExperimental Featuresから有効化すれば使用できましたが、今回のアップデートでimg要素の画像遅延読み込みがサポートされました。しかし、まだiframe要素の遅延読み込みにはExperimental Featuresを有効化しないと使用できません。
補足ですが、loading=”lazy”を使用する際はCLSの観点から、img要素にwidth属性/height属性を指定するようにしてくださいね。
その他
- autofocus属性のサポート
おわりに
今回のアップデートはsvhやカスケードレイヤーを中心にとても楽しみにしていた新機能が追加されたのでリリース日は興奮冷めやらぬ1日となりました。
さっそくですが、Safari Technology Previewではコンテナクエリやsubgridがサポートされることがわかっているので、次のアップデートも非常に楽しみです。
Source: https://developer.apple.com/safari/technology-preview/release-notes/