search

jsxtools / cqfill

Polyfill for CSS Container Queries
402 stars 4 forks source link

Update contain to container #10

Open djmtype opened 2 years ago

djmtype commented 2 years ago

There was very recently a spec change from contain to container.

https://drafts.csswg.org/css-contain-3/#container-queries.

Change this: 

.element {
  contain: layout inline-size;
}

To this: 

.element {
  container: inline-size;
}
jasikpark commented 2 years ago

This is a diff spec over CSS Containment Level 2. It is currently an Exploratory Working Draft: if you are implementing anything, please use Level 2 as a reference. We will merge the Level 2 text into this draft once it reaches CR.

from CSS Containment Level 3

I believe this means that the polyfill should be implementing CSS Containment Level 2 still no?

jasikpark commented 2 years ago

On second thought since I've heard this is meant to reflect the current implementation & Chrome Canary uses container, you have a point!

djmtype commented 2 years ago

@jasikpark When I initially posted this issue, I learned of it via CSS Tricks. You can hear Chris Coyier respond, "Oh, it's container now?" https://youtu.be/8Je-zvnQSMg?t=230.

I think contain still works but with some caveat you need to be more verbose like contain: style inline-size layout. However, this spec hasn't been finalized, so it might change yet again.

HolgerJeromin commented 2 years ago

JFYI https://github.com/GoogleChromeLabs/container-query-polyfill