why mediaqueries?

[ghost]

A media query consists of a media type and at least one expression that limits the scope of stylesheets using media features such as width, height, and color. Media queries, added in CSS3, let the presentation of content adapt to a specific range of devices without needing to change the content itself.

<!-- CSS media query by link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

or

/* CSS media query inside stylesheet */
@media (max-width: 600px)
{
  .facet_sidebar
   {
    display: none;
   }
}

why don't we do something like this?

/* example  1 */
max-width: 600px-600px{
  .facet_sidebar
   {
    display: none;
   }  
}

/* example  2 */
max-width: 300px-500px{
  .facet_sidebar
   {
    display: none;
   }  
}

/* example  2.1 */
max-width: start-end {}

/* example  2.2 */
max-width: [500px, 300px, 200px]{}

/* example 3 */
min-width: [500px, 300px, 200px]{}

/* example 4 */
width: [500px, 300px, 200px]{}

/* example 5 */
max-height: [500px, 300px, 200px]{}

/* example 6 */
height: [500px, 300px, 200px]{ }

/* example 7 */
max-height: start-end {}

/* example 8 */
width: start-end {}

/* example 9 */
height: start-end {}

/* example 10 */
min-width: start-end {}

/* example 11 */
min-height: start-end {}

[Loirooriol]

Both style rules and your media queries can start with an identifier, which can be quite long, but CSS doesn't have infinite lookahead. You also seem to expect max-width:start-end {} to be a media query, but it just looks like a type selector, a pseudo-class, and a style block. See nesting discussions, there is a similar problem.

[SebastianZ]

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:

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

And ranges can be expressed like this:

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

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

.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

[ghost]

Hi all here.

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.

true.... maybe... from what I read initially I think this is a range of max-width-start and max-width-end size. This only makes sense assuming you have values in the range. Let's assume you have an average of 500px by 600px, you could make a range of 500px-600px, it would be something like maximum-start: '501px', '502px' ... '520px', '550px' ... up to 600px which is the maximum-end.

This only makes sense if you have x amount of elements in an array. Instead of using the average for each custom style, a custom range could be used. Something +- like this:

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) ...

@breakpoint: [500px, 300px, 200px, 600px ... ]
@media (width <= breakpoint:nth-child(4n)) { /* width <= 600px */
  .menubar {
    display: none;
  }
}

or something +- like this:
Considering that there is a range of 500px-600px, we can have in 4n, the 4 element 500(1), 502(2), 503(3), 504(4) ...

@breakpoint: [500px-600px] /* with range */
@media (width <= breakpoint:nth-child(4n)) {   /* width <= 504px */
  .menubar {
    display: none;
  }
}

or something +- like this:
Considering that there is a range of 500px-600px, we can have in 4n, the 4 element 500(1), 502(2), 503(3), 504(4) ..

@breakpoint: [500px-100px] /* with range */
@media (width <= breakpoint-child(4n)) {  /* width <= 504px */
  .menubar {
    display: none;
  }
}

or something +- like this too:
Considering that there is a range of 500px-600px, we can have in 4n, the 4 element 500(1), 502(2), 503(3), 504(4) ..

@breakpoint: [500px-100px] 
@media (width <= :nth-child(4n)) {  /* width <= 504px */
  .menubar {
    display: none;
  }
}

What does the syntax using square brackets mean? I assume you want to combine layout breakpoints.

I would like to help and contribute initially in this topic. I was thinking something similar to what you all are discussing here.
So I think what you said makes perfect sense, because I thought of something similar. For example, square brackets to be a syntax for layout breakpoints or are a syntax for layout breakpoints.

Though how do you imagine the style rule and property definitions to look like?

So seeing the comments here think of something like this (to the style rule and property definitions):
The general idea is to adopt a reserved word as breakpoint that can be used as: css-variable, media, nth-of-type, css-variables uniquely/uniformly with css.

For example, each of these breakpoint properties ( 'breakpoint.width', 'breakpoint.height', 'breakpoint.minWidth', 'breakpoint.maxWidth', 'breakpoint.maxHeight ', 'breakpoint.minHeight') can have an invariant set of size, because things like arrays are fast to access memory, which is easy to use and great for performance.

syntax:

