CSS 経由で JS にパラメータを渡す方法

1. CSSを通す必要がある背景

CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウスの動作がサポートされているかどうか、ダークモードかどうか、省電力モードかどうかなど、多岐にわたります。

例えば、最近よく話題になるダークモードやダークテーマなど。

@media (優先カラースキーム: 暗い) {
    /* ダークモード、ダークテーマ*/
}
@media (優先カラースキーム: 明るい) {
    /* ライトテーマ */
}

CSS は自動的に検出できますが、場合によっては、JS で異なるインタラクションロジックを実装したり、さまざまなシステムテーマに応じて異なるコンテンツをレンダリングしたりする必要もあります。

何をするか？今のところシステムモードを検出するための既製の JS API は存在しないようなので、CSS でパラメータを渡すことに頼るしかありません。これは典型的なシナリオであり、同様のシナリオが多数あります。

例えば：

1. CSSとJSの境界線の幅の一貫性

レスポンシブレイアウトを行う際には、多くの場合、クリティカルな幅の値を設定する必要があります。たとえば、デバイスの幅が 640 ピクセル未満の場合はモバイル端末に入ったと見なします。また、幅が 480 ピクセル未満の場合は、モバイル端末レイアウトを使用します。

このとき、JavaScript コードも、この臨界幅に基づいて異なるインタラクション効果を実装する必要があります。特定の値より大きい場合は、PC レイアウトでのインタラクションであり、特定の値より小さい場合は、モバイルレイアウトでのインタラクションです。

実際の開発では、多くの人が CSS コードと JS コードに関する規則を作成します。たとえば、次のようになります。

@media スクリーンと (最大幅: 480px) {
    /* 小さな画面幅に対応したレスポンシブレイアウト */
}
画面の幅が480以下の場合
    /* 画面幅が狭い場合のインタラクション動作 */
}

この規則に問題がある場合、プロジェクトの一定期間後に、この重要な幅に問題があることがわかります。たとえば、携帯電話が横長モードの場合、幅は 480 px を超えますが、これはモバイル端末のレイアウト方法でもなければならないため、開発者はそれを 640 px に変更しました。

@media スクリーンと (最大幅: 640px) {
    /* 小さな画面幅に対応したレスポンシブレイアウト */
}

結果的に、JS コードにもこの判定があることを忘れるとバグが発生します。

JavaScript コードでの画面判定が、当初の実装時に CSS パラメータに基づいていた場合、このようなメンテナンスの問題は発生しなかったでしょう。

2. ブラウザは :hover 疑似クラスのインタラクションをサポートしていますか?

デスクトップ、モバイル、IoT デバイスで共通となることを期待して、いくつかの UI コンポーネントを開発します。

デスクトップ上の一部のコンポーネントは、mouseenter イベントまたは mouseover イベントを使用してエクスペリエンスを実現すると非常に優れており便利です。しかし、これらをモバイルデバイスやその他のタッチスクリーンデバイスで使用すると、ホバーというものが存在しないため、世界的に問題が生じます。

幸いなことに、CSS コードには、ブラウザーが :hover 疑似クラスのインタラクションをサポートしているかどうかを判断するためのメディアクエリがあります (このクエリについては特別な記事の紹介があります。ここをクリックしてください)。

@media (任意のホバー: なし) {
    /* デバイスはホバーイベントをサポートしていません*/
}

残念ながら、直接判断するためのそのような API は JS にはありません。おそらく多くの人は、ブラウザが touchstart などのイベントをサポートしているかどうかを判断することでこの判断を下すでしょう。残念ながら、この判断方法は不正確です。多くのタッチデバイスはマウスデバイスにも接続できるため、ホバーイベントも適切にサポートされるはずです。

そこで、最終的な方法としては、CSS メディアクエリを使用して判定を行い、判定結果を js にパラメータとして渡すという方法があります。

さて、ここでの疑問は、これら 3 つのケースを踏まえて、CSS を介して JS コードにパラメーターを渡すにはどうすればよいかということです。

2. CSSパラメータをJSに渡す方法

通常、CSS から JS にパラメータを渡すには、次の 2 つの方法を使用します。

1. コンテンツ疑似要素コンテンツパラメータの受け渡し

例えば：

@media (任意のホバー: なし) {
    本文::前{
        コンテンツ: 'hoverNone';
        表示: なし;
    }
}

この時点で、JS コードを使用して body 疑似要素によって渡される情報を取得できます。

var strContent = getComputedStyle(document.body, '::before').content;
// strContent の結果が 'none' の場合、ホバーがサポートされていることを意味します
// strContent の結果は '"hoverNone"' です。これはホバーがサポートされていないことを意味し、クリック イベントに置き換える必要があります。

この記事では、上記の CSS コードを事前に埋め込みます。そのため、Chrome ブラウザでコンソールを開き、モバイルプレビューモードに入り、JS テストを入力すると、CSS によって渡された文字列情報が JS によって取得されていることがわかります。

この時点で、content 属性と組み合わせた ::before および ::after 疑似要素に基づいて、CSS で渡される情報を取得できます。

このパラメータ渡し方法の利点は、比較的互換性が良いことですが、欠点も明らかです。つまり、渡すパラメータ値の数が限られていることです。一度に複数の値を渡したい場合は、少し難しくなります。このとき、CSSカスタム属性の助けを借りて、次の方法を試すことができます。

2. CSSカスタムプロパティ（CSS変数）パラメータの受け渡し

早速コードを見てみましょう。CSS カスタムプロパティ (CSS 変数) を使用すると、ダークモードとライトモードの開発とメンテナンスが比較的簡単になります。さらに、この CSS カスタムプロパティを使用して、JS のパターン認識を行うこともできます。

：根 {
    --モード: '不明';
}
@media (優先カラースキーム: 暗い) {
    /* ダークモード */
    ：根 {
         --モード: '暗い';
         --colorLink: #bfdbff;
         --カラーマーク: #cc0000;
         --colorテキスト: #ffffff;
         --colorLight: #777777;
    }
}
@media (優先カラースキーム: 明るい) {
    /* ライトテーマ */
    ：根 {
         --モード: 'ライト';
         --カラーリンク: #34538b;
         --カラーマーク: #cc0000;
         --colorテキスト: #000000;
         --colorLight: #cccccc;
    }
}

JS検出コード:

var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// モード結果が「"dark"」の場合、夜間テーマ、ダークモード、ダークスタイル、目の保護モードを意味します。
// モードの結果がデフォルトモード以外です

たとえば、私のコンピューターで実行した結果は次のようになります。