What is the syntax for JavaScript’s CSS supports method?

Question

I am testing out the new :has() pseudo class. So far, only Firefox hasn’t enabled it by default.

I read in a comment on How do you enable :has() selector on Firefox about the following test:

CSS.supports("selector(:has(:focus))"));

It returns true when I’ve enabled the setting on Firefox, and false otherwise, which is expected.

The thing is what does the selector(:has(:focus)) actually mean? Obviously it’s testing for the :has() pseudoclass, but what’s with the selector() and the (:focus) parts. If I try to simplify it, the test doesn’t work — at least it returns a false.

I can’t find any detailed document on the CSS.supports() method which discusses it.

a word of warning - `:has` is broken in firefox, the results when enabled are inconsistent at best — Jaromanda X, Jul 20 '23 at 05:52
@JaromandaX I read that in the referenced comments as well as on the bug reports. However, I see that it’s working on 114.0.2 on macOS, and that all of the comments are a few months old, so it may be on the mend. — Manngo, Jul 20 '23 at 05:58
https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static — Bergi, Jul 20 '23 at 06:21
@JaromandaX I’ve just tested in 115.0.2 and both the selector and the test appear to work. — Manngo, Jul 20 '23 at 23:44

score 2 · Answer 1 · answered Jul 20 '23 at 05:57

2

OK, I think I understand.

selector() tests whether the syntax :has(:focus) is acceptable.
has(:focus) is a dummy test. :has() won’t work because you can’t have an empty value, so it has to be :has( something ). The commenter use :has(:focus) but could just as well have used :has(p) or :has(gorilla) or :has(…).

So, in English, the test is whether CSS supports the syntax :has(anything).

answered Jul 20 '23 at 05:57

Manngo

14,066
10
88
110

1

[MDN @supports selector()](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#selector_experimental) – Thomas Jul 20 '23 at 06:02

What is the syntax for JavaScript’s CSS supports method?

1 Answers1