Safari 16.1がリリース！ CSSの新機能とバグフィックス、ステージマネージャーによるiPadOSの新しいビューポートサイズ

Post on:2022年10月26日

Safari 16.1がリリースされました

2022/10/24（米国時間）に、Safari 16.1がリリースされました。
macOS Ventura および iPadOS 16向けですが、iOS 16, macOS Monterey, macOS Big Surもサポートされています。

WebKit Features in Safari 16.1

新機能で少し驚いたのが、Apple Pencilによるホバーのサポートです。試してみたら、本当にホバーのエフェクトが機能しました。でも、Apple Pencilでブラウザを操作するかといえば、しないかな。

Safari 16.1へのアップデート方法

Safari 16.1は、iOS 16, iPadOS 16をはじめ、macOS Ventura, macOS Monterey, macOS Big Surで使用できます。

iOS, iPadOSの場合はソフトウェアアップデートからOSのアップデートに含まれますが、macOSの場合はSafariだけアップデートすることができます。「システム環境設定」の「ソフトウェア・アップデート」から、「ほかにもアップデートがあります。」の「詳しい情報」をクリックすると、Safariだけアップデートできます。

macOSのソフトウェア・アップデート

iPadOSの新しいビューポートサイズ

iPadOS 16では、ステージマネージャーという新機能が搭載されました。ステージマネージャーを使用すると、ブラウザのウインドウをさまざまなビューポートサイズやアスペクト比にリサイズすることができます。

iPadOSの新しいビューポートサイズ

このステージマネージャーにより、レスポンシブWebデザインのテクニックはCSSのメディアクエリやコンテナクエリが重要な鍵となります。つまり、これからはレイアウトのための「タブレットのサイズは一つではない」ということです。

Safari 16.1では特にコンテナクエリをサポートしているので、コンテナクエリの環境が整ってきました。コンテナクエリついては、以前の記事をご覧ください。

Safari 16.1のCSSの新機能とバグフィックス

Safari 16（9月リリ−ス）で、コンテナクエリやSubgridや:has()疑似クラスがサポートされました。16.1はこれらの機能をiPadOS 16とmacOSVenturaにもたらします。

バグフィックスは、下記の通りです。

display:contentsボタンがアクセス可能な名前を表示しない不具合を修正されました。
動的ビューポート単位 (dvh) が実際のビューポートの高さと一致しない問題を修正されました。
<body>に設定されたscroll-snapプロパティがビューポートに伝搬されないように修正されました。
ビューポートの論理単位がfont-sizeに対して適切に解決されるように修正されました。
不可視のオーバーフローを含むブロックがposition: fixedの子孫を不正にクリッピングしていたのが修正されました。
テーブルのUAスタイルにbox-sizing: border-boxが使用されるように修正されました。
<select>要素のcontain: sizeが修正されました。
ハンドリングレイアウトとペイントの格納が修正されました。
font-variant-numericとfont-variant-alternatesをリセットするためにfont-variant: normalとfont-variant: noneのショートハンドの処理が修正されました。
スモールキャピタルの扱いが修正され、フォント内の文字がスモールキャピタルに対応している場合は合成されないようになりました。

フォーム関連。

<select>要素でcolorプロパティが無視されるのが修正されました。
<input type="search">にappearance: textfieldが設定されている場合、アイコンを非表示にする問題が修正されました。
<input>と<textarea>要素にreadonly属性が適用されるように修正されました。
<input type="search">のコンテンツ幅に装飾が含まれないように修正されました。

ほかにもあるので、詳しくは下記をご覧ください。