@breakpoint: [values]; /* example: @breakpoint: [500px, 300px, 200px, 600px]; */
breakpoint:nth-child(NumberN) /* example: breakpoint:nth-child(4n) 4n is 600px */
breakpoint.width:  [values]; /* example: @width: [500px, 300px, 200px, 600px]; */
breakpoint.minWidth:  [values]; /* example: @minWidth: [500px, 300px, 200px, 600px]; */
breakpoint.maxWidth:   [values]; /* example: @maxWidth: [500px, 300px, 200px, 600px]; */
breakpoint.height:  [values]; /* example: @height: [500px, 300px, 200px, 600px]; */
breakpoint.minHeight:   [values]; /* example: @minHeight: [500px, 300px, 200px, 600px]; */
breakpoint.maxHeight:  [values]; /* example: @maxHeight: [500px, 300px, 200px, 600px]; */ 
breakpoint.max:  [values]; /* example: @max: [500px, 300px, 200px, 600px]; */
breakpoint.min:  [values]; /* example: @min: [500px, 300px, 200px, 600px]; */

demo syntax:

@breakpoint: [200px, 600px, 100px, 110px, 300px, 400px];
breakpoint.width:   [200px, 600px];
breakpoint.minWidth:   [200px, 600px];
breakpoint.maxWidth:  [200px, 600px];
breakpoint.height:   [200px, 600px];
breakpoint.minHeight:  [200px, 600px];
breakpoint.maxHeight:  [200px, 600px];
breakpoint.max:   [200px, 600px];
breakpoint.min:   [200px, 600px];

/* or breakpoint variables */
@width:   [200px, 600px];
@minWidth:   [200px, 600px];
@maxWidth:  [200px, 600px];
@height:   [200px, 600px];
@minHeight:  [200px, 600px];
@maxHeight:  [200px, 600px];
@max:   [200px, 600px];
@min:   [200px, 600px];

/* or breakpoint with css variables 1 */
:breakpoint {
  --width:  [200px, 600px]; 
  --minWidth:   [200px, 600px];
  --maxWidth:  [200px, 600px];
  --height:   [200px, 600px];
  --minHeight:  [200px, 600px];
  --maxHeight:  [200px, 600px];
  --max:   [200px, 600px];
  --min:   [200px, 600px];
  --min1:   [200px-600px]; /* 201px, 202px ... 600px */
}

/* breakpoint  with css variables 2 */
:root {
  --width:  [200px, 600px]; 
  --minWidth:   [200px, 600px];
  --maxWidth:  [200px, 600px];
  --height:   [200px, 600px];
  --minHeight:  [200px, 600px];
  --maxHeight:  [200px, 600px];
  --max:   [200px, 600px];
  --min:   [200px, 600px];
}

/* generate range to breakpoint */
breakpoint::range {
@width {
   width: [90px-100px]; /* 99px, 98, 97 ... 91 */
 }
@minWidth{
   min-width: [90px-100px]; /* 99px, 98, 97 ... 91 */
 }
@height{
   height: [90px-100px]; /* 99px, 98, 97 ... 91 */
 }
@minHeight{
   min-height: [90px-100px]; /* 99px, 98, 97 ... 91 */
 }
@maxHeight{
   max-height: [90px-100px]; /* 99px, 98, 97 ... 91 */
 }
@max{
   max-width: [90px-100px]; /* 99px, 98, 97 ... 91 */
 }
@min{
   min-width: [90px-100px]; /* 99px, 98, 97 ... 91 */
 }
}

An initial idea would be to have a property called breakpoint that works as an array type css variable to store different values related to: 'width', 'height', 'min-width', 'max-width', 'max-height ', 'min-height' - the advantage of this is that it applies to every element you reference by index.

So the questions are: What are your use cases?

Here is a list of interesting use cases I see for layout breakpoints. Each of the code examples or use cases is with a description with some concept.

use case 1: mediaqueries without breakpoints

Every framework and every website project has a unique, custom set of breakpoints. It would be very difficult to set up a series of breakpoints with media queries because the media query syntax doesn't accept things like arrays. Generally the media queries is used with @import or not. For example, we can see this in the example and usage here that we have a file called demo1.css that uses @import with an property called media. Here too we demonstrate in this initial example how to create a media style:

@import 'sample_media.css'; /* import file sample_media.css inside of demo1.css */
@media (width <= 600px) {
  .menubar {
    display: none;
  }
}

use case 2: breakpoint to mediaqueries with @import

The use case specified number 2 here solves the specified use case number 1. As we can see in this initial and previous example, this is very or can be something boring, complicated and difficult, because you would have to develop a style for each thing and context. This is an initial problem that can be considered solved in the next use case, use case number 2 here.

In this example here we have an file called demo_breakpoint.css that has an initial syntax that describes this along with the breakpoint properties:

/*  
@breakpoint to 'width', 'height', 'min-width', 'max-width', 'max-height ', 'min-height' 
*/

@breakpoint: [500px, 300px, 200px, 600px]; 

