Re: [csswg-drafts] why mediaqueries? (#8472)

It is also not clear to me what your examples actually mean.

Example 1 and 2: `max-width: 300px-500px` doesn't seem to make sense because `max-width` defines a maximum value. A range syntax only makes sense for features without `min-` or `max-` prefix, e.g. for `width`.

What does the syntax using square brackets mean? I assume you want to combine layout breakpoints. Though how do you imagine the style rule and property definitions to look like?

@Loirooriol outlined the implementation view, though also from an author's perspective the suggested range syntax is hardly distinguishable from a style declaration.

And just as a side note in case you didn't know, media query ranges can be defined via a mathematical syntax nowadays. So your first example could also be written like this:

```css
@media (width <= 600px) {
  .facet_sidebar {
    display: none;
  }
}
```

And ranges can be expressed like this:

```css
@media (300px <= width < 500px) { }
```

And with the [nesting](https://drafts.csswg.org/css-nesting-1/) mentioned by @Loirooriol you'll be able to nest media rules inside style rules. That may then look like this:

```css
.facet_sidebar {
  display: flex;

  @media (width <= 600px) {
    display: none;
  }
}
```

So the questions are: What are your use cases? And what's are the benefits of your syntax in comparison to the existing one?

Sebastian

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


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

Received on Monday, 20 February 2023 23:11:59 UTC