CSSで「条件が成立していれば表示する、成立していなければ隠す」といった処理を組むとき、状態をどう表現するかは読みやすさに関わります。チェックボックスの選択状態をセレクターだけで追い続ける代わりに、true／falseという名前の値へ置き換えると、何を条件としているのかを明示できます。ただし、CSS全体に自由に使える真偽値型が備わっている、という意味ではありません。
「true or false in CSS」が紹介しているのは、カスタムプロパティに二つのキーワードを保存し、コンテナースタイルクエリでその値を調べる実装です。新しい型が追加されたという発表ではなく、CSSの仕組みを組み合わせて真偽値に似た状態管理を行う方法として捉えると、用途と限界を判断しやすくなります。
確認できるポイント：真偽値型ではなく、二つのキーワードで状態を表す
原文は、CSSでtrue／falseを扱う例として、まず@propertyのinherits設定を挙げています。この設定では、登録したカスタムプロパティを継承させるかどうかをtrueまたはfalseで指定します。一方、状態を表す変数として使いたい場合は、–isTrueOrFalseのようなカスタムプロパティにtrueまたはfalseを値として設定します。
@propertyのsyntaxに「true | false」を指定すると、登録するカスタムプロパティの値をtrueまたはfalseに制限できます。ここでのtrueとfalseは、許可する値として列挙したキーワードです。汎用の真偽値型を宣言しているわけではなく、状態を二択に絞ったカスタムプロパティを作っています。この違いを押さえることが、機能を過大に解釈しないための出発点です。
原文の登録例は、@property –isTrueOrFalse { syntax: “true | false”; initial-value: false; inherits: false; }という構成です。syntaxが許可する値、initial-valueが初期値、inheritsが継承の有無を担います。「初期状態はfalseで、子要素へ自動的には引き継がない」という設計を、一つの登録定義で表しています。
保存した値を条件として読む例は、@container style(–isTrueOrFalse: true)です。これは、対象となるコンテナーのカスタムプロパティがtrueである場合に、内部のスタイルを適用する形です。値を保存する役割と、その値に応じて見た目を変える役割を分けることで、状態と表示規則の関係を追いやすくします。
適用条件：値の設定場所と、問い合わせるコンテナーをそろえる
この方法では、true／falseという表記だけでなく、どの要素に値を設定するかが重要です。原文の商品フィルターでは、バックパック用の–isBackpackと、ダッフルバッグ用の–isDuffelを登録します。どちらも初期値はfalseで、inheritsはfalseです。そのうえで、チェックボックスが選択されたときに祖先要素である:rootへtrueを設定します。
選択状態の検出に使うのは:has()です。たとえば:root:has(#isBackpack:checked)に相当する条件で、バックパックのチェックボックスが選択されていることを調べ、–isBackpackをtrueにします。ダッフルバッグにも同じ考え方を適用します。チェックボックスの状態を直接表示規則へ結び付けるのではなく、いったん意味の分かる状態名へ置き換える構成です。
原文の例では、:rootにcontainer-name: rootを設定し、名前付きコンテナーのスタイルクエリでフィルターの状態を参照しています。この指定は、値を設定した:rootと、商品一覧の内部にある表示対象との位置関係に関わります。継承させない登録プロパティを深い子孫側から調べるため、どのコンテナーを見るのかを名前で示しています。
原文では、対象要素の直接の親にカスタムプロパティを設定する場合、またはそのプロパティを継承させる場合には、コンテナー名の指定は不要と説明しています。したがって、例を移植するときにcontainer-nameだけを機械的に追加・削除するのは避けたいところです。値の設定場所、継承の設定、問い合わせ対象の三つを一組として確認する必要があります。
また、原文は商品一覧の範囲を区切るために@scopeを使っていますが、この例で@scopeは必須ではないと明記しています。状態を判定する仕組みと、スタイルを適用する範囲を整理する仕組みは別です。導入時は、どの記述が条件判定に必要で、どの記述が構成を分かりやすくするためのものかを分けて読むと、不要な複雑化を防げます。
読者への影響：商品フィルターの条件を意味のある名前で読める
原文の具体例は、バックパックとダッフルバッグを二つのチェックボックスで絞り込む商品一覧です。片方だけを選択したら該当する種類だけを表示し、両方を選択したら二種類を表示します。両方を選んだ場合に「両方の分類に同時に属する商品」だけを残すのではなく、「バックパックまたはダッフルバッグ」を残す点が、条件を読むうえで重要です。
- –isBackpackがtrue、–isDuffelがfalseなら、バックパック以外を非表示にします。
- –isBackpackがfalse、–isDuffelがtrueなら、ダッフルバッグ以外を非表示にします。
- 両方がtrueなら、バックパックでもダッフルバッグでもない商品を非表示にします。
- 両方がfalseの場合に対応する非表示規則は、原文の例では設けられていません。
両方を選択した条件では、@container root style(–isBackpack: true) and style(–isDuffel: true)という形で二つの状態を確認します。その内側でli:not(.backpacks, .duffels)にdisplay: noneを指定し、二種類のいずれにも該当しない項目を隠します。条件式のandは「二つのフィルターが選択されている」という意味であり、残す商品の分類条件と混同しないことが大切です。
この構成の実務上の利点は、選択状態に名前を与えられることです。チェックボックスのIDや:checkedの組み合わせを表示規則の各所で追う代わりに、「バックパックのフィルターが有効か」という意図をプロパティ名から読み取れます。原文も、true／falseを使うことでフィルターの状態と複合条件が明確になる点を説明しています。
ただし、二つの状態へ名前を付けても、表示ルールの設計そのものがなくなるわけではありません。原文でも、片方だけが有効な場合と両方が有効な場合を分けて記述しています。一般的な設計上の注意として、絞り込み項目が増える場合には、状態の命名だけで複雑さが解消すると考えず、どの組み合わせで何を残すかを先に整理するのがよいでしょう。
また、例で行っているのは商品一覧の要素をdisplay: noneで非表示にする処理です。データの再取得や、サーバー側の検索を実装する説明ではありません。画面上で表示を切り替える目的なのか、検索結果そのものを更新したいのかを区別すると、この方法を採用する範囲が明確になります。
必要な行動：まず状態表を作り、実際の利用環境で検証する
実装を検討する際は、最初に「何も選ばない」「片方だけ選ぶ」「両方選ぶ」の期待動作を書き出すことを提案します。特に未選択時に全商品を見せるのか、それとも別の案内を出すのかは、画面の目的によって判断すべき点です。原文の非表示規則をそのまま使う前に、自分の画面で必要な動作と一致するかを確認してください。
- チェックボックスと商品の分類を対応付け、各状態で表示する項目を決めます。
- カスタムプロパティの名前、許可する値、初期値、継承の有無を定義します。
- 状態を設定する祖先要素と、スタイルクエリが参照するコンテナーを決めます。
- 未選択、単独選択、同時選択を実際に切り替え、期待どおりの項目が残るかを確認します。
- 対象ブラウザーで各機能の対応状況と動作を確認し、必要に応じて別の実装方法を検討します。
これらは導入に向けた一般的な実務上の提案です。参照記事は@property、:has()、コンテナースタイルクエリなどを組み合わせた例を示していますが、対象ブラウザーごとの対応表や、処理速度の測定結果は示していません。読みやすい書き方であることと、利用環境で問題なく動くこと、性能が改善することは分けて判断する必要があります。
CSSのtrue／false活用は、JavaScriptなどによる状態管理を一律に置き換えるものとしてではなく、表示条件をCSS内で明示する選択肢として評価すると実用的です。二択の状態を分かりやすい名前で表し、値を置く場所と参照先をそろえる。その基本を押さえたうえで、小さな表示切り替えから検証することが、無理のない導入につながります。