To make this idea possible in file demo_breakpoint.css, we can use the definition @import CSS at-rule is used to import style rules from other valid stylesheets in file demo2.css. The purpose of breakpoint layouts is to use a variable set of array elements to customize certain styles in css. Here we have an array related to the reserved word breakpoint and an imported file called demo_breakpoint.css:

@import 'demo_breakpoint.css'; /* import file breakpoint.css inside of demo2.css */
@media (width <= breakpoint[3]) { /* 600px */
  .menubar {
    display: none;
    max-width: breakpoint[0] /* 500px */
  }
}

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

Maybe layout breakpoints is an early and interesting idea to adopt, because with the breakpoint keyword we can solve these two core problems:

What are common breakpoints?
What are the types of CSS breakpoints?

This is solved by adopting an invariable array that changes as needed. Things like arrays are fast to access memory, which is easy to use and great for performance. We can see in Use Cases 1 and 2 how interesting or possibly interesting this is.

Below is a list of use cases or breakpoint summary examples:

use case 1: breakpoint to mediaqueries without @import

@breakpoint: [500px, 300px, 200px, 600px];
@media (width <= breakpoint[3]) { /* 600px */
  .menubar {
    display: none;
    max-width: breakpoint[2] /* 300px */
    }
  } 

use case 1.1: custom breakpoint and custom-mediaqueries 1

@breakpoint: [500px, 300px, 200px, 600px]{
@breakpoint.media (breakpoint.width <= breakpoint:nth-child(4n) ) { /* 600px */
  .menubar {
    display: none;
    max-width: breakpoint[2] /* 300px */
    }
  } 
}

use case 1.2: custom breakpoint and custom-mediaqueries 2

@breakpoint: [500px, 300px, 200px, 600px]{
@media (breakpoint.width <= breakpoint:nth-child(4n) ) { /* 600px */
  .menubar {
    display: none;
    max-width: breakpoint[2] /* 300px */
    }
  } 
}

use case 1.3: custom breakpoint and custom-mediaqueries 3

@breakpoint: [500px, 300px, 200px, 600px]
.menubar {
  display: flex;
  @media (width <= breakpoint:nth-child(4n)) {
    display: none;
  }
}

use case 1.4: custom breakpoint and custom-mediaqueries 4

@breakpoint: [500px, 300px, 200px, 600px];
.menubar {
  display: flex;
  width: breakpoint:nth-child(4n); 
}

use case 1.5: custom breakpoint and custom-mediaqueries 5

@breakpoint: [500px, 300px, 200px, 600px];
breakpoint:nth-child(4n) >= "500px" { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

use case 1.6: custom breakpoint and custom-mediaqueries 6

@breakpoint: [500px, 300px, 200px, 600px];
breakpoint:nth-child(4n) >= breakpoint:nth-child(breakpoint.min)  { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

use case 1.7: custom breakpoint and custom-mediaqueries 7

@breakpoint: [200px, 600px];
@media (breakpoint.min <= breakpoint.max) {
  .menubar {
    display: none;
  }
}

use case 1.8: custom breakpoint and custom-mediaqueries 8

breakpoint:nth-of-type(1) {
  min-width: breakpoint.min;
}
breakpoint:nth-of-type(2) {
  max-width: breakpoint.max;
}
breakpoint:nth-of-type(3) {
  min-height: breakpoint.min;
}
breakpoint:nth-of-type(4) {
  max-height: breakpoint.max;
}

breakpoint:nth-of-type(5) {
  height: breakpoint.max;
}

breakpoint:nth-of-type(6) {
  width: breakpoint.width;
}

breakpoint.width:nth-of-type(6) {
  width: breakpoint.width;
}

breakpoint:nth-of-type(1) >= breakpoint:nth-of-type(0)  { /*  202px >= 201px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

breakpoint:nth-of-type(var(--min1)[1]) >= breakpoint:nth-of-type(var(--min1)[0])  { /*  202px >= 201px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

@breakpoint:nth-of-type(6) >= breakpoint:nth-of-type(10)  { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

@breakpoint:nth-child(4n) >= breakpoint:nth-child(breakpoint.min)  { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

@breakpoint:nth-child(4n) >= @breakpoint:nth-child(breakpoint.min)  { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

@breakpoint:nth-child(breakpoint.max) >= @breakpoint:nth-child(breakpoint.min)  { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

breakpoint::before @breakpoint:nth-child(4n) >= breakpoint:nth-child(breakpoint.min)  { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

breakpoint::after @breakpoint:nth-child(4n) >= breakpoint:nth-child(breakpoint.min)  { /*  600px >= 500px */
.menubar {
   display: flex;
   width: breakpoint:nth-child(4n);
 }
}

.menubar {
   display: flex;
   width: breakpoint:nth-child(--min1);
 }

.menubar {
   display: flex;
   width: var(--min1)[1];
 }

.menubar {
   display: flex;
   width: var(--min1):nth-child(4n);
 }

@media (breakpoint:nth-child(4n)<= width < breakpoint:nth-child(1n)) { }

So what do you all think of these ideas? it makes sense or not?

[tabatkins]

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.

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?

[ghost]

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.

I tried convincing to have a breakpoint syntax to solve the presented problem with the media property in the css. I have tried to demonstrate the current syntax and a proposed syntax here with arrays and :nth-child(), :nth-of-type() in the media property.

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.

I believe my life would be better having a media property with array, nth-child(), nth-of-type()

I tried to use the argument that the current syntax could be improved with the syntax I demonstrated.

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.)

I hadn't noticed that, I just followed my imagination of what the syntax would look like. Thank you very much for having found this flaw that I had not seen when I wrote the proposal here. I tried to say that this syntax could help solve the common problem of breakpoints as mentioned in media property.

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,

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. Things like :nth-child(), :nth-of-type() are already found in the css proposal, but not used in the media property.

and why something like the suggested syntax would make things better?

My main argument with the idea of arrays, :nth-child(), :nth-of-type() is to auto-generate breakpoints for each media type, device. Things like :nth-child(), :nth-of-type() are already included in the css, what we need to do is more uniformity with the syntax already used in css for the media property, to make the media property easier to use.

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:

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

And ranges can be expressed like this:

@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:

.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];:

