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

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

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

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 / 1や3 / 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もまもなくサポート予定となっています。

• Release Notes for Safari Technology Preview 118
• Mapping the width and height attributes of media container elements to their aspect-ratio

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

参考: Mapping width and height to aspect-ratio