Google Chrome 88が安定版に

検品に用いている主要ブラウザのアップデートについてお知らせします。

Google Chrome 88が安定版になり、デスクトップ版Chromeでバージョン88.0.4324.96がリリースされました（Chrome Releases: Stable Channel Update for Desktop）。

素晴らしいと思ったのが、CSSのaspect-ratioプロパティをサポートした点です。これはボックスに対しアスペクト比、つまり縦横比を指定できるものです。従来、iframe要素を用いて動画をWebページにレスポンシブに埋め込む際、動画の縦横比に応じた余白を生み出すdiv要素を設け、iframe要素はその子要素として縦横をそれぞれ目いっぱい引き伸ばしつつ絶対配置するというテクニックが広く採用されてきました。以下はそのテクニックのサンプルコードです。

<style>
.video{
  width: 100%;
  padding-bottom: 56.25%;  /*動画の縦横比が16:9の場合*/
  height: 0px;
  position: relative;
}
.video_content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
...
<div class="video">
  <iframe class="video_content" ...></iframe>
</div>

aspect-ratioプロパティにより、上記のテクニックでいうdiv.videoが不要となり、以下のサンプルコードで同じレイアウトを実現できます。

<style>
.video_content{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;  /*動画の縦横比が16:9の場合*/
}
</style>
...
<iframe class="video_content" ...></iframe>

AppleのSafariでも実装が進められているようですし、すべてのモダンブラウザでaspect-ratioプロパティがサポートされる日が今から楽しみですね。

このアップデートにはほかにも数多くの修正（セキュリティに関する修正については36件）と改良が含まれています。新たに追加された主要な機能については、New in Chrome 88  |  Web  |  Google Developersがわかりやすいでしょう。また、 DevToolsの変更点はWhat's New In DevTools (Chrome 88)  |  Web  |  Google Developersにまとめられています。

次のメジャーバージョン、Chrome 89のリリースは、Chromium Dashによると2021年3月2日の予定のようです。