JavaScriptでCSSプロパティやCSSルールのサポート状況を確認できる`CSS.supports()`メソッドについて解説します。このメソッドを使用することで、ブラウザが特定のCSSプロパティやルールをサポートしているかどうかを簡単に判定できます。

CSS.supports()の基本的な使い方

`CSS.supports()`メソッドは、2つの異なる構文で使用できます：

// プロパティと値を個別に指定
CSS.supports(property, value)

// CSSルールを文字列で指定
CSS.supports(cssRule)

プロパティと値を個別に指定する方法

// display: flexのサポート確認
const isFlexSupported = CSS.supports('display', 'flex');
console.log(isFlexSupported); // true

// grid-template-columnsのサポート確認
const isGridSupported = CSS.supports('grid-template-columns', '1fr 1fr');
console.log(isGridSupported); // true

CSSルールを文字列で指定する方法

// display: flexのサポート確認
const isFlexSupported = CSS.supports('(display: flex)');
console.log(isFlexSupported); // true

// 複数のプロパティを組み合わせて確認
const isSupported = CSS.supports('(display: grid) and (gap: 1rem)');
console.log(isSupported); // true

実践的な使用例

条件分岐での活用

if (CSS.supports('display', 'flex')) {
    // Flexboxがサポートされている場合の処理
    element.style.display = 'flex';
} else {
    // Flexboxがサポートされていない場合の代替処理
    element.style.display = 'block';
}

モダンなCSSプロパティの確認

// aspect-ratioプロパティのサポート確認
if (CSS.supports('aspect-ratio', '16/9')) {
    element.style.aspectRatio = '16/9';
} else {
    // 代替手段を実装
    element.style.paddingTop = '56.25%';
}

複雑な条件での確認

const supportsModernLayout = CSS.supports('(display: grid) and (gap: 1rem) and (aspect-ratio: 16/9)');

if (supportsModernLayout) {
    // モダンなレイアウト機能が全てサポートされている場合の処理
    applyModernLayout();
} else {
    // 従来のレイアウト手法を適用
    applyFallbackLayout();
}

ブラウザ対応状況

`CSS.supports()`メソッドは、以下のブラウザでサポートされています：

  • Chrome 28以降
  • Firefox 22以降
  • Safari 9以降
  • Edge 12以降
  • Opera 15以降

まとめ

`CSS.supports()`メソッドは、JavaScriptでCSSのサポート状況を簡単に確認できる強力なツールです。これを使用することで：

  • ブラウザ間の互換性の問題に対処できる
  • プログレッシブ・エンハンスメントを実装できる
  • モダンなCSSプロパティの使用可否を動的に判断できる

特に新しいCSSプロパティやレイアウト機能を使用する際に、フォールバック処理を適切に実装するのに役立ちます。