Power Your Software Testing with AI and Cloud

Supercharge QA with AI for Faster & Smarter Software Testing

Start free Testing

Next-Gen App & Browser Testing Cloud

CSS if() function

The if CSS function allows different values to be set for a property depending on the result of a conditional test. The test can be based on a style query, a media query, or a feature query.

Last updated on : 2026-02-09

Browser Versions

IE

Edge

Firefox

Chrome

Safari

Opera

5.5 - 11

12 - 136

137 - 144

2 - 150

4 - 136

137 - 147

3.2 - 26.3

9.5 - 125

121 - 122

Fully Supported

Partially

No Support

Browser Compatibility

CSS if() function on IE is not supported on any IE versions.

CSS if() function on Edge is fully supported on 137-144, and not supported on 12-136 Edge versions.

CSS if() function on Firefox is not supported on any Firefox versions.

CSS if() function on Chrome is fully supported on 137-147, and not supported on 4-136 Chrome versions.

CSS if() function on Safari is not supported on any Safari versions.

CSS if() function on Opera is fully supported on 121-122, and not supported on 9.5-125 Opera versions.

CSS if() function on Safari on iOS is not supported on any Safari on iOS versions.

CSS if() function on Android Browser is fully supported on 138-144, and not supported on 2.3-4 Android Browser versions.

CSS if() function on Opera Mobile is not supported on any Opera Mobile versions.

CSS if() function on Chrome for Android is fully supported on all Chrome for Android versions.

CSS if() function on Firefox for Android is not supported on any Firefox for Android versions.

CSS if() function on Samsung Internet is not supported on any Samsung Internet versions.

Browser Support for CSS if() function

CSS if() function on Chrome

CSS if() function on Safari

CSS if() function on Firefox

CSS if() function on Internet Explorer

CSS if() function on Opera

CSS if() function on Edge

References

Data sourced from

22

Low

Overall Browser Compatibility Score

Note:CSS if() function shows a browser compatibility score of 22. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support. However, it does give you an estimate on how much you should rely on a particular web technology in terms of browser compatibility.

Test on 3000+ browsers for CSS if() function & more

Test your website for CSS if() function and other web technologies. Get 100 FREE automation test minutes!

More Web Technologies

CSS
HTML 5
SVG
JS API
Security
JavaScript
Other Web Technologies

CSS background-attachment

Background-clip: text

CSS3 Background-image options

background-position-x & background-position-y

CSS background-repeat round and space

CSS3 Border images

CSS3 Border-radius (rounded corners)

calc() as CSS unit value

ch (character) unit

CSS all property

CSS :any-link selector

CSS @apply rule

CSS Counter Styles

CSS Backdrop Filter

CSS background-position edge offsets

CSS background-blend-mode

CSS box-decoration-break

CSS3 Box-shadow

CSS Canvas Drawings

CSS caret-color

CSS Cascade Layers

Case-insensitive CSS attribute selectors

CSS clip-path property (for HTML)

CSS print-color-adjust

CSS color() function

CSS Conical Gradients

CSS Container Queries (Size)

CSS Containment

CSS content-visibility

Crisp edges/pixelated images

CSS Cross-Fade Function

:default CSS pseudo-class

Explicit descendant combinator >>

CSS Device Adaptation

:dir() CSS pseudo-class

CSS display: contents

CSS element() function

CSS Environment Variables env()

CSS Exclusions Level 1

CSS Feature Queries

CSS filter() function

CSS Filter Effects

::first-letter CSS pseudo-element selector

CSS first-line pseudo-element

CSS position:fixed

:focus-visible CSS pseudo-class

:focus-within CSS pseudo-class

CSS font-display

CSS font-stretch

CSS Generated content for pseudo-elements

CSS Grid Layout (level 1)

CSS hanging-punctuation

:has() CSS relational pseudo-class

CSS Hyphenation

CSS3 image-orientation

:in-range and :out-of-range CSS pseudo-classes

:indeterminate CSS pseudo-class

CSS Initial Letter

CSS initial value

LCH and Lab color values

letter-spacing CSS property

CSS Logical Properties

CSS ::marker pseudo-element

:is() CSS pseudo-class

CSS math functions min(), max() and clamp()

Media Queries: interaction media features

Media Queries: resolution feature

CSS3 Media Queries

Blending of HTML/SVG elements

CSS Motion Path

selector list argument of :not()

selector list argument of :nth-child and :nth-last-child CSS pseudo-classes

:optional CSS pseudo-class

CSS overflow property

CSS overflow-anchor (Scroll Anchoring)

CSS overflow: overlay

CSS overscroll-behavior

CSS page-break properties

CSS Painting API

::placeholder CSS pseudo-element

:placeholder-shown CSS pseudo-class

CSS :read-only and :read-write selectors

Rebeccapurple color

CSS Reflections

CSS Repeating Gradients

CSS resize property

CSS revert value

#rrggbbaa hex color notation

CSS Scroll-behavior

