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

Hello everyone.

> Considering that there is a range of [500px, 300px, 200px, 600px ...], we can have in 4n, the 4 element 500(1), 300(2), 200(3), 600(4) ... 

From what I understand of this proposal, there is a spread() function. This can be found here: [[css-values-5] Add spread() to CSS ](https://github.com/w3c/csswg-drafts/issues/8391), we have a switch case for media queries:

```css
@breakpoint: [600px; 200px; 100px; 500px; 400px; 250px];
/* @media (width <= 600px) {  */
@media (width <= nth-value(1; env(--more-items))) {
  .menuBar { display: none; }
}

 /* @media (width <= 200px) {  */
@media (width <= nth-value(2; env(--more-items))) {
  .menuBar { display: none; }
}

/* @media (width <= 100px) {  */
@media (width <= nth-value(3; env(--more-items))) { 
  .menuBar { display: none; }
}

/* @media (width <= 500px) {  */
@media (width <= nth-value(4; env(--more-items))) { 
  .menuBar { display: none; }
}

 /* @media (width <= 400px) {  */
@media (width <= nth-value(5; env(--more-items))) {
  .menuBar { display: none; }
}

 /* @media (width <= 250px) {  */
@media (width <= nth-value(6; env(--more-items))) {
  .menuBar { display: none; }
}

/* @media (width <= 600px  < 600px ) {  */
@media (nth-value(1; env(--more-items)) <= width <  nth-value(1; env(--more-items))) { }
```

*vs*
```css
@custom-env --some-items: spread(600px; 200px; 100px);
@custom-env --more-items: spread(var(--some-items); 500px; 400px; 250px);

 /* @media (width <= 600px) {  */
@media (width <= nth-value(1; env(--more-items))) {
  .menuBar { display: none; }
}

 /* @media (width <= 200px) {  */
@media (width <= nth-value(2; env(--more-items))) {
  .menuBar { display: none; }
}

/* @media (width <= 100px) {  */
@media (width <= nth-value(3; env(--more-items))) { 
  .menuBar { display: none; }
}

/* @media (width <= 500px) {  */
@media (width <= nth-value(4; env(--more-items))) { 
  .menuBar { display: none; }
}

 /* @media (width <= 400px) {  */
@media (width <= nth-value(5; env(--more-items))) {
  .menuBar { display: none; }
}

 /* @media (width <= 250px) {  */
@media (width <= nth-value(6; env(--more-items))) {
  .menuBar { display: none; }
}

/* @media (width <= 600px  < 600px ) {  */
@media (nth-value(1; env(--some-prop)) <= width <  nth-value(1; env(--some-prop))) { }
```

*why do we represent things as spread and not as an array?*
```css
@breakpoint: [600px; 200px; 100px; 500px; 400px; 250px];
```

*"vs"*
```css
@custom-env --some-items: spread(600px; 200px; 100px);
@custom-env --more-items: spread(var(--some-items); 500px; 400px; 250px);
```

About this syntax: `@breakpoint: [200px, 600px];`, there is this syntax or proposal here that is very similar too:
(This can be found here: [[css-values]: Express conditional values in a more terse way](https://github.com/w3c/csswg-drafts/issues/5009))
```css
@media (max-width: [1200px, 768px, 425px]) {
  .text-box {
    font-size: [24px, 20px, 16px];
    padding: [50px, 30px, 10px];
    margin: [50px 25px, 25px 12.5px, 12.5px]
  }
}
```

or:

```css
@custom-env --some-items: spread(1200px; 768px; 425px);
@custom-env --font-size: spread(24px; 20px; 16px);
@custom-env --padding: spread(50px; 30px; 10px);
@custom-env --margin: spread(50px; 25px; 25px; 12.5px; 12.5px);

@media (max-width: --some-items) {
  .text-box {
    font-size: --font-size;
    padding:  --padding;
    margin: --margin;
  }
}
```

or:

```css
@custom-env --fontSize-items: spread(24px; 20px; 16px);
@custom-env --padding-items: spread(50px; 30px; 10px);
@custom-env --margin-items: spread(50px; 25px; 25px; 12.5px; 12.5px);

@media (max-width: --some-items) {
  .text-box {
    font-size: nth-value(1; env(--fontSize-items)); /* font-size: 24px; */
    padding: nth-value(1; env(--padding-items)); /* padding: 50px; */
    margin: nth-value(1; env(--margin-items));) /* margin: 50px; */
  }
}
```

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


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

Received on Tuesday, 28 February 2023 16:58:08 UTC