jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 CSS if()関数ビルダー

style()、media()、supports()条件を使用して、@mediaクエリなしでレスポンシブな値をインライン条件分岐するCSS if()を構築します。

ツールを読み込み中...

CSS if()関数ビルダーとは

The CSS if() function lets you write conditional values directly inside a property declaration. Instead of wrapping a value inside @media, @container, or @supports at-rules, you use if() inline: width: if(style(--variant: large): 300px else 150px). It supports three condition types: style() to check a CSS custom property value, media() to test media features like min-width or prefers-color-scheme, and supports() to detect whether the browser supports a specific CSS feature. Chrome 137 supports if(style()) and Chrome 142 adds if(media()) and if(supports()).

クイックアンサー

The CSS if() function lets you write conditional values inline inside a property declaration. Use if(style()) to branch on a CSS custom property, if(media()) to branch on a media feature like viewport width, or if(supports()) to branch on browser feature support. Chrome 137+ supports if(style()); Chrome 142+ adds if(media()) and if(supports()).

制限事項

  • The if() function is only available in Chrome 137+ (style()) and Chrome 142+ (media(), supports()). Firefox and Safari do not yet support CSS if() in any stable release as of May 2026.
  • if() evaluates a single condition for a single value — it cannot replace @media or @container at-rules for complex rule blocks with multiple declaration changes.
  • if(style()) only works on explicitly set or registered custom properties. Custom properties inherited from an ancestor with no explicit value on the target element are treated as not matching.

使い方

  1. Choose the condition type: style() for checking CSS custom property values, media() for viewport or user-preference media features, or supports() for feature detection.
  2. Enter the condition expression and the value to use when the condition is true.
  3. Optionally add an else value that applies when the condition is false.
  4. Copy the generated if() declaration and place it directly in your CSS property value.

主な用途

  • Set a different width based on a CSS custom property value without a @container query wrapping the entire rule.
  • Apply a color scheme value conditionally based on prefers-color-scheme inside a single property declaration.
  • Provide a fallback value when the browser does not support a specific CSS feature using supports().

用途

使用例

例

Component width based on variant variable

A card component uses style(--variant: featured) to set a 400px width on featured cards and 300px on standard cards: width: if(style(--variant: featured): 400px else 300px). No @container rule needed.

例

Responsive font size using media() inline

Set font size conditionally based on viewport width inside a single declaration: font-size: if(media(min-width: 768px): 1.25rem else 1rem). Avoids writing separate @media blocks for simple responsive values.

よくあるミス

  • Using if(media()) for complex multi-condition layouts — if() is designed for single conditional values, not as a replacement for all media queries. Complex layouts still benefit from @media at-rules for readability.
  • Forgetting that the else branch is optional — omitting it when the condition is false results in the property falling back to its initial value or a previous declaration.
  • Applying if(style()) to a custom property that is not set on the element or its ancestors — style() only evaluates registered or explicitly set custom properties, not inherited ones that fall back to their initial value.

検証

  1. Open Chrome DevTools and inspect the element with the if() declaration. Verify the computed value changes when the condition variable or media feature changes.
  2. Test the page in a non-supporting browser (Firefox or Safari) to confirm the else value or fallback declaration applies correctly without breaking the layout.

FAQ

CSS if()関数ビルダーのFAQ

What is the difference between if(style()) and @container style() queries?

@container style() queries wrap an entire rule block and apply all declarations inside when the condition is true. The if(style()) function applies a single conditional value inline within a property declaration. Use @container style() when multiple properties depend on the same condition, and if(style()) when only one value needs to change. The if() approach keeps related values together in the same declaration block.

Which Chrome version supports each if() condition type?

Chrome 137 supports if(style()) for querying CSS custom property values. Chrome 142 adds if(media()) for media feature queries and if(supports()) for feature detection. As of May 2026, Chrome 142 is the latest stable, so all three condition types work in current Chrome. Firefox and Safari do not yet implement if() in any stable release.

Can if(style()) check for the absence of a custom property?

No. The style() condition checks the computed value of a custom property and can test for a specific value using the colon syntax (style(--variant: large)) or just check that the property is set (style(--variant)). It cannot test for the absence of a property. To handle both present and absent states, set the property to a default value explicitly and test against that.

How does if(media()) differ from a regular @media at-rule?

if(media()) evaluates the media condition inline within a single property declaration, keeping the conditional value co-located with its fallback. A @media at-rule duplicates the entire rule set. For a single value change, if(media()) is more concise. For multiple properties that change at the same breakpoint, @media remains more maintainable because the breakpoint is defined in one place.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください