CSS w końcu doczekał się If/Else!

Kiedy zacząłem kodować w CSS w 2011 roku, nigdy bym nie podejrzewał, że język ten przejdzie taką metamorfozę. Pamiętam, jak używałem PIE.htc, żeby border-radius działał we wszystkich przeglądarkach i mojego kolegę z pracy tworzącego skrypt PHP, który generował PNG do zaokrąglania rogów.

W ostatnich kilku latach w CSS pojawiło się wiele nowych funkcji. Dla niektórych będą to “instrukcje if”, jak w stylu @supports:

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

(Myślisz, że mój komentarz w CSS to pomyłka? Otóż nie. CSS posiada komentarze jednowierszowe. Są one po prostu trochę dziwne.)

Istnieje również klasyczne media query, z których można korzystać już od ponad dekady:

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

Mamy też nową funkcję clamp(), która nieco się wyróżnia i wygląda mniej więcej tak:

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

Ale zachowuje się w ten sposób:

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

Masz rację, clamp() przyprawia mnie czasem o zawrót głowy. Ale są to tylko dyskusyjne “instrukcje if”, nad którymi można by długo debatować. Chcąc zastosować instrukcję “if/else”, musielibyśmy zrobić coś takiego:

@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 {}
}

Co jest irytujące!

Ale na szczęście możemy się już trochę uspokoić, dzięki nowo zaproponowanej instrukcji @when. Działa to mniej więcej tak:

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

Co jest dość ciekawe. Ale co z naszym “else”?

@when media(max-width: 1000px) {
   //maybe a mobile device {}
} @else {
   ///maybe a desktop{}
}

I z naszym else/if!?

@when media(max-width: 1000px) {
   //maybe a mobile device {}
} @else media(max-width: 700px) { {
   ///totally a mobile device{}
} @else {
   //a desktop or tablet{}
}

Instrukcja if/else? Nie gadaj!

Prawdopodobnie moglibyśmy zrobić to także w ten sposób:

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

Mówię “prawdopodobnie”, ponieważ specyfikacja jest nadal dopracowywana, ale hej, jeśli Chris Coyier już to świętuje, to my też możemy!

Wiem, co sobie myślisz. Dlaczego @s? Inne języki tego nie potrzebują. Teoria jest taka, że z powodu użycia przez SASS @if, twórcy martwią się o zepsucie stron internetowych. Cała koncepcja tworzenia stron internetowych nie polega na tym, aby je zepsuć. Fajnie, ale nie sądzę, że standard sieciowy powinien być dostosowany do oprogramowania innych firm, zwłaszcza dlatego, że SASS również używa @else.

Więc nie wciskajcie mi tu kitu.

Jak wygląda obsługa przeglądarki w momencie pisania tego tekstu (8 października 2021)? Kiepsko. Tak kiepsko, że nie ma tego nawet na Can I Use?. Ale z coraz to nowszymi stylami CSS, jestem pewien, że wkrótce coś zobaczymy.

A co Ty sądzisz o instrukcjach if/if-else? Daj znać w komentarzach!

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.