フォールバック値とvar()
カスタムプロパティが未定義または無効な場合に備え、var()にフォールバック値を指定します。
「フォールバック値とvar()」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
var()のフォールバック構文
var()関数は2番目の引数としてオプションのフォールバック値を受け取ります。これは、カスタムプロパティが定義されていない場合に使用されます。
<button class="button">Fallback: royalblue</button>
フォールバックが適用される場合
フォールバックは次の場合に使用されます。
- スコープ内でプロパティが定義されていない場合
- プロパティの値が
initialの場合 - その文脈では無効な値でプロパティが宣言されている場合
複数段階のフォールバック
var()の呼び出しを入れ子にして、複数段階のフォールバックを連鎖させます。
<p class="text">Falls through two levels to #3b82f6</p>
フォールバックには任意の値を指定できる
フォールバックには、そのプロパティで有効な値であれば指定できます。ほかの変数、計算値、リテラルも使用できます。
<div class="card">16px / 50%</div>
initialキーワード
カスタムプロパティにinitialを設定すると、最初から設定されていなかったかのように扱われます。フォールバックと組み合わせると、コンポーネントで継承されたカスタムプロパティを使用しないようにできます。
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
確実に無効となる値
カスタムプロパティの値にinitialを使用すると、フォールバックを確実に発動させることができます。これにより、CSSでオプション機能のフラグを作成できます。
カスタムプロパティと@property
@propertyルール（Houdini）は、初期値が保証された型付きカスタムプロパティを登録します。フォールバックに頼るよりも堅牢な方法です。
<div class="track">
<div class="bar"></div>
</div>
アニメーションに安全な値のフォールバック
カスタムプロパティが設定されていない場合でもトランジションが機能するように、トランジションの開始値にできる安全なフォールバックを指定します。
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
不足している変数のデバッグ
カスタムプロパティが存在せず、フォールバックも指定されていない場合、そのプロパティは初期値（多くの場合initialキーワード）に計算されます。色では、予期しない透明や黒の結果になることがあります。重要なプロパティには必ずフォールバックを追加してください。
カスタムプロパティ内のvar()
カスタムプロパティの値から別のカスタムプロパティを参照し、トークンのチェーンを作成できます。
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
フォールバックと詳細度
フォールバックは詳細度とは関係ありません。参照先のカスタムプロパティが未定義または無効な場合にのみ適用されます。詳細度によって決まるのは、どのルールがカスタムプロパティを設定するかであり、どのフォールバックが優先されるかではありません。
簡単な確認
--theme-textが定義されていない場合、color: var(--theme-text, #111)は何をしますか？
まとめ
var(--name, fallback)は、カスタムプロパティが未定義の場合にフォールバックを提供します。複数の階層に対応するため、フォールバックは入れ子にできます。型付きカスタムプロパティを定義し、確実な初期値を設定するには@propertyを使用します。重要な視覚プロパティには、必ずフォールバックを指定してください。
よくある質問
「フォールバック値とvar()」レッスンは無料ですか？
はい。「フォールバック値とvar()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「フォールバック値とvar()」で何を学びますか？
カスタムプロパティが未定義または無効な場合に備え、var()にフォールバック値を指定します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「フォールバック値とvar()」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- カスタムプロパティの宣言と使用
- フォールバック値とvar()
- コンポーネントへの変数のスコープ設定
- JavaScriptによる変数の更新