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

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

加藤 : 加藤です！

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

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

ChromeにCSSカルーセルが導入

菅原 : ではまず1つめ、Chrome 135で追加された::scroll-button()疑似要素と::scroll-marker()疑似要素です。::scroll-button()疑似要素は、スクロールコンテナに対する、ボタンを作ることができて、そのボタンを押すことでコンテナを一定量スクロールさせることができます。:: scroll-marker()疑似要素は、コンテナ内の要素に対応するマーカーを作ることができる疑似要素ですが、マーカーがアクティブになると、対応する要素がビューポートに表示されるように、コンテナがスクロールします。この2つを組み合わせると、カルーセルのようなコンテンツを作ることができます。CSSでできることがどんどん増えてきましたね。

加藤 : そうですね。まさかCSSだけでカルーセルが作れるようになるとは思ってなかったですし、まぁまだChromeとEdgeだけですけど、こんなに早くリリースされるとはっていう驚きもありましたね。Chrome for Developers Blogで公開された記事ではJSで作るよりもアクセシブルな実装が期待できると紹介されていました。ただ、この機能に関してアクセシビリティに関する調査をされている記事も出ていて、現時点ではいくつかの課題があると指摘されています。あとはCSS スクロールスナップなど、比較的新しいCSSを複数組み合わせることになるので、ブラウザのサポート状況や使い方をしっかりつかんでおくと良さそうですね。

菅原 : はい。ありがとうございます。カルーセルは、Webサイトでよくみる機能ですし、JavaScriptによる動的な処理が減ることで、パフォーマンスの向上も期待できますが、まだリリース直後ということや、他のブラウザのサポート状況も考えると、実験段階の機能と捉えておくといいかもしれないですね。

参考リンク

• 3.2. Scroll Buttons | CSS Overflow Module Level 5
• 3.1.4. The ::scroll-marker pseudo-element | CSS Overflow Module Level 5
• ::scroll-button() - CSS: Cascading Style Sheets | MDN
• ::scroll-marker - CSS: Cascading Style Sheets | MDN
• CSS を使用したカルーセル | Blog | Chrome for Developers
• Are 'CSS Carousels' accessible?

command属性とcommandfor属性

菅原 : 次もChorme135とEdge135で追加された、command属性とcommandfor属性です。どちらもbutton要素に使う属性でcommand属性は動作を指定して、commandfor属性はボタンの操作が作用する要素のid属性を入れて紐づけることができます。

加藤 : command属性に指定できる値は今のところtoggle-popover、show-popover 、hide-popover、close、show-modalの5つのキーワードですね。commandとcommandforを使うと、JavaScriptを書かずにたとえばdialog要素をモーダルとして表示できるんですけど、それだけではなくて表示後のフォーカス管理なども、自動で処理してくれるそうです。あと、キーワード以外にもJavaScriptでカスタムコマンドを定義することができて、Googleの使用例だと、画像を回転させる機能が挙がってました。

菅原 : ありがとうございます。他にもdetails要素の開閉や、要素からテキストをコピーすることも提案されているんですよね。先が楽しみな機能です。

参考リンク

• The command attribute | HTML Standard
• command属性 | HTML Standard — Forms （各種フォーム用の要素）（日本語訳）
• HTMLButtonElement: command プロパティ - Web API | MDN
• command と commandfor の導入 | Blog | Chrome for Developers
• Invoker Commands Future (Explainer) | Open UI

CSS shape()関数

菅原 : 最後はCSSのshape()関数です。これはChorme 135とEdge 135、Safari 18.4でサポートされていて、Firefox Nightlyにも含まれています。clip-pathプロパティの値として使用することで、要素を複雑な形状にクリップできるようになります。path()関数とは違って、関数内でpx以外の単位やカスタムプロパティが使用できて、calc()など、他のCSS関数と組み合わせて使えるみたいです。

加藤 : px以外に、vwとか%などの単位も使えるので、レスポンシブ対応ができるようになりました。仕様にはshape()関数を使ってレスポンシブな吹き出しを作る例が掲載されていて、path()関数との比較も書かれていて分かりやすかったので、見てもらうと良いと思います。

菅原 : そうですね。カスタムプロパティを使って、関数内の共通する数値をまとめていたりして、管理する上でもありがたい機能だと思います。

参考リンク

• 4.1.1. The shape() Function | CSS Shapes Module Level 2
• 4.1.1. shape() 関数 | CSS Shapes Module Level 2 （日本語訳）
• shape() - CSS: Cascading Style Sheets | MDN
• レスポンシブ クリッピングに shape() を使用する | Blog | Chrome for Developers

クロージング

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

加藤 : 今回紹介したもの以外だと、Firefox 137ではAtomics.pause()メソッドとhyphenate-limit-chars CSSプロパティが実装されたこと、Firefox 138ではFedCMで使用するLogin Status APIと、Error.isError()が実装されたこと、importmapタイプのscript要素の中でintegrityを指定できるようになったこと、Chrome 136ではRegExp.escape()メソッドが実装されたことが紹介されていました。気になる方はweb.devの記事を参照ください。

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

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

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