2025年3月7日

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

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

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

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

加藤 : 加藤です！

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

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

popover属性のhint値

佐竹 : Chrome 133から、popover属性にhintを指定できるようになりました。これでpopover属性の値はauto、manual、hintの3つになりました。

加藤 : はい。これー値に何を指定するかで、ポップオーバーを開いたときに、他のポップオーバーを閉じるかどうかが違ってくるんでしたっけ？

佐竹 : そうですね。autoが指定されているポップオーバーを開くとその他すべてのポップオーバーが自動的に閉じられます。ほかのポップオーバーを自動で閉じたくない場合はmanualを指定します。そして今回追加されたhintにもautoと同じように自動で閉じる機能がついているのですが、hintの場合は、ほかのhintが指定されているポップオーバーのみを自動で閉じます。なので、もしautoやmanualが指定されている開いたポップオーバーがあれば、それは閉じずに開いたままになるということですね。

加藤 : Chrome for developersのBlogにGitHubのメニューでポップオーバーとツールチップを両方同時に表示する例が書かれてたんですが、これが分かりやすい例ですかね。

佐竹 : そうですね。ポップオーバーを入れ子にすると挙動が変わったりするのでそのあたりは注意しながら実装する必要がありそうですね。

popover属性のhintの指定は、Chrome、Edgeではサポートされていますが、Firefox、Safariではサポートされていません。

参考リンク

CSS の高度な attr() 関数

佐竹 : つぎはattr()関数のアップデートです。これまでattr()関数は、属性の値をただの文字列としてしか扱うことができず、またcontentプロパティでしか利用ができませんでした。Chrome 133から全てのCSSプロパティで使用可能になり、属性値を色や数値などのデータ型として認識できるようになりました。

加藤 : これChromeでリリースされたときに、いろいろな人がBlog記事を書いたり、Xのタイムラインがけっこう盛り上がっていたような印象がありますね。個人的には、あのーいろいろなことができるがゆえに、まだピンと来てないので、これだ！っていうユースケースを見つけたいなと思ってます。佐竹さんはなにか使用イメージわいてますか？

佐竹 : そうですね。使い所としては規則性がない値を設定したい要素に対して使用するのがいいと思っています。既にBlogなどで紹介されていた事例ですが、評価を５段階の星で表すものや、えー商品の色のバリエーション表示に使用するのは良い使い方だなと思います。評価を星で表す事例はHTMLで対象要素の属性に0から5に収まる数字を設定します。その数字をattr()関数で取得してbackgroundのlinear-gradientに設定します。あわせてmask-imageで5つの星の画像を設定するとHTML側で設定した数字に合わせて星の色が染まって見えるっていうことですね。色のバリエーション表示の事例は、商品に違う色があるときに色のバリエーションがリストになっている場合がありますよね。商品によって色は様々なので、HTML側でその色のカラーコードをリストの属性に設定します。attr()関数でカラーコードを取得してリストのbackground-colorに設定すると、リストにHTML側で設定したそれぞれの色が表示されます。あとはグリッドレイアウトで、コンテンツの内容に合わせて大きさを変える必要があるときにもこのattr()関数を使いたいですね。逆にattr()関数を使ってもいいけど、個人的にはあまり使わないかなと思っているのがカテゴリーごとに色を設定するものですね。カテゴリーという基準があるならそれに紐づけるというのが理由です。

高度なattr()関数はChrome、Edgeではサポートされていますが、Firefox、Safariではまだサポートされていません。

参考リンク

text-box、text-box-trim、text-box-edge

佐竹 : 最後に紹介するのは、text-box-trim、text-box-edge、そしてそれらをまとめて指定するショートハンドプロパティのtext-boxです。text-boxは、テキストの上下の余白をトリミングして、行ボックスのサイズを調整するCSSプロパティで、テキストの見た目のバランスを改善できます。

加藤 : ここでいう「テキストの上下の余白」ってどの部分を指しているんですか？

佐竹 : えー例えば、フォントを設計するときに、他の文字と重ならないように意図的に含まれる余白だったり、CSSのline-heightプロパティを指定することで生じる行間の余白などがありますね。えーフォントを作る際にベースラインと呼ばれる基準線がいくつかあって、text-box-edgeではどのベースラインでトリミングするかを指定できます。

加藤 : なるほど。英字フォントと日本語フォントだと、ベースラインの位置ってちょっとずれますよね。

佐竹 : そうなんですよね。仕様にはideographicという、CJKテキスト用のベースラインも指定できるように書かれていました。ただ、今回の実装には含まれていなかったので、日本語テキストにtext-box-trimを指定しても、期待通りの動作にはならない可能性があります。なのでそこは今後のアップデートに期待したいですね。

text-box-trim、text-box-edge、text-boxはChrome、Edge、Safariではサポートされていますが、Firefoxではまだサポートされていません。

参考リンク

クロージング

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

加藤 : はい、今回紹介しなかったものだと、Firefox 135とChrome 133でPublicKeyCredentialインターフェースにgetClientCapabilitiesメソッドが追加されたこと、Firefox 135ではJSON.parseを拡張するプロポーザルの実装が追加されたこと、えーまたChrome 133ではフロントエンドBlogでも紹介したScroll State Container Queriesの追加、動画の再生状態やフォーカス状態など要素の状態を保ったままDOMツリー内で要素を移動させるmoveBefore()メソッドが実装されたこと、えーファイルシステムの変更を監視するためのFile System Observerの追加などが紹介されていました。気になる方はweb.devの記事をご覧ください！

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

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

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

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

2025年の記事一覧に戻る