BACK
Scris de Marius Chiriac

Sintaxe noi puternice CSS pentru web development

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.

Mai multe articole

INOVEO a scris

INOVEO semneaza proiectul de rebranding pentru GURSK

Companie de distributie de implanturi si solutii complete pentru medicii stomatologi. Bucuresti, iunie 2025 – INOVEO, agentie de branding cu 25 de ani de experienta, a semnat proiectul de rebranding pentru GURSK, prima companie care [...]

Read More... from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul

INOVEO a scris

Ce ramane viu intr-o lume care invata sa mimeze viata?

Acest articol pleaca de la ideile care s-au conturat in timpul si imediat dupa recentele discutii de la IQ Digital, editia proaspat incheiata, desfasurata intr-un loc cu totul special: Cazinoul din Constanta – o bijuterie [...]

Read More... from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul

INOVEO a scris

Logo-ul nu conteaza

… chiar atat de mult cat crezi Spune pe bune, ai alocat ore intregi sau zile sau poate chiar saptamani in dezvoltarea unui logo pentru compania ta sau brandul tau? Cu siguranta ca da. Gandeste-te [...]

Read More... from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul

INOVEO a scris

Cat costa luxul

Pretul nu e o simpla eticheta. E o declaratie. Si, cel mai important, e parte integranta din procesul de constructie a brandului. Brandurile de lux nu vand produse. Vand statut, aspiratie, apartenenta la un cerc [...]

Read More... from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul