Web制作者は要チェック！ Chrome 132で新しく追加されたCSSとHTMLの3つの新機能
Post on:2025年1月21日
sponsors
Chrome 132で追加された、CSSとHTMLの新しい機能3つを紹介します。
今回のアップデートで、dialog要素の開閉トグルイベントを取得できるようになります。これによりダイアログが表示されているのかどうか簡単に判定できます。ほかにもCSSによる縦書き、Anchor Positioningなど、Web制作者は要チェックです！
New in Chrome 132
Chrome 132 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
はじめに
1/15にリリースされたChrome 132でCSSとHTMLの新しい機能が3つ追加されました。対象となるChrome 132は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その3つの新しい機能を紹介します。
CSSのAnchor Positioning
これまでanchor-size()はサイズ指定のプロパティでのみ許可されていましたが、仕様が変更され、insetとmarginでもanchor-size()が使用できるようになります。
CSSによる縦書き
writing-modeプロパティで、sideways-rlとsideways-lrキーワードがサポートされました。この2つのキーワードは日中韓以外のテキストを縦書きするときに役立ちます。これらはvertical-rlやvertical-lrとは異なり、日中韓言語に適した動作はしません。
FirefoxとOperaでもすでにサポートされていますが、Safariではサポートされていません。
dialog要素のトグルイベント取得
dialog要素は、HTMLであらゆる種類のダイアログを実装するのに便利な要素です。すべてのブラウザで動作しますが、これまではダイアログの開閉を検出する方法がありませんでした。
Chrome 132+ではToggleEventが追加され、dialog要素が開くとnewState=openでToggleEventが呼び出されます。閉じるとnewState=closedでToggleEventが呼び出されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const dialog = document.getElementById("myDialog"); // Fired just before dialog is shown/hidden dialog.addEventListener("beforetoggle", (event) => { if (event.newState === "open") { console.log("Dialog is about to be shown"); } else { console.log("Dialog is about to be hidden"); } }); // Fired just after dialog is shown/hidden dialog.addEventListener("toggle", (event) => { if (event.newState === "open") { console.log("Dialog is now visible"); } else { console.log("Dialog is now hidden"); } }); |
sponsors
