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

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul „one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

Citeste tot articolul from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul

INOVEO a scris

Beneficiile de a avea un blog pe website-ul tau

In era digitala in care traim, un website bine dezvoltat nu mai este suficient pentru a atrage si retine atentia publicului. Un blog pe website-ul unei companii poate aduce numeroase beneficii, de la cresterea prezentei [...]

Citeste tot articolul from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

Citeste tot articolul from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul

INOVEO a scris

Optimizarea portofoliului de branduri

Optimizarea unui portofoliu de brand implica gestionarea si organizarea strategica a ofertei de produse ale unei companii pentru a maximiza valoarea globala a marcii si cota de piata. Pentru a optimiza portofoliul de marci pentru [...]

Citeste tot articolul from Sintaxe noi puternice CSS pentru web development

Citeste tot articolul