2024年10月9日

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

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

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

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

加藤 : 加藤です！

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

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

details要素のname属性によるグループ化

菅原 : はじめに紹介するのは、 Firefox 130でdetails要素のname属性がサポートされたことです。複数のdetails要素に同じname属性をつけることでdetails要素がグループ化されて、1つを開くと同じグループの中の別のdetails要素は閉じる、ということがHTMLだけで実装できます。

加藤 : いわゆるアコーディオンのような使い方ができるという感じですね。ただ、複数のコンテンツを同時に見たい場合もあるかもしれないので、コンテンツ間の比較が必要ない場合に使うといいのかなと思います！あとは同じグループのdetails要素は、見た目上も近くに置いておくと、開いていたコンテンツが閉じたことがユーザーにも伝わりやすいのかなと思いました。

菅原：そうですね。新しい機能が使えるようになるとついついすぐ使いたくなるんですが、まずはそれが適しているか考えないといけませんね。details要素のグループ化はFirefoxでサポートされたことですべてのモダンブラウザで利用できるようになりました。

参考リンク

interpolate-sizeプロパティとcalc-size()関数

菅原 : 続いてcalc-size()関数とinterpolate-sizeプロパティです。これによりautoやmax-contentのような、コンテンツに依ってサイズが変わるようなキーワード指定がされていてもアニメーションができるようになります。

加藤 : これ、2つの使い分けはどんな感じになるんですかね？

菅原 :interpolate-sizeに関する議論をチェックしてもらいたいんですが、簡単に言えば特定の要素に対して個別に設定したいならcalc-size()で、サイト全体などよりグローバルな設定をしたいならinterpolate-sizeプロパティって感じですかね。あとcalc-size()は単純にアニメーションできるようにするだけではなく、その時のサイズを基準にした計算もできるようになるので、たとえばコンテンツのサイズを1.5倍にしたいっていうときにも使えますね。

加藤 : なるほど。interpolate-sizeを使って影響範囲を広げると、transition-propertyにallを指定しているところで意図しないアニメーションが起きたりしそうなんで、そのあたりはちょっと注意が必要ですかね。

菅原 : そうですね。interpolate-sizeプロパティは今のところ Chrome 129のみ、calc-sizeはChrome 129とEdge 129でサポートされています。

参考リンク

CSSスタイルクエリー

菅原 : 今日の最後のトピックはSafari 18でスタイルクエリーが実装されたことです。スタイルクエリーはCSSのstyle()関数記法で書かれた条件を評価してマッチする場合のみ適用するスタイルを書くことができるものですね。今はstyle()関数に書けるのはカスタムプロパティだけですけど、将来的にはたとえばbackground-colorプロパティの値がblackだったらフォントの色を白にするみたいなことができるようになるみたいですね。

加藤 : これまでの「このクラスがついているときはこの見た目にする」という考え方ではなくて「この背景色に合わせるにはこの見た目にする」っていう考え方になるのかなーと思うので、CSSの設計手法にも影響を与えるかもしれないですね。

菅原 : そうですね。これまでよりロジカルになって可読性も上がるのかなーと思っています。スタイルクエリーはChrome、Edge、Safariではサポートされていますが、Firefoxではまだサポートされていません。

参考リンク

クロージング

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

加藤 : 今回紹介したもの以外だと、Chromeのバージョン129で日時データの多言語対応やフォーマットができるIntl.DurationFormatがサポートされて、Firefoxのバージョン130ではWeb Codecs APIがサポートされたことが取り上げられていました。気になる方はweb.devの記事を読んでみてください！

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

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

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

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

前の記事 #58「Figma使ってみてどうですか？」

2024年の記事一覧に戻る