Ani de zile, am presupus că CSS nu poate „gândi”. Totuși, aveam soluții alternative: @media, @supports, @container și variabile de rezervă Înainte ne permiteau să schimbăm stilurile în funcție de context. Acum apare o nouă funcționalitate care ridică ștacheta și se potrivește mai bine modului în care raționăm atunci când proiectăm: funcția condițională if() direct în valorile proprietăților.
Nu e fum: Începând cu Chrome 137, puteți testa dacă() pentru a crea stiluri inline cu logică condițională bazată pe stil, media și interogări de asistență. Cu toate acestea, asistența este încă limitată în afara Chromium, așa că este recomandat să o utilizați cu înțelepciune. combinându-l cu alternative pentru browserele care nu îl înțeleg.
Ce exista înainte: „condiționale” pe care le foloseam deja în CSS
Înainte de if(), CSS oferea deja mecanisme condiționale, fiecare cu propriul domeniu de aplicare. Nu sunt adevărate dacă, dar îndeplinesc pe pământul lor:
- @mediaAplică reguli dacă fereastra sau dispozitivul îndeplinește un criteriu (lățime, orientare, indicator etc.).
- @sprijinăActivează stilurile dacă browserul înțelege o caracteristică sau o valoare.
- @container: reacționează la dimensiunea sau stilul unui container, util pentru proiectarea bazată pe componente.
- var() cu valoarea implicită: nu este un if, dar permite „dacă variabila nu există, se utilizează această opțiune de rezervă”.
Aceste abordări sunt puternice, deși sunt „lipite” de scopul lor: suporturi media, suporturi sau containereFuncția if() nu înlocuiește aceste instrumente; dimpotrivă, le integrează perfect. intercalate și granulare în valorile proprietăților.
Ce este if() în CSS și de ce este important
Funcția dacă() vă permite să definiți, în cadrul valorii unei proprietăți, o listă de perechi condiție:valoare, evaluate în ordine. Când prima condiție este adevărată, valoarea asociată acesteia va fi cea care „câștigă”. Este un flux similar cu if…else de JS, dar încorporat în CSS.
În versiunea sa actuală, if() înțelege trei tipuri de interogări în cadrul condițiilor sale: stil() (interogări de stil pe elementul în sine), medie() (întrebări din partea presei) și suportă() (întrebări de asistență pentru funcții). În plus, puteți adăuga un altfel: valoare pentru a acoperi cazul în care nimic altceva nu se potrivește.
Sintaxă detaliată și evaluare
Structura generală este o listă de ramuri de tip separate prin punct și virgulă :Fiecare condiție este fie o (style(), media() sau supports()) sau cuvântul cheie altfel, care se evaluează întotdeauna ca adevărat.
/* Estructura básica */
propiedad: if(
style(--estado: activo): valor-1;
media(width < 700px): valor-2;
supports(color: lch(60% 50 40)): valor-3;
else: valor-por-defecto
);
Motorul evaluează ramurile în ordine. Primul care este adevărat returnează valoarea saDacă nicio condiție nu este adevărată și nu există nicio altă condiție, rezultatul funcției este garantat-invalid, care se comportă ca o valoare nevalidă și permite intră în joc soluțiile externe de rezervă (de exemplu, valoarea implicită a unei proprietăți personalizate sau o valoare anterioară în cascadă).
Un detaliu cheie: dacă o condiție sau o valoare specifică din listă este invalidă, nu invalidează întreaga funcție; parserul continuă cu următoarea pereche. Aceasta face ca if() rezistent la defecțiuni punctuale în cadrul ramurilor.
Tipuri de teste: style(), media() și supports()
style(): interogări de stil
Interogări de stil cu stil() vă permit să întrebați dacă elementul țintă are o anumită valoare pentru o proprietate (util în special cu proprietăți personalizate). Spre deosebire de interogările de stil @container, stil() În if() este evaluat asupra elementului în sine și imediat, fără a fi nevoie să depindă de un părinte.
/* Estado embebido en una custom property */
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7
);
}
În stil() poți folosi operatori logici și, or y nu, plus paranteze pentru grupare, ceea ce facilitează combinații complexe de state. Rețineți că interogările de stil ale @container astăzi nu acceptă proprietăți „normale” (doar unele personalizate), în timp ce stil() în interiorul funcției if() Este folosit pentru a decide valoarea unei singure proprietăți a elementului în sine.
media(): interogări media intercalate
cu medie() Puteți condiționa valoarea unei proprietăți cu o interogare media specifică, fără a separa stilul într-un alt bloc @media. Acest lucru este ideal atunci când vrei doar să modifici o proprietate în funcție de mediu.
/* Ejemplo para puntero fino vs grueso */
button {
aspect-ratio: 1;
width: if(
media(any-pointer: fine): 30px;
else: 44px
);
}
Acest bloc este echivalent cu scrierea unei reguli de bază plus o @media care redefinește proprietatea, dar concentrează logica într-un singur loc. De asemenea, puteți folosi tipuri de media (de exemplu, tipărire) sau funcții media cu logică și/sau/nu.
/* Media type */
.elemento {
background: if(
media(print): white;
else: #eee
);
}
/* Media feature con rango */
.caja {
margin: if(
media(width < 700px): 0 auto;
else: 20px auto
);
}
Dacă aveți nevoie modificarea mai multor selectori sau a mai multor proprietăți În același timp, un bloc @media tradițional este și mai bun. Pentru variații specifice ale unei singure instrucțiuni, if() este mai expresiv.
supports(): interogări de asistență
cu suportă() Întrebi dacă browserul înțelege o anumită caracteristică (proprietate, valoare, selector etc.) și alegi valoarea în consecință. Perfect pentru îmbunătățirea progresivă fără a duplica blocurile @supports.
/* Color de amplia gama si está soportado */
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3
);
}
/* Consulta de soporte de selector */
video {
outline-width: if(
supports(selector(:buffering)): 1em;
else: initial
);
}
Rețineți că pentru o ramură cu suportă() în interiorul funcției if(), browserul în sine trebuie suportă dacă()De aici și importanța definirii soluții solide de rezervă în afara funcției.
Frecvența și poziția altui lucru
Aveți posibilitatea să utilizați unul sau mai mulți alții în cadrul funcției și plasați-le oriunde doriți. Totuși, cea mai comună metodă este plasarea unei singure altfel la sfârșit ca valoare implicită. Dacă pui altceva la început, va câștiga întotdeauna și condițiile ulterioare nu va fi evaluat.
/* Útil para depurar: colocamos un else intermedio */
.elemento {
background-image: if(
style(--flag: on): url("ok.png");
else: url("debug.png"); /* si la primera no encaja, mostramos pista */
supports(background: paint(foo)): paint(foo)
);
}
În plus, o funcție dacă() compus doar din altfel: valoare, sau chiar gol, este valid din punct de vedere sintactic, deși nu este foarte util. Este mai bine să atribuiți valoarea direct dacă nu există logică.
Valori complete, valori parțiale și imbricare
Funcția poate lua întreaga valoare a unei proprietăți sau doar o parte din aceasta într-un stenografieAcest lucru permite compoziții foarte expresive fără a se abate de la aceeași afirmație, cu mai puțină repetiție de cod.
/* Decidimos solo el color dentro de un shorthand */
.box {
border: 2px solid if(
supports(color: lch(60% 50 40)): lch(60% 50 40 / 0.7);
else: rgb(100 120 200 / 0.7)
);
}
funcții dacă() se poate cuibări în altele dacă(), și, de asemenea, în roluri precum calc()Acest lucru permite o modelare a deciziilor mai fină fără a duplica selectorii sau a deschide blocuri noi.
/* Anidación doble: esquema y preferencia de color */
.elemento {
color: if(
style(--scheme: ice): if(
media(prefers-color-scheme: dark): oklch(85% 0.04 220);
else: oklch(35% 0.04 220)
);
style(--scheme: fire): if(
media(prefers-color-scheme: dark): oklch(90% 0.1 30);
else: oklch(40% 0.1 30)
);
else: black
);
}
/* calc() con porcentaje condicionado */
.panel {
width: calc(
if(style(--scheme: wide): 70%; else: 50%) - 50px
);
}
De asemenea, putem folosi if() pentru a decide părțile libere ale unei proprietăți ca o margine superioară într-o prescurtare sau o componentă specifică de fundal, fără a duplica ceea ce nu se schimbă.
Exemple practice intercalate
1) Buton accesibil în funcție de tipul de indicator
Dacă dispozitivul are un indicator fin (de exemplu, mouse), butonul va fi mai mic; pe ecranele tactile, l-am mărit la 44px pentru a respecta recomandările de accesibilitate. O afirmație, două comportamente.
button {
aspect-ratio: 1;
width: if(
media(any-pointer: fine): 30px;
else: 44px
);
}
Cele de mai sus sunt echivalente cu o bază + un bloc @media, dar astfel nu răspândești logica pe mai multe site-uri și reduc posibilitatea de erori.
2) Gamă largă de culori cu opțiuni de rezervă
Dacă browserul înțelege OKLCH, folosim acea culoare și, dacă tot suntem la asta, afișăm un mesaj informativ în ::dupăAltfel, aplicăm o hexagonă sigură. Compatibilitate fără dramă.
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3
);
}
body::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "Tu navegador admite OKLCH";
else: "Tu navegador no admite OKLCH"
);
}
Dacă vrei să explorezi diferența vizuală dintre RGB și spațiile moderne, aruncă o privire la resurse precum oklch.comVei vedea de ce merită să adopți aceste spații atunci când există sprijin.
3) Cărți care se schimbă în funcție de starea interfeței utilizator
Stochează starea în starea datelor, citește-l cu attr() către o proprietate personalizată și să ia decizii cu stil()O modalitate elegantă de a componente autonome.
<div class="card" data-status="complete">...</div>
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7
);
}
Cu acest model, modificarea atributului datelor în HTML modifică mai multe proprietăți fără a atinge CSS suplimentar sau JS care comută la clase.
Altfel și ordinea evaluării: cum se gândește if()
Condițiile sunt evaluate în ordinea în care aparPrima valoare adevărată returnează valoarea, iar evaluarea se oprește. Dacă niciuna nu reușește, rezultatul va fi garantat-invalid, care permite soluții externe de rezervă (de exemplu, o valoare anterioară în cascadă sau valoarea implicită a browserului).
De asemenea, puteți plasa altceva la mijloc Pentru depanare: dacă vrei să știi dacă o primă condiție nu funcționează, plasează o condiție else care returnează, de exemplu, o imagine „depanare” și așa mai departe. vizualizezi problema clar.
Soluții de rezervă pentru browsere fără if()
if() nu provoacă în mod magic o degradare automată: ai nevoie de o valoare de rezervarePlasați mai întâi o instrucțiune cross-browser-safe, apoi versiunea if() care o suprascrie atunci când este suportată. Este modelul recomandat.
.box {
padding: 16px; /* Fallback para navegadores sin if() */
padding: if(
style(--size: "2xl"): 24px;
else: 16px
);
}
Astfel, browserele fără if() vor folosi prima linie; cele care o acceptă o vor evalua pe a doua și îl va înlocui.
Compatibilitate și stare actuală
Conform celor mai recente informații furnizate, Chrome 137 permite acum testarea funcției if() iar Edge, în versiunea sa echivalentă, moștenește suportul. Alte surse amintesc că, în afara Chromium, implementarea nu este încă răspândit și că propunerea va continua să se maturizeze în cadrul W3C, așadar este recomandabil să se mențină așteptări realiste.
Unele estimări vorbesc de aproximativ Acoperire de ~47% deocamdată (la momentul lansării inițiale). Recomandarea mea este să îl utilizați în producție doar dacă controlați mediul sau dacă strategia ta de rezervă este solidă; în caz contrar, aplicați-o în straturi progresive sau în medii controlate.
Relația cu @media, @supports și @container
Regulile `if()` și `at` sunt complementare, nu se exclud reciproc. `@media` sau `@supports` sunt totuși mai bune atunci când vrei aplică seturi complete de reguli către mai multe proprietăți/selectori. if() este excelent atunci când ai nevoie de un decizie punctuală asupra unei singure valori, păstrând logica atașată proprietății, ceea ce facilitează întreținerea.
În designul orientat pe componente, duetul de @container (pentru a răspunde la aspectul containerului) și dacă() cu stil() (pentru a varia proprietățile specifice ale componentei în sine) deschide fluxuri foarte puternice și mai puțin verbos.
Propunerea @when și @else
Pe lângă if(), există propuneri precum @când / @altfel care impun condiționalități la nivel de regulă, cu o sintaxă concepută pentru a citește mai bine condițiile complexe care, odată cu @media și @supports legate între ele, devin dificil de întreținut.
@when media(width <= 600px) {
.container { display: flex; flex-direction: column; }
}
@else {
.container { display: flex; flex-direction: row; }
}
Puteți combina și, sau, nu și folosiți paranteze pentru grupare. În cazuri banale, un @media este suficient, dar în combinații mai bogate @when/@else câștigă lizibilitate.
@when media(width <= 600px) and supports(display: grid) {
/* ... */
}
@else media(width >= 600px) and supports(display: flex) {
/* ... */
}
@else {
/* Fallback final */
}
Aceste reguli sunt încă în evoluție, iar implementarea lor efectivă poate dura timp, dar ele vizează simplificați condiționalele extinse la nivelul foii de stil.
Modele, limite și sfaturi
- Păstrează ramurile ordonate pentru probabilitate și claritate. Primul adevărat câștigă, așa că sortați ținând cont de performanță și lizibilitate.
- Folosi altfel final ca valoare implicită; dacă o avansați, scurtezi evaluarea a restului condițiilor.
- Rețineți că if() decide câte o proprietate pe rândDacă trebuie să schimbați mai multe lucruri simultan, luați în considerare @media/@supports sau împărțirea lor în mai multe instrucțiuni.
- la depanare, adăugați o instrucțiune else între acestea cu o culoare strălucitoare sau o imagine de avertizare. Veți vedea rapid care ramură eșuează.
- Combina cu proprietăți personalizate pentru a exporta stări din HTML (atribute de date) sau din alți selectori și a decide valori fără JS.
- Evitați abuzul de condiționale înlănțuite foarte lungi; dacă pierdeți citirea, este timpul să extragere logică într-un alt loc.
Comparație rapidă cu „obișnuitul”
Înainte: base + @media/@supports cu rescrieri; acum: if() intercalat fără a diviza logica. Mai puțin CSS, mai multă coeziune locală în declarație. Câștigă întreținere.
Înainte: JS pentru comutarea claselor sau stărilor; acum: proprietăți personalizate + stil() pentru a decide proprietățile. Cu if() reduci dependența de cod imperativ pentru variații vizuale simple.
Note de implementare și combinații viitoare
Apariția lui if() coincide cu alte linii de evoluție a limbajului: interogări de stil à la carte, posibil interogări de interval integrat în viitor și în propunerea de @funcţie pentru funcții personalizate. Împreună, aceste piese atrag atenția declarativ și compozabil.
Deocamdată, concentrați-vă pe cele trei teste disponibile (stil(), medie(), suportă()) și consolidați-vă strategia de rezervă. Cu Chrome 137, puteți începe acum prototip și măsură impactul real asupra bazei tale de cod.
Ideea de „condiționale în CSS” a trecut de la a fi o iluzie la un instrument concret care, cu nuanțe, poate fi acum utilizat în medii compatibile. Cu if(), stilurile câștigă logică intercalată, mai puțină repetiție și o încapsulare mai bunăși se potrivește perfect cu variabile personalizate, atribute de date și interogări media. Deși suportul său nu este încă universal, adoptarea modelelor progresive și pregătirea pentru soluții de rezervă vă vor permite să începeți să beneficiați astăzi de o modalitate de a gândi despre CSS care este mai apropiată de modul în care proiectăm interfețele: luarea deciziilor exact acolo unde se aplică.