weekly blog 5/20 ~ 5/26

What's new in the web

Google I/Oで発表した内容をブログにまとめてくれたものです。

まずはAnnouncing the Web Platform Dashboardで、Web Platform Dashboardを作ったことが書いてあります。これは新しいJavaScriptやCSSがどのブラウザがどれくらい対応しているのかがわかりやすくまとまっているサイトになります。そしてこれはGoogleChrome/webstatus.devで、OSSになっています。

12個の機能

I/Oでは12個の機能を紹介したそうです。以下は箇条書きですがそれぞれ記載しました。

Size container queries
- 要素のコンテナーのサイズに基づいて要素にスタイル設定を適用することができる
- 似たものはMedia queryだが、これはviewportを元に計算を行う
- それに対して今回のContainer queryは、container-typeを指定した要素に対して、@containerを使用することで、そのコンテナーのサイズによって値の変更が可能になる
:has() selector
- 引数に入れたタグやクラスがある場合にのみスタイルを適用できるというもの
CSS grid layout subgrid
- gridレイアウト内でさらに細かな指定ができるようになった的な認識
- 抽象的なのは自分があんまりgridレイアウトを使ってこなかったのでわかってない
CSS Nesting
- sassみたいな書き方が標準でできるようになった
The HTML <search> element
- 文字通り検索系のことを行うときに使用する
- 今まで検索やフィルターを行おうとする際にマークアップする要素がなかったので追加された

Responsive video

<video>要素の中で<source>要素を使い、デバイスごとに適切な大きさで動画を表示できるようになった

<video>
  <source src="/sandbox/video-media/small.mp4" media="(max-width: 599px)">
  <source src="/sandbox/video-media/large.mp4">
</video>

The inert attribute
- inertを指定することで、以下のことを行うことができる。（MDNから参照）
  - ユーザーが要素をクリックしたときに click イベントが発行されないようにします。
  - 要素にフォーカスが当たらないようにして、 focus イベントが発生することを防ぎます。
  - 要素およびそのコンテンツをアクセシビリティツリーから除外することで、支援技術から隠します。
The color-mix() function
- 色を混合することができる
:user-valid and :user-invalid
- フォームの入力で制約検証に基づいて有効/無効を判断した結果をCSSで表現可能になった
- MDNのサンプルがすごいわかりやすい。とても使えそう
Compression Streams
- gzipに圧縮、展開を行うことができるJavaScirpt API
The Declarative Shadow DOM
- templete属性にshadowrootmodeを追加することでshadow rootとしてHTMLパーサーが検知してくれるようになった
- 以前はまではJavaScriptでしかshadow rootを生成することができなかった
  - SSR時、サーバーサイドで生成されたHTMLに対してshadow rootを表現する方法がなかったのでhydrationエラーになってしまう（間違っていたらすみません🙏）

The Popover API

HTMLにpopover関連のものが追加された

<button popovertarget="my-popover">ポップオーバーを開く</button>

<div popover id="my-popover">Hello World</div>

半分くらい知らなかったり、名前だけ知ってたけどあんまりわかっていなかったものの解像度が上がりました。

参考

https://web.dev/blog/new-in-the-web-io2024