Unsupported selectors

[bramus]

I’m trying out the polyfill in this demo and ran into problems with this snippet in Firefox:

@container (width >= 24rem) {
    .videocard > .container:has(.infobox, .player) {
        flex: 1;
    }
}

In short, the :has() selector was breaking things here because Firefox does not support it (yet). I had expected the polyfill to recover from this.

Uncaught DOMException: Element.matches: '.videocard > .container:has()' is not a valid selector

What happens now in Firefox, is that the whole layout goes FUBAR: the polyfill loads, but the largest defined layout is used due to the code breaking. Once you size the .resizer to its smallest size (20rem), the layout fixes itself and takes one the smallest defined layout. However, upon making the .resizer bigger again, the layout remains the same.

In order to fix my demo, I used this snippet instead, which only uses selectors Firefox supports:

@container (width >= 24rem) {
    .videocard > .container {
        flex: 1 !important;
    }
}

[devknoll]

Thanks for reporting this. I'll push a fix in the morning to prevent unsupported selectors from breaking the update process, so that other supported selectors will still be applied correctly.

[devknoll]

Fixed by 8eb2d82