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

Hi.

> For a use-case to be convincing, it needs to show something that is some combination of (a) difficult (or impossible) currently, and (b) commonly worked around by authors. Alternately, a convincing argument that while authors don't currently do The Thing (because it's too annoying), they likely would do it if we made it easier, and this would improve their experience.

As I said at the beginning of my text, I said that I was helping or trying to help with this open topic. Considering that I found an interesting comment and in that sense I imagined an example of good syntax for a real problem. A real problem is the non-use of arrays and nth-child(), nth-of-type() in the media property.

> None of what you've demonstrated are use-cases, they're just syntax examples. (And in most of them I can't tell what the syntax is trying to achieve.) Could you explain what you're attempting to do with each of the examples, how you might achieve those today and why that's annoying, and why something like the suggested syntax would make things better?

My syntax demo has to do with the idea of using  `arrays`, `nth-child()`,  `nth-of-type() ` for the media property. Bear in mind that with these resources we can create a pixel range that is independent of any mobile device.

*my argument is here:*
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) {
  .menuBar{
    display: none;
  }
}
```

And ranges can be expressed like this:
```css
@media (300px <= width < 500px) { }
```

And with the css-nesting mentioned by Loirooriol you'll be able to nest media rules inside style rules. That may then look like this:

```css
.menuBar{
  display: flex;

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

#### In my opinion, there is an even simpler way to do all this.
media query ranges can be defined via a mathematical syntax nowadays. So your first example could also be written like this `@breakpoint: [200px, 600px];`:
```css
@breakpoint: [200px, 600px];
@media (width <= breakpoint[0]) { /* @media (width <= 200px) {  */
  .menuBar{
    display: none;
  }
}
@media (width <= breakpoint[1]) { /* @media (width <= 600px) {  */
  .menuBar{
    display: none;
  }
}
```


And ranges can be expressed like this: `@breakpoint: [200px-600px]` or `@breakpoint: [firstNumber-lastNumber]`
```css
@breakpoint: [200px-600px];
@media (breakpoint:nth-child(4n) <= width < breakpoint:nth-child(4n)) { }
```

And with the css-nesting mentioned by Loirooriol you'll be able to nest media rules inside style rules. That may then look like this `@breakpoint: [200px-600px];` or `@breakpoint: [firstNumber-lastNumber]` or `breakpoint:nth-child(1n)`:

```css
@breakpoint: [200px-600px];
.menuBar{
  display: flex;

  @media (width <= breakpoint[0]) {  /* @media (width <= 200px) {  */
    display: none;
  }
}

.menuBar2{
  display: flex;

  @media (width <= breakpoint:nth-child(1n)) {  /* @media (width <= 200px) {  */
    display: none;
  }
}

```

What do you think of this idea? (my idea would be to use arrays, nth-child for the media property) does it make sense or not?  your opinion is important, in case this idea is bad. I'll put it aside.



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


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

Received on Saturday, 25 February 2023 00:11:41 UTC