[csswg-drafts] [css-viewport] [css-container-queries] Zoom and container queries (#10268)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-viewport] [css-container-queries] Zoom and container queries ==
How should CSS zoom be handled (if at all) in a `@container` query?

A container query like `@container (width > 100px) { }` is rather weird wrt CSS zoom. Should it use pixels:

 * As considered by the page (un-zoomed).
 * As considered by the container.
 * As considered by the element you're styling.

Safari disagrees with Chrome / Firefox on this test-case:

```html
<!doctype html>
<style>
  .container {
    container-type: inline-size;
    width: 100px;
    height: 100px;
  }
  .child {
    background-color: red;
    height: 50px;
    width: 50px;
    @container (width > 120px) {
      background-color: green;
    }
  }
</style>
<div class="container">
  <div class="child"></div>
</div>
<div class="container" style="zoom: 2">
  <div class="child"></div>
</div>
<div class="container" style="zoom: 2">
  <div class="nested" style="zoom: 2">
    <div class="child"></div>
  </div>
</div>
<div class="outer" style="zoom: 2">
  <div class="container">
    <div class="child"></div>
  </div>
</div>
```

Same for container query relative units, I suspect that the best behavior involves some gymnastics with the container and child effective zoom values. Not sure what browsers implement there (Firefox doesn't zoom them at all so they use the coordinate space of the container).

cc @chrishtr @lilles @andruud @nt1m @mirisuzanne @tabatkins 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10268 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 29 April 2024 21:12:17 UTC