named-breakpoints-function.css

/*

<breakpoints-list> := <custom-ident> <breakpoints-func> [ ',' <custom-ident> <breakpoints-func> ]*

<breakpoints-func> := '--breakpoints(' <breakpoint>* <custom-ident> [ <breakpoint> <custom-ident>]* ')'

<breakpoint> := <number> | 'portrait' | 'square' | 'landscape' …etc

*/

/* Using named breakpoints for describing element query breakpoints for width */
div {
  --observe-width: --breakpoints(narrow 500 wide);
}

/* Describing named breakpoints for more than one condition */
div {
  --observe-width: --breakpoints(narrow 500 wide);
  --observe-height: --breakpoints(short 500 tall);
}

/* Using a breakpoints list to describe breakpoints for more than condition */
div {
  --observe:
    width --breakpoints(narrow 500 wide),
    height --breakpoints(short 500 tall)
}


/* Just for fun, here are different formattings of the same information: */

/* single line, individual conditions */
div {
  --observe-width: --breakpoints(0 narrow 500 wide);
  --observe-height: --breakpoints(0 short 500 tall);
}

/* multiline, individual conditions */
div {
  --observe-width: --breakpoints(
    0 narrow
    500 wide
  );
  --observe-height: --breakpoints(
    0 short
    500 tall
  );
}

/* single-line, multiple conditions */
div {
  --observe: width --breakpoints(narrow 500 wide), height --breakpoints(short 500 tall)
}

/* multiline, multiple conditions */
div {
  --observe:
    width --breakpoints(narrow 500 wide),
    height --breakpoints(short 500 tall)
}

/* another multiline, multiple conditions, having fun with the visual placement of terms */
div {
  --observe:

    width --breakpoints(

      /*   ←   -   →  */  
      narrow  500  wide

    ),
    height --breakpoints(

      short  /* ↑ */
      500    /* | */
      tall   /* ↓ */
    
    )
  ;
}