#64「1月のWebプラットフォームの新機能」

菅原 : 皆さん、こんにちは！ ミツエーリンクスの菅原です！

加藤 : 加藤です！

菅原 : ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はweb.devに公開されている1月にWebプラットフォームに追加された新機能から 3個のトピックをご紹介します。各機能のブラウザのサポート状況なども紹介していきますが、2月5日時点の内容ですので、ご注意ください。

ミツエーリンクスのWebサイトで公開している文字起こしページには、各機能の仕様や参考リンクなども載せていますので、そちらもぜひご覧ください！では早速まいりましょう！

CSS横書きモード

菅原 : まず、Chrome 132ではCSSのwriting-modeプロパティでsideways-rlとsideways-lrがサポートされました。sidewaysを指定した要素のコンテンツは、縦に流れるように描画されます。縦書きのときに使うvertical-rlやvertical-lrと近いですね。

加藤 : はい。sidewaysは縦書きにしつつ、コンテンツ自体が横倒しになるっていうのがverticalとの違いですかね。sideways-lrのときはコンテンツを左に90度回転させた状態で、sideways-rlのときは右に90度回転させた状態のような見た目になります。

菅原 : そうですね、これはCSSで再現できるデザインの幅が広がりそうです。Firefoxでは以前からサポートされていたのでSafari以外のモダンブラウザで利用できるようになりました。

参考リンク

• 3.2. Block Flow Direction: the writing-mode property | CSS Writing Modes Level 4
• writing-mode - CSS: カスケーディングスタイルシート | MDN

ポップオーバーのモバイルサポートの修正

菅原 : 次はポップオーバーに関する修正です。Safari 17ではpopover属性自体は追加されましたが、iOSとiPadOSではポップオーバーの外側をタップやクリックしてもポップオーバーが閉じないというバグがありました。それがSafari 18.3で修正されたようです。

加藤 : はい。ポップオーバーはモダンブラウザでサポートされてるんで安心して使えるようになりましたね。ポップオーバーの外側をクリックしたらポップオーバーを閉じる機能のことをlight dismissと呼ぶのですけども、dialog要素でも同じことを実現するためのclosedby属性が、Chrome 134でサポートされるみたいですね。

菅原 : そうなんですね。popover属性とdialog要素はどう使い分けるのがいいか検討しておくとよさそうですね！

参考リンク

• 6.12 The popover attribute | HTML Standard
• 6.12 popover属性 | HTML Standard 日本語訳
• popover - HTML: ハイパーテキストマークアップ言語 | MDN
• Safari 18.3 Release Notes | Apple Developer Documentation

Device Posture API

菅原 : 最後はDevice Posture APIについてです。これは折りたたみ式のデバイスについて、その画面が折れているかフラットになっているかを検出できるAPIです。Chrome 132で追加されました。

加藤 : これは前にChrome for Developersのブログで紹介されてたやつですね！

菅原 : はい、私もそれ読みました。画面がフラットかどうかでスタイルを変えるためのdevice-postureメディア特性が追加されていて、デバイスが開かれていてフラットな状態ではcontinuous、デバイスが折れている状態ではfoldedにマッチします。あとはデバイスの折りたたみ状態をJavaScriptで参照したり、監視するためのAPIも追加されています。

加藤 : デバイスが折れている状態っていうのは、例えば折りたたみデバイスが半開きになっているとかそういうイメージですかね？

菅原 : そうですね。仕様では2つの画面の角度が約30度から180度の状態がfoldedと定義されていました。ちなみにChromeの開発者ツールではシミュレートができるので、開発したりデバッグしたりする際は使うとよいかと思います！Device Posture APIはChromeとEdgeで使えるようになりましたが、Firefox、Safariではサポートされていません。

参考リンク

• Device Posture API | W3C
• Foldable API のオリジン トライアル | Blog | Chrome for Developers

クロージング

菅原 : 以上、1月にWebプラットフォームに追加された新機能の紹介でした！

加藤 : はい、今回紹介したもの以外だと、Firefox 134ではPromise.tryが実装されて、ベースラインで新たに利用可能になり、position: absoluteが指定されている要素に対してalign-self、justify-self、place-selfが指定できるようになりました。またChrome 132ではRequestとResponseインターフェースのbytes()メソッドの追加、WebAuthn Signal APIが利用できるようになったことが紹介されていました。気になる方はweb.devの記事をご覧ください！

菅原 : ちなみに2月5日にリリースされたChrome133については「CSS にとってエキサイティングなリリース」と書かれていて、attr()関数が任意のプロパティで使用できるようになったり、フロントエンドBlogにも書いたScroll State Container Queriesが使えるようになりました！今までの「これが欲しかった！」という機能が入りましたね。

加藤 : うん、そうですね！さっそく試してみたいと思います。

菅原 : 最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。

また、このPodcastはApple Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、エピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。
それでは今日はこの辺で！ありがとうございましたー！

加藤 : ありがとうございました！