Hi, thanks a lot for sharing. I tried your HTML and CSS w/o your polyfill because "chrome canary" supports container query by enable it in the chrome://flags. I have to modify the css to see a responsive output ... but then when I tried in standard "chrome" browser then your polyfill only handles the first entry of the container query (.cq1).
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
Hi,
I just tested in Chrome, Firefox and Safari without any issues? I had to add a height to the .cq-class, as aspect-ratio is not supported in other browsers than Chrome. Please note that the code in the Pen is slightly updated, to support inline <style>-tags.
Best wishes,
Mads
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi, thanks a lot for sharing. I tried your HTML and CSS w/o your polyfill because "chrome canary" supports container query by enable it in the chrome://flags. I have to modify the css to see a responsive output ... but then when I tried in standard "chrome" browser then your polyfill only handles the first entry of the container query (.cq1).
.cqw {
contain: layout inline-size style;
}
/*
main {
display: flex;
flex-wrap: wrap;
}
*/
@container (min-width: 300px) {
.cq1 { --bgc: indianred; }
.cq2 { --bgc: green; }
.cq3 { --bgc: steelblue; }
.cq4 { --bgc: lavender; }
}
Hi,
I just tested in Chrome, Firefox and Safari without any issues? I had to add a
heightto the.cq-class, asaspect-ratiois not supported in other browsers than Chrome. Please note that the code in the Pen is slightly updated, to support inline<style>-tags.Best wishes,
Mads