Od verzie Chrome 137 je dostupná nová CSS funkcia if(), ktorá umožňuje podmienečne aplikovať štýly na základe zadaných podmienok. Táto funkcia prináša do CSS logiku, ktorá bola doteraz dostupná len pomocou JavaScriptu alebo preprocesorov ako Sass či Less.
Syntax je nasledujúca:
if(condition1: value1; condition2: value2; ... else: defaultValue;)
Podmienky sú definované vo forme condition: value
, kde condition
je logický výraz, ktorý môže obsahovať rôzne CSS funkcie ako media()
, style()
a ďalšie. Ak je podmienka splnená, použije sa príslušná hodnota. Ak žiadna z podmienok neplatí, použije sa hodnota uvedená pri else
.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title<Document</title> <style> .card { --bg1: #df1d1d; --bg2: #077878; --bg3: #ffff00; height: 10em; background-color: if(media(width <=350px): var(--bg1); media(width <=700px): var(--bg2); else: var(--bg3); ); } </style> </head> <body> <div class="card"> <p<This backgroud of the card changes with the width of the window using pure CSS.</p> </div> </body> </html>
V tomto príklade sa farba pozadia karty mení v závislosti od šírky okna. Ak je šírka väčšia alebo rovná 350 pixelom, použije sa červená farba ( --bg1
). Ak je šírka väčšia alebo rovná 700 pixelom, použije sa zelená farba ( --bg2
). Ak žiadna z podmienok nie je splnená, použije sa žltá farba ( --bg3
).
CSS tak dostáva novú funkciu, ktorá je typická pre programovacie jazyky. V blízkej budúcnosti pribudne možnosť tvorby svojich vlastných funkcií a tiež sa zvažuje zavedenie match výrazov.