GoogleChromeLabs / container-query-polyfill

A polyfill for CSS Container Queries
https://npm.im/container-query-polyfill
Apache License 2.0
1.13k stars 50 forks source link

":where() pseudo class not supported" in firefox version that should support it. #64

Closed DanielCordell closed 2 years ago

DanielCordell commented 2 years ago

I am currently using firefox 106, which has support for there :where() pseudo-class.

However, if I attempt to run the query demo, I get the following in the console:

image

Also contained in the screenshot is proof that where is supported. I've also tested it manually by adding a simple :where(div) and it's picked up correctly. I am using the polyfill via the CDN URL provided, not using npm. Is there another step I need to take, or is there an issue with firefox currently?

gkatsev commented 2 years ago

Looks like it's because the check in the code is CSS.supports('selector(:where())') which is returning false but adding in div to the :where(div) makes it return true and as far as I can tell makes it work as expected.

gkatsev commented 2 years ago

Submitted a PR for that https://github.com/GoogleChromeLabs/container-query-polyfill/pull/65

DanielCordell commented 2 years ago

Submitted a PR for that #65

Wow, quick stuff, many thanks!