Cheatsheet CSS3: Proprietăți & Sintaxă

Găsește instant sintaxa corectă pentru cele mai utilizate proprietăți și specificații CSS3. Folosește bara de filtrare în timp real pentru a izola selectori, reguli de layout, culori sau animații.

Filtrează:

Proprietate / Sintaxă	Categorie	Explicație & Valori uzuale
`display: flex;`	Layout	Activează containerul unidimensional Flexible Box pe copiii direcți.
`display: grid;`	Layout	Activează containerul bidimensional Grid pe linii și coloane.
`grid-template-columns`	Layout	Definește coloanele: `repeat(auto-fit, minmax(280px, 1fr))` pentru responsivitate automată.
`gap: 16px;`	Layout	Spațiere uniformă între rânduri și coloane în containere Flexbox și Grid.
`place-items: center;`	Layout	Scurtătură Grid pentru centrare perfectă pe ambele axe (align + justify).
`box-sizing: border-box;`	Box Model	Include padding-ul și border-ul în lățimea și înălțimea totală declarată a elementului.
`aspect-ratio: 16 / 9;`	Box Model	Forțează proporția fixă între lățime și înălțime (ideal pentru video și avatare).
`width: clamp(200px, 50%, 800px);`	Box Model	Valoare fluidă ce oscilează între o limită minimă, o valoare ideală și o limită maximă.
`border-radius: 8px;`	Box Model	Rotunjește colțurile elementului. Sintaxa cu 8 valori permite forme organice de tip blob.
`object-fit: cover;`	Box Model	Decupează imaginile sau clipurile video pentru a umple containerul fără distorsiuni de aspect.
`box-shadow`	Culori & Efecte	Generează umbre: `0 10px 25px -5px rgba(0,0,0,.15);`
`backdrop-filter: blur(10px);`	Culori & Efecte	Creează efectul de sticlă mată (glassmorphism) pe fundalul din spatele elementului.
`linear-gradient()`	Culori & Efecte	Degrade vectorial liniar: `linear-gradient(135deg, #0e2a47, #d6472e);`
`color-mix(in srgb, red 40%, blue);`	Culori & Efecte	Amestecă dinamic două culori într-un spațiu cromatic dat, direct în CSS nativ.
`transition: all .2s ease;`	Animații	Animează fluid schimbările de stare (hover, focus, active).
`transform: translate3d(0, -4px, 0);`	Animații	Deplasează elementul accelerat hardware pe GPU fără a declanșa reflow de pagină.
`@keyframes`	Animații	Definește secvențe complexe de animație cu pași procentuali (0%, 50%, 100%).
`will-change: transform;`	Animații	Informează browserul din timp pentru alocarea unui strat compozit dedicat pe GPU.
`:has()` (Parent Selector)	Selectori	Selectează părintele care conține un anumit copil: `article:has(img)`.
`:is()` / `:where()`	Selectori	Grupează selectori: `:where()` are specificitate zero, facilitând suprascrierea.
`:focus-visible`	Selectori	Afișează conturul de focus doar utilizatorilor de tastatură (esențial pentru accesibilitate).
`:nth-child(2n + 1)`	Selectori	Selectează elementele impare dintr-o listă sau tabel (efect zebră).

Ghid de Bune Practici

Reguli de Aur în Utilizarea Sintaxei CSS3 Moderne

Un cheatsheet este un instrument excelent de productivitate, însă utilizarea eficientă a proprietăților CSS necesită înțelegerea principiilor fundamentale de arhitectură software:

1. Evită Suprascrierea cu Shorthands Implicite

Când folosești proprietăți prescurtate precum background: #fff;, browserul resetează automat și background-image: none, background-position: 0% 0% și background-repeat: repeat. Dacă dorești doar să schimbi culoarea, specifică explicit background-color: #fff; pentru a nu suprascrie stilurile moștenite.

2. Calculează Specificitatea Înainte de a Folosi !important

Directiva !important rupe cascada naturală a stilurilor și creează datorie tehnică masivă. Folosește pseudo-clasele moderne :where() (care are specificitate 0) pentru stiluri de bază și @layer pentru a organiza stilurile pe niveluri logice.

3. Prioritizează Compunerea pe GPU pentru Animații

Singurele două proprietăți CSS garantate să nu declanșeze cicluri costisitoare de Layout sau Repaint sunt transform și opacity. Pentru butoane, meniuri mobile sau carduri animate, evită animarea proprietăților width, height, top sau box-shadow.

Recomandare Editorială: Salvează această pagină în bara de semne de carte (Bookmarks) apăsând Ctrl + D (sau Cmd + D pe Mac) pentru acces instant la sintaxă în timpul dezvoltării de zi cu zi.

Ciprian P. & Echipa Tehnică css3.ro

Senior Front-End Architect • Specializare W3C CSS Modules

Dezvoltator web cu peste 12 ani de experiență practică în arhitecturi front-end, sisteme de design scalabile și optimizarea performanței de randare (Core Web Vitals). Fiecare articol și generator de pe css3.ro este testat riguros cross-browser (Chromium, Gecko, WebKit) pentru a asigura precizie tehnică absolută și conformitate cu standardele deschise.

Despre echipa editorială → Jurnal actualizări & W3C → Semnalează o eroare →