Chrome CSS'da if() funksiyasini support qilishni boshladi

Photo Credits: Chrome For Developers

if() funksiyasi CSS spetsifikatsiyasining bir qismidir va the if() notation bo‘limida tasvirlangan. Bu standartning bir qismi bo‘lsa-da, hozircha faqat loyihalash (draft) bosqichida. Chrome birinchi bo‘lib ushbu funksiyani qo‘llab-quvvatlashni boshladi.

Sintaksis

if() funksiyasi shartli qiymatlarni qisqa tarzda ifodalash imkonini beradi. U bir nechta shart-qiymat juftliklarini qabul qiladi, ular nuqtali vergul bilan ajratiladi.

Funksiya har bir shartni ketma-ket baholaydi va birinchi marta rost (true) deb baholangan shartga mos qiymatni qaytaradi. Agar hech bir shart rost bo‘lmasa, funksiya bo‘sh token oqimini qaytaradi.

Sintaksis:

selector {
  color: if(
      style(<shart>): <qiymat>;
      style(<yana-bir-shart>): <qiymat>;
      else: <qiymat>;
  );
}

Misol:

div {
  color: var(--color);
  background-color: if(
    style(--color: white): black; 
    else: white
  );
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

Bu zo‘rmi?

Ha, albatta! Biz JavaScript'da pattern matching'ni kutayotgan bir paytda, bu CSS'ga allaqachon qo‘shildi.

Lekin bu nimasi bilan zo‘r? if() CSS'da ifoda (expression) hisoblanadi, ya'ni u ichidagi ifodaning natijasini qaytaradi. JavaScript'dagi if esa boshqaruv konstruksiyasi bo‘lib, ifoda emas. Shu sababli u ko‘proq ternar operator (?:) ga o‘xshaydi, klassik if'ga emas.

Brauzerlar tomonidan support

Ushbu post yozilgan vaqtda, if() funksiyasi Chrome 137-versiyasi va undan yuqorilarida qo‘llab-quvvatlanadi. Boshqa brauzerlar hali shoshilmayapti. Firefox jamoasi bu yerda, Apple foydalanuvchilari esa shu yerda.