CSS @​supports rules to target only Firefox / Safari / Chromium

~

~

~

# What I want

Ideally I want to check for support for @property using something like this:

/* Syntax Proposal */
@supports (@property) {
  …
}

/* Syntax Proposal, Expanded to check for certain descriptor support */
@supports (@property { syntax: "<angle>" }) {
  …
}

/* Alternative Syntax Proposal */
@supports descriptor(@property, syntax: "<angle>") {
  …
}

Unfortunately this is currently not possible and considered a shortcoming of CSS @supports. The issue is being discussed in CSSWG Issue 2463.

~

# Getting creative with @supports

As Chromium (Blink) currently is the only browser that supports @property, we need to create a @supports rule that targets Chromium only. While at it let’s also create @supports rules to target only Safari (WebKit), Firefox (Gecko), or a combination thereof.

Looking at what each browser uniquely supports, these three rules can be used as a starting point:

1. Only Firefox supports -moz-appearance: none
2. Only Safari supports the :nth-child(An+B [of S]?) selector.
3. Both Chromium and Firefox support contain: paint

👉 By combining/excluding these rules you can target a set of browsers, or only one specific one.

~

# The @supports rules

# Targeting Firefox Only

Firefox is the only browser that supports -moz-appearance: none

/* Firefox Only */
@supports (-moz-appearance: none) {
  …
}

# Targeting Not-Firefox (i.e. Chromium + Safari)

By negating the selector only Firefox supports you can target Chromium + Safari:

/* Chromium + Safari */
@supports (not (-moz-appearance: none)) {
  …
}

# Targeting Safari Only

Safari is the only browser that supports the complex :nth-child(An+B [of S]?) selector — which itself allows you to create a :nth-of-class-like selector — so you can rely on that. Using selector() function in @supports we can check whether the browser supports it or not.

/* Safari Only */
@supports selector(:nth-child(1 of x)) {
  …
}

/* (Safari + MobileSafari >= 14.6) or (All MobileSafari versions) */
@supports  (selector(:nth-child(1 of x))) or (-webkit-touch-callout: none) {
  …
}

# Targeting Not-Safari (i.e. Chromium + Firefox)

You could negate the rules above to target Chromium and Firefox, but instead I chose to check for support for contain: paint which both browsers support:

/* Chromium + Firefox */
@supports (contain: paint) {
  …
}

The reason why I choose this selector becomes clear in the next part 😉

# Targeting Chromium Only

To target Chromium only you can select both Chromium and Firefox (using @supports (contain: paint)), and then exclude Firefox from there (using @supports (not (-moz-appearance: none))).

Combined you get this @supports rule:

/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {
  …
}

# Targeting Not-Chromium (i.e. Safari + Firefox)

As @supports understands OR-logic, you can combine the rules for both Safaris and Firefox into one:

/**/
@supports (-webkit-touch-callout: none) or (selector(:nth-child(1 of x))) or (-moz-appearance: none) {
  …
}

~

# Combined Demo

Below is a combined demo. The background-color of the body should be:

• Chromium: blue
• Firefox: lime
• Desktop Safari: red
• Mobile Safari: orange

See the Pen CSS @support rules to target only Firefox / Safari / Chromium by Bramus (@bramus) on CodePen.

Additionally you can also check this combined image (“cheat sheet”):

~

# In Closing

I’m glad I could flesh things out and create @supports rules to target the three major rendering engines. Let’s hope we can drop these workarounds soon, when CSSWG Issue 2463 gets resolved (and implemented) 🙂

~

To help spread the contents of this post, feel free to retweet its announcement tweet:

CSS `@​supports` rules to target only Firefox / Safari / Chromium

🔗 https://t.co/lV2Ubz6cVm

🏷 #CSS #atSupports #FeatureQueries #ProgressiveEnhancement pic.twitter.com/84GtuC0OCc

— Bram.us (@bramusblog) June 23, 2021

~