[csswg-drafts] [css-contain-3] Nesting Context (side effect / enhancement) (#7209)

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

== [css-contain-3] Nesting Context (side effect / enhancement) ==

Based on the current implementation in Chrome Canary and Safari TP Container Queries seems to only need a property name allowing them to be used to expose nesting context.

````CSS
  /* this works */
  .container-a {
    container-name: A;
    container-type: inline-size;
  }

  @container A (inline-size) {
    .child { color: orange; }
  }

````
IMO it makes a lot of sense to use Container Queries to expose the nesting context – allowing styling without a direct reference to the container selector(s).

If possible it would be nice if `container-name` could be used without the need of a `container-type` and query 
````CSS
  /* simplified syntax (suggestion) */
  .container-a {
    container-name: A;
  }

  @container A {
    .child { color: orange; }
  }
````

[Codepen Example](https://codepen.io/jakob-e/pen/xxpzNWp)


I hope it makes sense and that I haven't overlooked existing issues
Thank you for your hard work – it is highly appreciated 
😃


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


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

Received on Monday, 11 April 2022 08:25:46 UTC