Re: [csswg-drafts] [css-conditional] [css-contain] Fleshing out @container queries with single-axis containment (#5796)

Hello, im probably late for the party, but i maybe would like something like this:

```css
.sidebar {
 width: 100%;
 layout: mobile; /* use whatever name you want, these are examples; passed to every child element */
}

@media (min-width:900px){
 .sidebar {
  width: 200px;
  layout: desktop;
 }
}

@media (min-width:1600px){
 .sidebar {
  width: 400px;
  layout: desktop-wide
 }
}

.sidebar > ul:layout(mobile){
 /* styles for mobile */
}

.sidebar > ul:layout(desktop){
 /* styles for desktop */
}


.sidebar > ul:layout(desktop-wide){
 /* styles for wide desktop */
}
```

the "layout" variable would be available to every child element, so it would be easy to access in case a lot of nested code. Example from less:
```less
.sidebar {
 ...

 ul {
  ...

  li {
   a {
    span:layout(mobile){
     display: none;
    }

    span:layout(desktop-wide){
     display: block;
    }
   }
  }
 }
}
```

this way containing elements would use name instead of dynamic values, which could be changed at one spot (container settings, sidebar in this case). So in case i would decided i want "desktop" view starting from 1000px not 900px i would change it only once. I know this could be probably achieved by using variables via pre-processors (or maybe native?), but this looks a bit cleaner to me :)

-- 
GitHub Notification of comment by wUFr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5796#issuecomment-783189376 using your GitHub account


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

Received on Monday, 22 February 2021 08:25:56 UTC