Supports @supports?

[SamA74]

In css there are now @supports queries to apply rules only to browsers that support specified css.
But what happens in browsers that don’t support @supports?
Will it use the css within the query regardless of the @ query?
Or will it just ignore the whole block of code until the closing bracket of the query?

[SamA74]

It looks like the latter in tests so far, which is what I hoped for.

[Mittineague]

@SamA74

Or will it just ignore the whole block of code until the closing bracket of the query?

@SamA74

It looks like the latter in tests so far, which is what I hoped for.

Same for me just now. I tried

@supports (background-color: #F00) {
 p {
  background-color: #F00;
 }
}

Support for @support looks good except for IE

Can I use... Support tables for HTML5, CSS3, etc

Can I use... Support tables for HTML5, CSS3, etc

Testing with Chrome, Edge, Opera Dev and Vivaldi = red <p>s
IE 11 = default <p>s, no style shown in dev tools for the rule.

[Erik_J]

@SamA74

But what happens in browsers that don’t support @supports?

They should ignore the at-rule all together:
https://drafts.csswg.org/css-conditional-3/#conform-partial

[PaulOB]

@SamA74

Or will it just ignore the whole block of code until the closing bracket of the query?

Yes that’s the way it’s supposed to work (apart from the odd bug).

[SamA74]

It seems to be working as expected.
I now have a sticky “to top” button for mobiles that appears and sticks at 140vh down the page that displays as a permanent fixed button for non sticky browsers.
No js involved!

[SamA74]

@SamA74

I now have a sticky “to top” button for mobiles that appears and sticks at 140vh down the page

For anyone curious or interested, I have thrown together a quick mock-up to illustrate it.

You will need to narrow the viewport and scroll down to see it.