aspect-ratioを@supportsでフォールバック実装する

CSSプロパティのaspect-ratioは一部のブラウザで非対応なので、スタイルを当てるために別途実装が必要な場合があります。その実装方法として、@supportsを利用した方法をご紹介します。

後述しますが、@supportsはIE11で非対応なので、IE11をサポートする場合は使えません。

aspect-ratioについて

aspect-ratioはCSSのプロパティで、要素に対してアスペクト比を設定することができます。
例えば、画像でアスペクト比を固定したい場合に役立ちます。レスポンシブにアスペクト比を固定してくれるので余計な設定をする必要がありません。

@supportsについて

@supportsはCSSのアットルールで、機能クエリと呼ばれます。
CSSのプロパティがブラウザにサポートされているかによって、宣言を指定することができます。

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

ブラウザの互換性

aspect-ratio@supportsの互換性を見ていきます。互換性は「Can I use」で確認します。
aspect-ratioは一部のSafariで使えませんが、@supportsを利用して実装できることが分かります。

・aspect-ratio [https://caniuse.com/mdn-css_properties_aspect-ratio]

・@supports [https://caniuse.com/css-featurequeries]

実装方法

例として Sass の mixin を利用しています。

@mixin aspectRatio($width, $height) {
  aspect-ratio: $width / $height;

  @supports not (aspect-ratio: auto) { 
    position: relative;

    &::before {
      content: '';
      float: left;
      padding-top: calc(($height / $width) * 100%);
    }
    &::after {
      content: '';
      clear: both;
      display: block;
    }
    > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

アスペクト比 16:9 を設定したい場合は、このように使います。

@include aspectRatio(16, 9)

解説

@mixin aspectRatio($width, $height) {

アスペクト比を設定するので、widthheight を受け取るように定義しています。

aspect-ratio: $width / $height;

aspect-ratioのスタイルを定義しています。サポートされているブラウザではこちらのスタイルが当たります。

@supports not (aspect-ratio: auto) { 
  ...
}

@supports not ()を使ってaspect-ratioが使えない場合のスタイルを定義しています。サポートされていないブラウザではこちらのスタイルが当たります。

まとめ

aspect-ratioを@supportsでフォールバック実装する方法についてご紹介しました。
@supportsはaspect-ratio以外にも応用することができるので、機会があれば記事にしようと思います。

参考：
https://github.com/takamoso/postcss-aspect-ratio-polyfill
https://iwb.jp/css-properties-aspect-ratio-mixin-sass/