CSS can also write if/else syntax

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

When I started writing CSS in 2011), I never doubted how much the language would change. I still remember using PIE.htc to make border-radius suitable for all browsers, and my colleague made a PHP script to generate a PNG to round the corners.

However, in the past few years, a large number of new CSS features have appeared. Some of these statements can also be treated as if statements, such as @supports style:

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

There is also a classic media query that has been around for over a decade:

 @media (max-width: 1000px) {
  //maybe a mobile sized device? {}
}

There is also a new one camp() , which is a little different:

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

but behave like this:

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

It looks like a headache.

But these can be said to be just if 语句 . If we want a if/else statement, we need to do something like this.

 @media (max-width: 1000px) and (prefers-color-scheme: dark) {
   //maybe a mobile device in dark mode {}
}
@media (max-width: 1000px) and (prefers-color-scheme: light) {
   //maybe a mobile device in light mode {}
}

It's annoying.

But the good news is that the newly proposed @When feature can solve our troubles. It is used like this:

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

This is cool, but even cooler is else :

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

You may have thought of it, and there must be else if , yes, there is really:

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

It is also possible that we could do this:

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

I say "probably" because the feature is still under proposal, but I'm sure it will come out eventually ( I dyed my hair green ).

At present (20211023), what is the browser support? zero. So little that there is no Can I Use . But as new CSS styles keep rolling out, I'm sure we'll see it soon.

---

The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .

Author: Kenton de Jong Translator: Front-end Xiaozhi Source: codingnconcept

Original: https://kentondejong.medium.com/css-is-finally-getting-if-else-statements-3fabcec72a1f

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.