2024年8月22日

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

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

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

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

菅原: 菅原です！

加藤: ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。えー菅原さん今回は初登場ですね！

菅原: はい。私はおととしにミツエーリンクスに入社して、今回ミツエーテックラジオに参加するのは初めてになります、よろしくお願いします。普段はミツエーリンクスサイトの更新などを担当しています。

加藤: はい！よろしくお願いします！今回はweb.devに公開されている7月にWebプラットフォームに追加された新機能をご紹介します。各機能のブラウザのサポート状況なども紹介していきますが、8月6日時点の内容ですので、ご注意ください。

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

CSS relative color syntax

加藤: まず1つ目はCSSで相対的な色の指定ができるCSS relative color syntaxです。これまでCSSで色を指定する場合は表示したい色を示すカラーコードを直接指定していましたが、relative color syntaxは特定の色を各成分に分解してそれぞれ調整することで、元の色から少し明るい色を作ったり、元の色に対する補色を作ったりということが簡単にできるようになります。rgb()関数、hsl()関数などの各色空間用の関数や、color()関数の引数にfromキーワードを含めることで、特定の色を基準とした新しい色をつくる、というのが基本的な使い方ですね。

菅原: たとえばテキストにマウスオーバーしたときのテキストの色を少し薄くする実装をするときは、これまでは元の色と少し薄い色、両方のカラーコードを用意するか、透明度を調整して少し薄くするみたいな実装をしていたんですが、それだと色が増えて管理が大変になってしまったり、透明度で調整すると背景色の影響を受けていたんですよね。そういう細かいところを相対的な色指定が解決してくれるのかなと思います。

ただ、デザインを見ただけでは、デザインで使われている色が相対的な関係にあるかというのは見てわかるものではないので、デザイナーさんとのコミュニケーションをする必要がありそうですね。

加藤: うん、そうですね。CSS relative color syntaxはFirefoxのバージョン128でサポートされたことにより、すべてのモダンブラウザで利用できるようになりました。

参考リンク

content プロパティの代替テキスト

加藤: 続いてはCSSのcontentプロパティに対する代替テキストに関するアップデートです。contentプロパティにはurl()関数を使うことで画像を表示したり、アイコンフォントを使って装飾的な画像を表示したりすることもできますが、コンテンツに対する代替テキストをセットで指定することもできます。これはスラッシュ区切りでテキストを指定する感じですね。

菅原: 当社ではcontentプロパティに画像を指定しているケースはあまり見たことがないですね。アイコンフォントも社内のスタイルガイドでは利用を原則禁止するルールになっているので、この代替テキストの機能を積極的に使う機会というのはほとんどないのかなと思います。

加藤: うん、そうかもしれないですね。content プロパティの代替テキスト指定は、Firefox 128、Safari 17.4でサポートされたことですべてのモダンブラウザで利用できるようになりました。ちなみにChromeのバージョン127では単一の文字列だけではなくattr()関数のようなCSS関数も指定できるようになっていて、当社のアクセシビリティBlogにて公開された「CSS生成コンテンツに対する代替テキストの指定」という記事に注意点など含めて書いてありますので、あわせてご覧いただければと思います。

参考リンク

font-size-adjustプロパティ

加藤: 続いてfont-size-adjustプロパティです。font-size-adjustはフォントのアスペクト値を設定するためのプロパティです。各フォントのアスペクト値は、基本的にはそのフォントで小文字の「x」を表示した時の表示の高さをフォントサイズで割ることで計算できます。アスペクト値はフォントによって値が違っていて、2つのフォントのアスペクト値の差が大きいほど、画面に表示されたときのサイズの差も大きくなるので、フォールバックフォントが意図せず読みづらくなってしまうということが起きていました。font-size-adjustを指定して、アスペクト値を近づけることで、複数のフォントの見た目上のサイズを近づけることができます。

菅原: はい。アスペクト値は小文字の「x」の高さで決まると説明いただきましたがfont-size-adjustにメトリックを指定することで何を基準にアスペクト値を調整するか変更することができます。

たとえばic-widthやic-heightを指定することで「水」という漢字の幅や高さを基準にできるので、日本語の場合はメトリックを指定しておくとよいかもしれません。

加藤: はい。font-size-adjustはGoogle Chromeのバージョン127でサポートされたことで、すべてのモダンブラウザで利用可能になりました。

参考リンク

iframe内のView Transitionサポート

加藤: 続いて、View Transitionに関するアップデートで、ページ内にiframeがある場合にそのiframeが同じオリジンであれば、メインフレームとiframe内のView Transitionを同時に行えるようになったようです。

菅原: はい。これ手元で試したんですが、同時にView Transitionを実行しようとするとクラッシュしてしまうので、何が正解なのかはちょっとつかめてないんですよね。

