CSS，可以写 if/else 语法了？

@when

// if
@when media(max-width: 1000px) {
   // 做点什么
}

// if else
@when media(max-width: 1000px) {
   // 移动
} @else {
   // 平板
}

// if、 else、 if else
@when media(max-width: 1000px) {
   // 移动
} @else {
   // 平板
}

还可以更骚一点，类似于 if 嵌套 if

@when media(max-width: 700px) {
   @when (prefers-color-scheme: dark) {
      //dark mode on mobile device
   } @else {
      //light mode on mobile device 
   }
}

再回顾一下可以做自适应的一些css方法

@media：（媒体查询）
多用于适配屏幕大小来控制样式，B端和移动端常用方案

@media (max-width: 1000px) {
   
}

@supports:
可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明

@supports (border-radius: 50%) {
  // don't use PIE.htc! {}
}

clamp：
用来设置随窗口大小改变的宽度大小，也可以设置字体等等(见MDN demo示例)

width: clamp(1000px, 50%, 10vw);

// 也可以写这么骚的写法
width: clamp(1000px >= (50% >= 10vw));

文章借鉴于 前端小智 [大迁世界]

还有什么更简便，更骚的css写法在评论区一起交流一下