Chrome 88のここに注目!CSSのaspect-ratioプロパティでアスペクト比が簡単に、別窓はデフォルトでnoopenerに

Chrome 88が先週リリースされ、aspect-ratioプロパティがサポートされました。

CSSのaspect-ratioプロパティはボックスのアスペクト比を定義でき、画像や動画のアスペクト比を保持して配置したり、黄金比のレイアウトも簡単に実装できます。

aspect-ratioプロパティでアスペクト比が簡単に、別窓はデフォルトでnoopenerに

New in Chrome 88

Chrome 88のアップデート内容は、下記の動画をご覧ください。

  • 拡張機能の新しい仕様「manifest v3」がサポート。Chromeウェブストアにアップロードできます。これにより、安全性、パフォーマンス、プライバシーを向上。
  • aspect-ratioプロパティのサポート。
  • 非表示ページでJavaScriptタイマーを連鎖発生させている場合の動作を抑制。
  • target="_blank"があるアンカータグは、デフォルトでrel="noopener"が付いているものとして扱われる。
  • OSのマウスアクセラレーション機能をPointer LockAPIで無効化可能に。
  • addEventListenerはオプションとしてAbortSignalを受け取るようになり、abort()を呼び出すと、そのイベントリスナーが削除可能に。

target="_blank"のリンクをnoopenerすることにより、リンク先のページから元ページを操作するタブナッピング攻撃を防止します。もし自サイト内で別タブで開いたページから元ページを操作するサービスを提供している場合は、注意が必要です。
参考: Links to cross-origin destinations are unsafe

aspect-ratioプロパティの使い方

画像やiframeなどの要素は、固有のアスペクト比を持っています。例えば、幅(あるいは高さ)のみだけを定義するだけで、もう一つの値はアスペクト比を使用して自動的に算出されます。

aspect-ratioプロパティを使用すると、アスペクト比を明示的に定義できます。

aspect-ratioプロパティの値はwidth / heightで、1 / 1は正方形、長方形にしたい場合は2 / 13 / 1に、動画は16 / 9に、黄金比1.618 / 1にします。

プログレッシブエンハンスメントとして、aspect-ratioプロパティがブラウザでサポートされているかどうかを確認し、必要に応じてフォールバックを適用することもできます。CSSの新しいセレクタnotを使用すると、コードがすっきりします。

アスペクト比を使用して要素の幅(あるいは高さ)を定義すると、プロパティはその幅(あるいは高さ)の値を元にして高さ(あるいは幅)を計算します。要素の幅と高さの両方を定義した場合、アスペクト比は無視されます。

aspect-ratioプロパティの動作は、下記のデモページをご覧ください。

See the Pen
Aspect Ratio with Fallback
by Una Kravets (@una)
on CodePen.

aspect-ratioプロパティの対応ブラウザ

サイトのキャプチャ

aspect-ratioプロパティのサポート状況

2021年1月現在、サポートブラウザはChromeとEdgeのみですが、SafariとFirefoxもまもなくサポート予定となっています。

Firefoxでは、widthheightの属性を受け入れる置換された要素やその他の要素に適用されるaspect-ratioプロパティがUAスタイルシートに追加されています。

参考: Mapping width and height to aspect-ratio

sponsors

top of page

©2021 coliss