以前はiframe内のコンテンツでView Transitionを実行しても、同じタイミングでメインフレーム側の遷移が実行されている場合、iframe側の遷移はスキップされていたようですが、今後は両方のトランジションが実行されるようになるみたいですね。

ちなみにweb.devには記載がありませんが、iframe内でマルチページのView Transitionも使えるようになったようです。

加藤: はい。仕様にはiframeに関する詳細な情報がのっていないので、他のブラウザの実装がどうなるかは注意しておくとよいかもしれません。

参考リンク

スクロールコンテナのデフォルトキーボードフォーカス

加藤: 続いてChromeのキーボードフォーカスに関する変更です。スクロール可能な要素で、かつその要素内にフォーカス可能な子要素がない場合は、スクロール可能な要素がデフォルトでフォーカス可能になるという変更がありました。これまではサイト側でtabindex属性を明示的に指定しないとフォーカスを当てられなかったので、tabindex属性がない場合はスクロール可能な要素をキーボードだけでスクロールする手段がなかったんですよね。

菅原: そうですね。Firefoxだと子要素にフォーカス可能な要素があってもなくてもスクロール可能な要素はフォーカスされるので、Chromeとは微妙な違いがありますね。

ちなみにこの動作がデフォルトになったことで壊れてしまうサイトがある場合にはサイト側でオプトアウトができますが、オプトアウトのためのトライアルの期間が、来年1月にリリース予定の Chromeのバージョン132までのようなので、それまでに対応が必要になりそうです。

加藤: はい。スクロール可能な要素のキーボードフォーカスはChrome、Edge、Firefoxでは有効になっていて、Safariでは有効になっていません。

参考リンク

@propertyルール

加藤: 続いては@propertyルールです。@propertyはCSSカスタムプロパティをより詳細に定義することができる@ルールです。通常のカスタムプロパティは値を設定するだけですが、@propertyではそのプロパティに指定できる値が色を示すのか、数値を示すのか、パーセントを示すのか、といった構文を指定したり、そのプロパティが子要素に継承されるかどうか、そしてプロパティの初期値もセットで指定することができます。

菅原: はい。これまでカスタムプロパティに指定した値は、内部的には単なる文字列として認識されていたので、2つの値をトランジションできなかったのですが、@propertyルールで構文を指定すれば、プロパティの値を変えるだけでアニメーションが可能になりますね。

加藤: はい。これまでより記述がシンプルになりそうでいいですよね。@propertyルールはFirefoxのバージョン128でサポートされたことで、すべてのモダンブラウザで利用可能になりました。

参考リンク

ArrayBufferとSharedArrayBuffer

加藤: 続いてはArrayBufferとSharedArrayBufferに関するアップデートです。ArrayBufferは基本的に長さが固定で増減させることはできませんでしたが、コンストラクタにmaxByteLengthオプションを渡すことで、そのArrayBufferが変更可能な最大の長さを指定することができ、その範囲で増減させることができるようになります。長さを変更する場合はArrayBufferのresize()メソッドを使用する感じですね。SharedArrayBufferも同様にコンストラクタにmaxByteLengthを指定することで長さを変更することができます。

菅原: これArrayBufferは「Resizable」でSharedArrayBufferは「Growable」と表現されているんですが、「Resizable」は増やすだけでなく減らすこともできる一方で、「Growable」は増やすことしかできないので、そういう違いがあることは知っておくとよいかもですね。

加藤: はい。ありがとうございます。ArrayBufferとSharedArrayBufferの長さに関する機能はFirefoxのバージョン128でサポートされたことで、すべてのモダンブラウザで利用可能になりました。

参考リンク

flexbox propertiesのsafeキーワード

加藤: 最後がFlexboxのプロパティに関するアップデートで、align-itemsやjustify-contentなど、フレックスアイテムの配置を決めるプロパティにsafeキーワードを指定できるようになりました。たとえばjustify-contentプロパティにcenterを指定した場合、コンテンツがボックスからはみ出す場合も常に中央ぞろえになるので、コンテンツの両端がボックスから見切れてしまうことがありました。今回追加されたsafeキーワードをcenterの前に付けるとコンテンツがはみ出す場合は、先頭から表示されるようになって、えーコンテンツが収まる場合は中央ぞろえになります。

菅原: はい。えーと、この変更に関してはWebkitのブログで解説されていて分かりやすかったので、そちらも見てもらえると理解が深まると思います。

加藤: はい。FlexboxにおけるsafeキーワードはSafariのバージョン17.6でサポートされたことで、すべてのモダンブラウザで利用可能になりました。

参考リンク

クロージング

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

菅原: 相対的な色指定、font-size-adjustに、@property、そして最後のFlexboxのsafeキーワードはInteropの注力分野でもあるので、着実に進んでいる感じがありますね。来月も楽しみです！

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

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

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

菅原: ありがとうございました！

2024年の記事一覧に戻る