LOL. Found another craziness with #Chromium which #Firefox got right the first time.
`@-supports selector(:lang(\*-latn)` is the only one that works in Chromium. However, none works for wildcard `:lang(\*-C)`.
Firefox accepts `(\*-latn)`, `("*-latn")`, and `("\*-latn")` for both.
Here's a sample code:
```
/**
* NOTES:
*
* @supports selector()
* - :lang(*-latn) = Firefox:no || Chromium:no
* - :lang(\*-latn) = Firefox:yes (insensitive) || Chromium:yes (insensitive)
* - :lang("*-latn") = Firefox:yes (insensitive) || Chromium:no
* - :lang("\*-latn") = Firefox:yes (insensitive) || Chromium:no
*
* :lang(C)
* - :lang(*-latn) = Firefox:no || Chromium:no
* - :lang(\*-latn) = Firefox:yes (insensitive) || Chromium:no
* - :lang("*-latn") = Firefox:yes (insensitive) || Chromium:no
* - :lang("\*-latn") = Firefox:yes (insensitive) || Chromium:no
**/
@supports selector(:lang(\*-latn)) {
:lang(\*-latn) {
color: magenta !important;
}
}
```
1. Firefox and Chromium-based browsers will pass the `@supports selector` check.
2. However, only Firefox will process `:lang(\*-latn)`. To this day, Chromium doesn't support wildcard `:lang(\*-latn)`.
To ensure Chromium-based browsers gets filtered out, use:
```
@supports selector(:lang("\*-latn"))
```
Chromium doesn't know what to do with the wildcard `:lang(\*-C)` selector. It supports one method in `@supports selector()` but not none in `:lang(C)`. The lack of wildcard support in `:lang(C)` selector has been that way for years as well.
#Mozilla Firefox devs really know what they're doing to make the #web better. While Chromium is proving to be the new #IE6, holding us back.
(P.S. I stopped filing bugs to Chromium years ago because they love to shut down people with “no one uses it” and “there's a workaround” so “not fixing”. Why even bother if that's their culture?)
#webdev #CSS