2025年12月25日

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

web.devで公開されているNew to the web platformシリーズの2025年12月の内容を日本語でお届けします！

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

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

加藤 : 加藤です！

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

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

@scopeがベースラインになりました

菅原 : まず1つ目は、CSSの@scopeです。Firefox 146でサポートされたことで、主要なブラウザの最新版で利用可能な「Baseline Newly available」になりました。@scopeは簡単に言うと、特定のDOMサブツリー内だけに、セレクタの有効範囲を制限できる機能ですね。

加藤 : これまでは、特定のコンポーネント内だけにスタイルを当てたい場合、BEMのような命名規則でクラス名を工夫したり、セレクタを長く書いて詳細度を上げたりして、他の要素に影響が出ないように頑張っていましたよね。

菅原 : そうですね。@scopeを使うと、「スコープルート」というスコープの開始地点と、オプションで「スコープリミット」という終了地点を指定できます。

加藤 : 終了地点も決められるんですね。

菅原 : 例えば、カードコンポーネントの中だけに範囲を絞りつつ、そのコンポーネントの内側にある、特定の子要素からは範囲外にしたい、みたいな指定ができるんですが、MDNによると、この使い方は、真ん中が抜けた形になるので「ドーナツスコープ」と呼ばれているようです。言葉で説明するのが少し難しいのですが、chrome for developersブログの記事が分かりやすかったので、ぜひ読んでみてください。

加藤 : ドーナツスコープ、なかなか面白い表現ですね。ありがとうございます！

菅原 : あとは、もう1つポイントがありまして、@scopeはCSSカスケードに、新しく「スコープの近接性」という基準も追加することになるようで、同じ詳細度のスタイルが競合した場合、よりスコープルートに近い方のスタイルが、優先されるようになります。

加藤 : なるほど、そうなんですね。これまでは、順番的に後に書いたスタイルが、優先されていたと思いますが、@scope内の範囲内では、よりスコープルートに近い方が、記述順に関係なく優先されるっていうことですよね。@scope、便利そうですけど、意外にハマりどころがありそうだなと思いました。

菅原 : そうですね。従来の感覚だと、思ったようにスタイルが当たらないということが起きそうなので、カスケードと@scopeはセットで知っておくとよさそうです。

参考リンク

contrast-color() CSS 関数

菅原 : 2つ目は、同じくFirefox 146で導入されたcontrast-color()関数です。これは、背景色など、特定の色の値を渡すと、それに対して、黒色と白色、カラーコードで言うと#000と#fffのうち、コントラストが高くなる方の色を、ブラウザが自動で決めてくれる関数です。

加藤 : リスナーの方に、分かりやすいのかどうか、ちょっと分からないんですけど、GitHubやGitLabのイシューにラベルを付ける機能があるんですけど、ラベルに対してユーザーが自由にカラーコードを指定できるので、そういう色を固定できない場面とかは使えそうですね。

菅原 : そうですね。ちなみにいまは、WCAG 2.2のアルゴリズムに基づいて色が選ばれているんですが、仕様によると、将来的には、アルゴリズムを選択できるように、機能が強化される見込みだ、というふうに書かれています。

注意点は、現状では、選ばれる色は、黒か白かの二択になるので、例えば背景色が中間的な明るさの色だった場合、黒と白、どちらを選んでも十分なコントラストにならない場合があります。

加藤 : なるほど。ブラウザが、選んでくれるからといって、その結果がアクセシブルであることが保証されるわけではない、ということですね。使う場面はしっかり考える必要がありそうですね。

菅原 : そうですね。contrast-color()関数はFirefox、Safariではサポートされていますが、Chrome、Edgeではまだサポートされていません。

参考リンク

scrollend イベント

菅原 : 最後は、scrollendイベントです。こちらもSafari 26.2でサポートされたことで、Baseline Newly availableになりました。

加藤 : はい。scrollendイベントは「スクロールが完全に止まったとき」に発生するJavaScriptのイベントですね。これまでは、スクロールが終わったことを検知するには、scrollイベントを監視して、えーsetTimeoutなどを使って、短い間隔でスクロール位置を監視しながら、「一定時間スクロール位置が変わっていなければ、スクロールが終わったとみなす」みたいな、少し精度の低い処理が必要でした。

菅原 : とくにmacOSでは、デフォルトで慣性スクロールが有効になっていましたし、scroll-behaviorでスムーススクロールをよく使うようになってきていたので、余計な処理をしなくて済むのはありがたいですね。

加藤 : そうですね。ちなみに、このscrollendイベントは、スクロール位置だけではなくて、ユーザーが画面から指を離したか、なども含めて判断するようになっているみたいです。

菅原 : なるほど。ブラウザが標準でサポートしてくれることで、スクロールまわりの実装がより楽に、かつ正確になりそうですね。

参考リンク

クロージング

菅原 : 以上、12月にWebプラットフォームに追加された新機能の紹介でした！今回の機能は、CSSの設計や、アクセシビリティ、ユーザー体験の向上につながるものが多くて、すぐにでも使ってみたくなりますね。

加藤 : はい、そうですね。@scopeとscrollendイベント、そして今回取り上げてないんですけど、LCPとINPをJavaScriptで計測するためのAPIとか、あとはhidden="until-found"とかはInterop 2025の注力エリアにもなっていて、いずれもBaseline Newly availableになっています。着実にInteropの成果が出てきているので、これは来年も期待したいなと思います！

菅原 : そうですね！あと、今回のエピソードで、今年のミツエーテックラジオは最後になりますかね。

加藤 : はい。そうですね。今年も聞いてくださった皆様、ありがとうございました！web.devで公開されている記事を、私たちなりに、少し深掘りしてお届けしてきた、このシリーズですけども、一旦今回で区切りにしようかなと思っています。来年はもう少し、ミツエーリンクス社内の取り組みだったり、スタッフにフォーカスを当てた回も増やしていけたらなと、計画中です。来年もぜひ聞いていただけると嬉しいです！

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

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

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

前の記事 #79「11月のWebプラットフォームの新機能」

2025年の記事一覧に戻る