2024年11月6日

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

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

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

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

佐竹 : 佐竹です！

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

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

テキストフラグメント

加藤 : まずはFirefoxのバージョン131でテキストフラグメントがサポートされました。テキストフラグメントはURIフラグメントの1つで、ページ内にある特定のテキストに直接リンクできるようにするものです。 URLの末尾にハッシュ記号（#）とフラグメントディレクティブ（:~:）とテキストディレクティブ（text=）を付けて、そのあとに示したいテキストを指定すると、指定したテキストまでスクロールしたり、テキストがハイライトするようになります。

佐竹 : テキストフラグメントはリモートワークの時に、喋りながら、このページの、このテキストの部分を共有したいっていうときにチャットに貼ったりして使っています。これまでだと、ページのURLと対象のテキストをそれぞれ共有していたんですね。そうすると相手の人にページを開いてもらってから、テキストを検索してもらうっていう段階を踏まないといけなかったので、会話中に少しラグを感じていたんですね。でも、これがこのテキストフラグメントで減ったように感じています。

加藤 : そうですね。ちなみにChromeではテキストを選択して右クリックで「選択箇所へのリンクをコピー」を選ぶと、選択しているテキストをテキストフラグメントとして含めたURLをクリップボードにコピーしてくれるので便利ですね！他のブラウザだとGoogleが提供してくれている「Link to Text Fragment」っていう拡張機能を使うと同じことができます。

佐竹 : あ、その拡張機能ってChromeでしか使えないと思ってたんですけど、他のブラウザでも使えるんですね。

加藤 : そうですね。またFirefoxのバージョン131ではCSSの::target-text疑似要素もサポートされました。これは先ほどのテキストフラグメントで指定したテキストに合致する部分のスタイルを変更したいときに使うことができます。

テキストフラグメントはすべてのモダンブラウザでサポートされています。::target-text疑似要素はChrome、Edge、Firefoxではサポートされていて、Safariはテクノロジープレビューの202で実装されました。

参考リンク

fetchPriority

加藤 : つづいてFirefoxのバージョン132ではfetchpriority属性がサポートされました。fetchpriority属性はリソースを読み込む優先度を指定するための属性です。ブラウザは内部でどのリソースを優先して読み込むか最適化をしてくれていますが、場合によっては私たちが想定する優先度とギャップがあるかもしれないので、そういう時に使うとよいのかなと思います。

佐竹 : そうですね。コアウェブバイタルのLCPに影響するリソースは優先して読み込みたいときがあるので、そういう時に使うと効果的かなと思います。あとは優先度を上げるだけではなくて、優先度を下げたいときっていうのもfetchpriority属性は使えそうですよね。

加藤 : はい。そうですね。ただfetchpriority属性は、link要素、img要素、script要素で使用できる属性なんですけど、ページ内のすべてのリソースにおける優先度を決めるわけではなく、同じデスティネーションを持つリソース同士の優先順位を決めるものなので、そこは注意しておくとよいかもしれません。

fetchpriority属性はFirefoxのバージョン132でサポートされたことですべてのモダンブラウザで利用できるようになりました。

参考リンク

CSSネスティング

加藤 : 今回の最後のトピックはCSSネスティングについてです。CSSネスティング自体はすべてのモダンブラウザでサポートされていましたが、CSSOMにCSSNestedDeclarationsというインターフェースが追加で実装されています。このインターフェースが実装される前と後では同じCSSでも一部挙動が変わるかもしれないので、注意が必要かもしれません。

たとえば、複数のスタイル宣言の間に@mediaルールを入れ子で宣言した場合、CSSNestedDeclarations実装前は、ブラウザが内部的に@mediaルールが最後に来るように並べ替えてから実際に反映するスタイルを決めていたんですけども、CSSNestedDeclarations実装後はCSSに書いた順番のままスタイルを決めることになります。

佐竹 : あのーこれ、エディターズドラフトの仕様になぜこのルールが必要なのかが書いてあったんですけど、前の仕様だとネストブロックの中で擬似要素を使う場合に不都合があったり、今後実装されるかもしれない@mixin のような新しい機能が実装されたときのことを考えたりすると、宣言の順序は変えずに扱ったほうがよいだろう、ということで仕様が変わったみたいですね。

加藤 : うん、そうですね。web.devの別の記事では@starting-styleをネストして書くときは通常のスタイル宣言よりも後に書く必要がある、っていうことも書かれていて、これはなんか確かに先に書きたくなるよなって思っちゃいましたね。

佐竹 : そうですねー。

加藤 : はい。CSSNestedDeclarationsはChrome、Edge、Firefoxの最新版では実装されていますがSafariではまだサポートされていません。

参考リンク

クロージング

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

佐竹 : 今回紹介したもの以外だと、FirefoxでCHIPSがサポートされたことだったり、Safariの最新版でdisplay:contents;に関するアクセシビリティ関係の修正があったことなどが紹介されていましたので、気になる方は記事をご覧ください！

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

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

それでは今日はこの辺で！ありがとうございましたー！

佐竹 :　ありがとうございました！

2024年の記事一覧に戻る