CSS @scroll-timeline

CSS scrollbar styling

CSS 2.1 selectors

::selection CSS pseudo-element

CSS Shapes Level 1

CSS Scroll Snap

CSS position:sticky

CSS Table display

CSS3 text-align-last

CSS text-indent

CSS text-justify

CSS text-orientation

CSS3 Text-shadow

CSS touch-action property

CSS3 Transitions

CSS unset value

CSS Variables (Custom Properties)

CSS widows & orphans

CSS writing-mode property

CSS3 attr() function for all properties

CSS3 Box-sizing

CSS3 Cursors (original values)

CSS grab & grabbing cursors

CSS3 Cursors: zoom-in & zoom-out

CSS currentColor value

Window.devicePixelRatio

ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for font-family

CSS Flexible Box Layout Module

gap property for Flexbox

display: flow-root

system-ui value for font-family

CSS font-feature-settings

CSS3 font-kerning

CSS Font Loading

CSS font-size-adjust

CSS font-smooth

Font unicode-range subsetting

CSS font-variant-alternates

CSS font-variant-numeric

@font-face Web fonts

getComputedStyle

CSS inline-block

Intrinsic & Extrinsic Sizing

CSS justify-content: space-evenly

High-quality kerning pairs & ligatures

CSS min/max-width/height

CSS3 Multiple backgrounds

CSS3 Multiple column layout

CSS3 object-fit/object-position

CSS outline properties

CSS pointer-events (for HTML)

prefers-color-scheme media query

prefers-reduced-motion media query

rem (root em) units

display: run-in

Scoped attribute

SVG in CSS backgrounds

text-decoration styling

text-emphasis styling

CSS3 Text-overflow

CSS text-size-adjust

CSS text-stroke and text-fill

CSS3 2D Transforms

CSS3 3D Transforms

TTF/OTF - TrueType and OpenType font support

CSS user-select: none

Small, Large, and Dynamic viewport units

Viewport units: vw, vh, vmin, vmax

CSS -webkit-user-drag property

CSS will-change property

CSS3 word-break

CSS3 Overflow-wrap

CSS @when / @else conditional rules

CSS font-palette

CSS Container Query Units

CSS property: accent-color

types: <color>: `color-contrast()`

types: <color>: `hwb()` (HWB color model)

types: <color>: `color-mix()`

HTMLElement API: inert

CSS at-rule: `@property`

CSS at-rule: `@media`: `prefers-reduced-data` media feature

Media Queries: Range Syntax

CSS Container Style Queries

-moz-float-edge

-moz-force-broken-image-icon

-moz-image-region

-moz-outline-radius

-moz-outline-radius-bottomleft

-moz-outline-radius-bottomright

-moz-outline-radius-topleft

-moz-outline-radius-topright

-moz-user-focus

-moz-user-input

-webkit-border-before

-webkit-box-reflect

-webkit-line-clamp

-webkit-mask-attachment

-webkit-mask-box-image

-webkit-mask-composite

-webkit-mask-position-x

-webkit-mask-position-y

-webkit-mask-repeat-x

-webkit-mask-repeat-y

-webkit-overflow-scrolling

-webkit-tap-highlight-color

-webkit-text-fill-color

-webkit-text-security

-webkit-text-stroke

-webkit-text-stroke-color

-webkit-text-stroke-width

-webkit-touch-callout

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timeline

animation-timing-function

backdrop-filter

backface-visibility

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

box-ordinal-group

column-rule-color

column-rule-style

column-rule-width

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

content-visibility

counter-increment

font-feature-settings

font-language-override

font-optical-sizing

font-variant-caps

font-variant-east-asian

font-variant-emoji

font-variant-ligatures

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

hyphenate-character

hyphenate-limit-chars

image-orientation

image-rendering

initial-letter-align

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

line-height-step

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

masonry-auto-flow

max-inline-size

min-inline-size

object-position

offset-distance

offset-position

overflow-anchor

overflow-clip-margin

overflow-inline

overscroll-behavior

overscroll-behavior-block

overscroll-behavior-inline

overscroll-behavior-x

overscroll-behavior-y

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

page-break-after

page-break-before

page-break-inside

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-coordinate

scroll-snap-destination

scroll-snap-points-x

scroll-snap-points-y

scroll-snap-stop

scroll-snap-type

scroll-snap-type-x

scroll-snap-type-y

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration-color

text-decoration-line

text-decoration-skip

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

CSS Relative color syntax

CSS text-wrap: balance

View Transitions API (single-document)

Scoped Styles: the @scope rule

CSS Anchor Positioning

View Transitions (cross-document)

CSS if() function

Did you find this page helpful?

TestMu AI forEnterprise

Get access to solutions built on Enterprise
grade security, privacy, & compliance

Advanced access controls
Advanced data retention rules
Advanced Local Testing
Premium Support options
Early access to beta features
Private Slack Channel
Unlimited Manual Accessibility DevTools Tests