@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]

@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):

@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.

[Loirooriol]

Glancing over your proposal, it seems you want:

• A way to use variables in @media. This can be covered by [css-env] Adding custom env() variables #2627
• A way to define lists and extract items from lists. This can be covered by spread() from [css-values-5] Add spread() to CSS #8391 and nth-value() from [css-values]: Express conditional values in a more terse way  #5009 (comment). I don't think this part seems particularly useful in your case, though.

Your example could then be something like

@custom-env --small 200px;
@custom-env --big 600px;
@media (width <= env(--big)) { /* @media (width <= 600px) {  */
  .menuBar { display: none; }
}
@media (width <= env(--small)) { /* @media (width <= 200px) {  */
  .menuBar { display: none; }
}

or

@custom-env --sizes spread(200px; 600px);
@media (width <= nth-value(2; env(--sizes))) { /* @media (width <= 600px) {  */
  .menuBar { display: none; }
}
@media (width <= nth-value(1; env(--sizes))) { /* @media (width <= 200px) {  */
  .menuBar { display: none; }
}

[tabatkins]

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.

The issue is that I'm not sure why you're wanting to do this. All that's been done so far is showing syntax examples; you haven't explained what this syntax is helping you do, and why you believe it's worthwhile. This is what I meant by my explanation of use-cases.

For example, if we were to try and justify adding the mathematical/range syntax to MQs today, the argument would be something like:

• min-* and max-* can be confusing in practice; you use min-* to set up an MQ for things larger than a value, while max-* is for things smaller than a value. min-* makes more sense in things like min-width, where you're applying a minimum to a value, but it's easier to get confused when it's being used in a comparison sense like this. width <= 500px is much harder to misunderstand.
• min-* and max-* are defined as being >= and <=, which makes it hard/impossible to accurately express consecutive ranges. (width < 500px) and (width >= 500px) correctly cover a range; exactly one of them matches any given length, and you never have both or neither matching.
• writing an MQ for a finite range is pretty common, but pretty verbose to express - (min-width: 500px) and (max-width: 1000px). (500px <= width < 1000px) is compact, easy to read, and well-known from languages like Python.

These explain why this particular syntax is good, and what they're fixing about the previous syntax. It's both fixing things that are fundamentally impossible in the old syntax (having consecutive ranges that work reliably), and making opinion-based improvements, with explanations for why those opinions are worth addressing.

[ghost]

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 , we have a switch case for media queries:

@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

@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?

@breakpoint: [600px; 200px; 100px; 500px; 400px; 250px];

"vs"

@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)

@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:

@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:

@custom-env --some-items: spread(1200px; 768px; 425px);
@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; */
  }
}

why can't we add nth-value in the css property that comes from an array?

@custom-env --some-items: spread(1200px; 768px; 425px);
@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);

vs

@minWidth:   [1200px; 768px; 425px];
@fontSize:  [24px; 20px; 16px];
@padding:  [50px; 30px; 10px];
@margin:   [50px; 25px; 25px; 12.5px; 12.5px];

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