CSSの進化が止まらない！ CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります

Post on:2025年3月6日

はじめに

CSS Custom Functions are coming（翻訳記事）で紹介したように、CSSのカスタム関数（CSS @function）のプロトタイプを初めて見ました。Chromeではさらにプロトタイプはネストされたコンテナクエリもサポートされ、CSSによるif()も追加されました。
これは以前にも言いましたが、これまでのCSSを大きく変えるゲームチェンジャーです！

2025年3月現在、CSSのカスタム関数もif()もブラウザに実装されていません。ただし、Chrome Canaryではプロトタイプ化されており、フラグを有効にすると、機能します。

カラー値以外でも機能するlight-dark()関数

まずは、CSS Custom Functions are coming（翻訳記事）で作成したカスタムの--light-dark()関数をご覧ください。このカスタム関数はCSSのlight-dark関数とは異なります。

@function --light-dark(--light, --dark) {
	result: var(--light);
	
	@media (prefers-color-scheme: dark) {
		result: var(--dark);
	}
}

@function --light-dark(--light, --dark) {

result: var(--light);

@media (prefers-color-scheme: dark) {

result: var(--dark);

}

CSSのlight-dark関数では<color>値しか扱えませんが、カスタムの--light-dark()関数は<color>値に限定されず、あらゆる値で動作します。しかし、light-dark関数とは異なるので、ローカルのカラースキーム値には応答できないため、@mediaで判定する必要があります。
※デモはChrome Canaryでご覧ください。

See the Pen
Custom CSS Custom Functions: --light-dark() by coliss (@coliss)
on CodePen.

前回の記事の最後で示唆したように、ネストされたコンテナクエリやCSSでif()がサポートされれば、この制限は取り除かれます、そしてその日が早くも来ました！

コンテナクエリを使用したカスタム関数

ここで紹介するコードではコンテナクエリが使用されるため、常にラッパー要素が必要です。if()を使用する次のセクションでは、この追加のラッパー要素は必要ありません。

前回の記事以降、Chromeのプロトタイプはアップデートされ、カスタム関数内のネストされたコンテナクエリもサポートされるようになりました。これにより、次のように要素ごとにライト・ダークを設定できるようになります。

--schemeというカスタムプロパティを使用して、要素に優先カラースキームを設定します。
--schemeの値に対応するスタイルクエリを使用して、--light-dark()関数を修正します。

--schemeに設定できる値は、light, dark, systemの3つです。lightまたはdarkが設定されると、カラースキームは強制的にその値になります。

関数は、下記のようになります。

@function --light-dark(--light, --dark) {
	/* --light の値がデフォルト */
	result: var(--light);
	
	/* コンテナにdarkが設定されている場合は、--dark値を使用 */
	@container style(--scheme: dark) {
		result: var(--dark);
	}
}

@function --light-dark(--light, --dark) {

/* --light の値がデフォルト */

result: var(--light);

/* コンテナにdarkが設定されている場合は、--dark値を使用 */

@container style(--scheme: dark) {

result: var(--dark);

}

@funciton内では--lightと--darkの値が関数の引数として渡されます。ただし、--schemeカスタムプロパティは関数が呼び出された要素から読み込まれます。

--schemeに何らかの値があることを確認するために、prefers-color-schemeの値に応じて:rootをそれを設定します。prefers-color-scheme値はsystemの--scheme値のサポートを有効にするために--root-schemeに複製されますが、これについては後述します。

:root {
	--root-scheme: light;
	--scheme: light;

	@media (prefers-color-scheme: dark) {
		--root-scheme: dark;
		--scheme: dark;
	}
}

:root {

--root-scheme: light;

--scheme: light;

@media (prefers-color-scheme: dark) {

--root-scheme: dark;

--scheme: dark;

}

要素ごとに優先カラースキームを設定できるようにするために、私はdate-schemeHTML属性を使用することにしました。この属性はattr()関数を使用してCSSで値にパースされます。値がlightまたはdarkの場合は、その値を直接使用します。値がsystemの場合は、コードは--root-schemeプロパティの値を使用します。ネストされたライト・ダークのコンテキストで適切に動作するように、コードは@scopeを使用します。

/* data-scheme属性から--schemeを上書きできるようにする */
@scope ([data-scheme]) {
	/* 属性から値を取得する */
	:scope {
		--scheme: attr(data-scheme type(<custom-ident>));
	}
	
	/* systemを設定すると、--root-scheme値が使用されます */
	:scope[data-scheme="system"] {
		--scheme: var(--root-scheme);
	}
	
	/* これにより、ネイティブのlight-dark()も機能するようになります */
	:scope > * {	
		color-scheme: var(--scheme);
	}
	
	/* 属性を持つ要素は追加のラッパー要素なので、その内容を表示するだけでよいです */
	display: contents;
}

/* data-scheme属性から--schemeを上書きできるようにする */

@scope ([data-scheme]) {

/* 属性から値を取得する */

:scope {

--scheme: attr(data-scheme type(<custom-ident>));

}

/* systemを設定すると、--root-scheme値が使用されます */

:scope[data-scheme="system"] {

--scheme: var(--root-scheme);

}

/* これにより、ネイティブのlight-dark()も機能するようになります */

:scope > * {

color-scheme: var(--scheme);

}

/* 属性を持つ要素は追加のラッパー要素なので、その内容を表示するだけでよいです */

display: contents;

}

attr()関数の新機能については、CSS attr() gets an upgrade（翻訳記事）をご覧ください。

ここまでのCSSをまとめてみます。
まずは、CSS。

[data-scheme] > * {
	color: light-dark(#333, #e4e4e4);
	background-color: light-dark(aliceblue, #333);
	
	border: 4px --light-dark(dashed, dotted) currentcolor;
	font-weight: --light-dark(500, 300);
	font-size: --light-dark(16px, 18px);
	
	transition: all 0.25s ease, border-style 0.25s allow-discrete;
}

[data-scheme] > * {

color: light-dark(#333, #e4e4e4);

background-color: light-dark(aliceblue, #333);

border: 4px --light-dark(dashed, dotted) currentcolor;

font-weight: --light-dark(500, 300);

font-size: --light-dark(16px, 18px);

transition: all 0.25s ease, border-style 0.25s allow-discrete;

}

続いて、HTML。

<div data-scheme="light">
	<div class="stylable-thing">
		…
	</div>
</div>

…

</div>

実際の動作は、デモページでご覧ください。
動作を確認するには、Chrome CanaryでExperimental Web Platform Featuresフラグを有効にします。

See the Pen
Custom CSS Custom Functions + Nested Style Queries (+ attr()): --light-dark() by coliss (@coliss)
on CodePen.

CSSでif()関数が使えるようなる

Chrome Canary 135.0.7022.0では、インラインのif()関数を使用できます。この関数により、宣言内で条件付きで値を設定できるため、コンテナクエリのアプローチに必要な追加のコンテナ要素を省略できます。

CSSのif()関数は条件としてスタイルクエリも受け入れるため、全体的なアプローチは同じです。しかし、結果として得られるコードははるかに短くなります。

@function --light-dark(--light, --dark) {
	result: if(
		style(--scheme: dark): var(--dark);
		else: var(--light)
	);
}

@function --light-dark(--light, --dark) {

result: if(

style(--scheme: dark): var(--dark);

else: var(--light)

);

}

また、--schemeをlightまたはdarkに設定するコードも短くなり、--root-scheme値にフォールバックする方が簡単になります。

:root {
	--root-scheme: light;
	--scheme: light;

	@media (prefers-color-scheme: dark) {
		--root-scheme: dark;
		--scheme: dark;
	}
}	

@scope ([data-scheme]) {
	:scope {
		--scheme-from-attr: attr(data-scheme type(<custom-ident>));
		--scheme: if(
			style(--scheme-from-attr: system): var(--root-scheme);
			else: var(--scheme-from-attr)
		);
		color-scheme: var(--scheme); /* ネイティブのlight-dark()を動作させる */
	}
}

:root {

--root-scheme: light;

--scheme: light;

@media (prefers-color-scheme: dark) {

--root-scheme: dark;

--scheme: dark;

}

@scope ([data-scheme]) {

:scope {

--scheme-from-attr: attr(data-scheme type(<custom-ident>));

--scheme: if(

style(--scheme-from-attr: system): var(--root-scheme);

else: var(--scheme-from-attr)

);

color-scheme: var(--scheme); /* ネイティブのlight-dark()を動作させる */

}

使用方法は前述と同じですが、[data-scheme]要素でカラースキームに依存するスタイルを直接設定できるという違いがあります。

[data-scheme] {
	color: light-dark(#333, #e4e4e4);
	background-color: light-dark(aliceblue, #333);
	
	border: 4px --light-dark(dashed, dotted) currentcolor;
	font-weight: --light-dark(500, 300);
	font-size: --light-dark(16px, 18px);
	
	transition: all 0.25s ease, border-style 0.25s allow-discrete;
}