Fata de inceputurile sale din anii 90, CSS-ul (Cascading Style Sheets) a evoluat enorm cu functii din ce in ce mai puternice care ofera multe tool-uri dezvoltatorilor de website sa isi vada vizunea lor pusa online.

Cateva din aceste functionalitati noi pe care orice programator de front-end ar trebui sa le invete sunt:

1. Selectorul :is

Aceasta preia ca argument o lista de selectori si alege orice element care se regaseste in aceasta lista. In acest mod se previne scrierea de selectori foarte lungi. Spre deosebire de :matches sau :any (ambele depricate), :is permite folosirea de selectori complexi.

Astfel codul CSS de tipul:

header a:hover,
nav a:hover,
section a:hover,
acticle a:hover,
aside a:hover {
  cursor: pointer;
}

devine:

:is(header, main, footer, article, aside) a:hover {
  cursor: pointer;
}

2. min(), max() si clamp()

Daca nu ai incercat aceste functii inca atunci iti recomand sa incepi imediat sa le folosesti. Iti vor permite creearea de website-uri responsive mai complexe. Aceste functii “matematice” iti vor usura viata foarte mult si pot fi folosite oriunde sunt acceptate valori de dimensiuni precum font-size sau width.

min() si max() sunt destul de auto-explicative. Poti introduce doua sau mai multe valori si va fi aleasa valoarea cea mai mica sau cea mai mare. Partea cea mai buna este ca poti folosi valori de tipuri diferite, fixe sau relative, cum sunt px, vw sau %. De exemplu poti seta width: min(400px, 20%, 15em) si rezultatul va fi valoarea cea mai mica din cele trei.

clamp() nu functioneaza decat cu 3 valori si esential inlocuieste folosirea de min, max si valoarea normala dorita. De exemplu width: clamp(100px, 70%, 1000px) va putea inlocui:

min-width: 100px;
width: 70%;
max-width: 1000px

3. aspect-ratio

Este foarte recent adaugat in CSS si momentan are suport nativ doar pe Chrome si Edge, dar in curand browserele Safari si Firefox vor intruduce si ele support, fiind deja inclus in versiunile beta/alpha. Spre deosebide de poze sau alte elemente similare, majoritatea elementelor HTML nu au un aspect ratio inherent. Aici intervine noua functionalitate adaugata de aspect-ratio. Daca setam unui element un width si apoi setam aspect-ratio de 1 atunci elementul respectiv se va transforma intr-un patrat el setand automat inaltimea in functie de latime.

Toti dezvoltatorii care vor sa faca un website responsive si pixel perfect se vor bucura de aceasta functionalitate puternica. Recomand sa asteptati pana cand Safari si Firefox lanseaza si ei pe piata suport nativ, dar cel mai probabil aspect-ratio va deveni in curand una din cele mai puternice arme folosite de catre programatorii de front-end, ne mai fiind necesare “hack-uri” folosind padding sau JS.