2024年7月12日

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

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

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

加藤 : 皆さん、こんにちは！ミツエーリンクスの加藤です！ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はweb.devに公開されている記事から、5月にWebプラットフォームに追加された新機能をご紹介します。

6月の内容もすでに公開されていますが、今回は1つ前の5月の内容です。また各機能のブラウザのサポート状況なども紹介していきますが、7/8時点の内容ですのでご注意ください。

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

CSS Anchor Positioning

まず1つ目はCSS Anchor Positioningです。CSS Anchor Positioningはある要素をほかの要素に対して相対的に配置することができるプロパティ群です。位置を相対的に配置する、と聞くとpositionプロパティを思い浮かべるかもしれません。positionプロパティとの違いはいくつかありますが、CSS Anchor Positioningは2つのHTML要素が親子関係にない場合でも、相対的な位置指定ができます。

CSS Anchor Positioningはdialog要素やpopover属性などのトップレイヤーな要素と組み合わせると非常に効果的です。トップレイヤーな要素は他の要素とは別のレイヤーに配置されるため、ある要素に対して相対的な位置指定をしたい場合はJavaScriptによる位置の計算が必要でしたが、CSS Anchor PositioningではCSSだけで同じようなことが実現できるようになります。

CSS Anchor PositioningはGoogle Chromeのバージョン125から利用可能になりましたが、Firefox、Safariではまだ利用できません。

参考リンク

CSS Stepped Value Functions—round(), mod(), and rem()

つづいて、CSS Stepped Value Functionsです。CSS Stepped Value functionsはround()関数、mod()関数、rem()関数の3つのCSS関数の総称で、CSSで段階的な値の指定をしたい場合に使える関数です。

round()関数は値を四捨五入で丸め込むことができる関数です。例えば要素のサイズを10px刻みのサイズに制限したい場合、round()関数を使えばもともとのサイズが5pxから14pxの要素は10pxに、もともとのサイズが15pxから24pxの要素は20pxに、というように段階的な値を指定することができます。また、mod()関数は第1引数を第2引数で割った値を返し、rem()関数は第1引数を第2引数で割ったときの余りを返します。

CSS Stepped Value Functionsの3つのCSS関数はすべてのモダンブラウザの最新版で利用できます。

参考リンク

light-dark() function

つづいてlight-dark()関数です。light-dark()関数は、ライトモードとダークモードで色を切り替える際に使える関数です。これまでテーマごとに色を変える場合はprefers-color-schemeを使う必要がありましたが、メディアクエリを使わずに色を切り替えることができます。

light-dark()関数はすべてのモダンブラウザの最新版で利用できます。

参考リンク

Screen Wake Lock API

つづいてScreen Wake Lock APIです。一定時間デバイスの操作がない場合は、画面を暗くしたり、デバイスをスリープ状態、ロック状態にする設定になっている方が多いと思います。この設定はバッテリーの電力消費を抑えるためにとても有益な機能ですが、たとえばカーナビや料理のレシピなど、ユーザーが長時間操作しないことが想定されるWebアプリケーション、またWebサイトではこの設定がかえって邪魔になってしまうことがあります。Screen Wake Lock APIを利用することで、自動的なスリープを防ぐことができます。

Screen Wake Lock APIはすべてのモダンブラウザの最新版で利用できます。

参考リンク

Compute Pressure API

つづいてCompute Pressure APIです。 Compute Pressure APIはCPUなどのリソースの負荷状態を観測できるAPIです。ゲームやテレビ会議アプリなどでは、画質やフレームレートが高ければ高いほどデバイスに負荷がかかり、コマ落ちしてしまうことがあります。Compute Pressure APIで負荷状況を見ながら動的に画質やフレームレートを下げるなどの処理をすることで、画質と動作パフォーマンスのバランスを取ることができます。

Compute Pressure APIはGoogle ChromeとMicrosoft Edgeのバージョン125から使えるようになりましたが、Firefox、Safariではまだ利用できません。

参考リンク

@starting-style rule

最後が@starting-style ruleです。@starting-style ruleはトランジションが開始する直前の状態を定義することができる@ルールです。もともと表示されている要素のスタイルを変化させるだけであれば、@starting-style ruleがなくてもトランジションできますが、@starting-style ruleはもともと表示されていなかった要素に対してトランジション開始直前のスタイルを指定できます。たとえばJavaScriptで動的にDOMを追加しつつアニメーションしながら表示させたり、非表示になっているdialog要素やpopoverな要素などをアニメーションしながら表示するというようなことが可能になります。

@starting-style ruleはGoogle ChromeとMicrosoft Edgeのバージョン117、Safariの17.5から使えるようになりました。Firefoxではバージョン127のNightlyビルドで実装されています。

参考リンク

クロージング

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

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

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

2024年の記事一覧に戻る