Discussion
OK, I give up. Why doesn't this work?
@supports (order: sibling-count()) ){
--sibling: 'sibling-count'
}
@supports not (order: sibling-count()) ){
--sibling: 'NOT sibling-count'
}
/* later */
content: 'Browser supports: ' var(--sibling,' no sibling data ');
In both browsers I care about, Firefox and Safari/iOS, I get 'no sibling data' as if the browsers read neither @supports. What's going on?
@ppk I put it on bsky too: there's an extra closing parentheses in the support rules which would make them invalid.
@alvaromontoro Thank you! It was even simpler than I thought!
@ppk What's the scope of the custom property? Are you setting it on :root / html?
@mattwilcox No. I doubt that matters. Another instance works fine.
@ppk That's what I mean tho; from the code itself the properties aren't set *on* anything, so they aren't there to use later. Was checking that in case it wasn't just omited for brevity.
What if you use this as well as part of the test:
@property --sibling {
syntax: "<string>";
inherits: true;
initial-value: 'default value';
}
Just to see if the issue is the setting of the value or the registering of the property at all.
@mattwilcox The problem is in the supports queries.
Install bonfire.cafe
Get the full app experience
