CSS nativo, il linguaggio più temuto dai Frontend Developer. C’è chi lo ama e chi lo odia.
In questo articolo, proverò a spiegarti perché io personalmente lo amo sempre di più. Parleremo di CSS nativo e di come negli ultimi anni, il CSS si è evoluto e ha raggiunto molte funzionalità messe a disposizione da pre processori come SASS e LESS.
CSS Nesting
Il CSS Nesting è una funzionalità introdotta di recente in CSS, che permette di scrivere regole annidate in maniera più leggibile e concisa, simile a quanto accade nei preprocessori CSS come SASS o LESS.
Quindi, non avrete più bisogno di utilizzare dei pre processori ma di default potrete scrivere CSS in questo modo:
article {
color: black;
& h1 {
font-size: 2rem;
}
& p {
line-height: 1.5;
}
}
Ma i browser cosa ne pensano?
Di seguito le compatibilità dei principali browser (aggiornato a Gennaio 2025).
Supporto dei browser: https://caniuse.com/css-nesting
Cos’è @scope?
@scope consente di definire un contesto o un ambito (scope) per i selettori CSS.
Invece di applicare stili globalmente o dipendere da regole di specificità e nidificazione complessa, è possibile restringere l’applicazione degli stili a un sottogruppo specifico del DOM.
Un esempio molto pratico:
@scope (section) {
h1 {
color: blue;
}
}
In questo caso, verrà applicato lo style solo agli h1 presenti all’interno dei tag section.
Questo permette di definire del CSS mirato e ben definito all’interno di uno scope.
Come potrai constatare dal seguente link, @scope non è ancora supportato completamente da tutti i browser moderni.
Supporto dei browser: https://caniuse.com/css-cascade-scope
A cosa serve @layer?
@layer è una direttiva CSS che consente di definire livelli di stile (layers) con una gerarchia di priorità.
Funziona per organizzare il CSS in sezioni ben definite e per garantire che le regole di stile più importanti abbiano la precedenza su quelle meno rilevanti, anche se vengono definite più tardi nel codice.
Di seguito un esempio di sintassi:
@layer base {
h1 {
color: blue;
}
}Code language: CSS (css)Appunto in merito alle priorità, nota bene una cosa molto importante. Guarda questo esempio:
@layer utilities {
h1 {
color: green;
}
}
@layer base {
h1 {
color: blue;
}
}Code language: CSS (css)In questo caso, la regola in utilities avrà priorità su quella in base perché utilities è stato dichiarato per primo, anche se la regola in base appare più tardi nel foglio di stile.
Supporto dei browser: https://caniuse.com/css-cascade-layers
Color scheme
Tutti i più recenti sistemi operativi, browser e di conseguenza applicazioni supportano la modalità dark e light. Da questo punto di vista, CSS ci viene incontro con la @media query prefers-color-scheme.
Con questa media query, possiamo andare a definire delle variabili, ma anche del CSS specifico per una modalità o per l’altra.
Un esempio pratico:
:root {
--background-color: white;
--text-color: black;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: black;
--text-color: white;
}
}
body {
background-color: var(--background-color);
color: var(--text-color);
}Code language: CSS (css)Supporto dei browser: https://caniuse.com/?search=prefers-color-scheme
Is e has
:is
La pseudo-classe :is() (abbreviazione di “is”) permette di scrivere selettori più concisi e leggibili combinando più selettori in una singola dichiarazione.
Prima
section h1, article h1 {
font-size: 2rem;
}Code language: CSS (css)Dopo
:is(section, article) h1 {
font-size: 2rem;
}Code language: CSS (css):has
Il pseudo-classe :has() in CSS è un selettore relazionale che permette di applicare stili a un elemento in base ai suoi discendenti, figli o anche fratelli successivi.
Di seguito un esempio molto semplice, dove andremo ad applicare del CSS SOLO ai div che contengono al loro interno un tag p:
div:has(p) {
border: 2px solid blue;
}Code language: CSS (css)Conclusioni
Negli ultimi anni, il CSS si è evoluto enormemente, incorporando funzionalità che prima erano possibili solo attraverso l’uso di pre processori come SASS o LESS.
Migliorie come il CSS Nesting, @scope, @layer, e le pseudo-classi :is e :has rendono il linguaggio più potente e flessibile, permettendo agli sviluppatori di scrivere codice più leggibile, organizzato e mirato.
In particolare:
- Il CSS Nesting elimina la necessità di preprocessori per scrivere regole annidate, semplificando la struttura dei fogli di stile.
- @scope introduce un controllo granulare sugli stili, migliorando la modularità del CSS.
- @layer consente di definire gerarchie e priorità tra gli stili, evitando conflitti e migliorando la manutenibilità.
- La media query prefers-color-scheme supporta modalità dark e light in modo nativo, rispondendo alle esigenze moderne di accessibilità e design.
- Le pseudo-classi :is e :has migliorano la potenza espressiva dei selettori, rendendo il CSS più versatile e conciso.
Nonostante alcune di queste funzionalità non siano ancora pienamente supportate da tutti i browser, il panorama sta cambiando rapidamente.
È il momento ideale per iniziare a sperimentare con queste nuove caratteristiche e preparare i propri progetti per il futuro del web. Il CSS non è mai stato così moderno, efficiente e completo.
Bene, siamo arrivati alla fine di questo primo articolo di questa piccola rubrica dedicata al CSS. Prossimamente uscirà il secondo articolo che toccherà argomenti come: zoom, text-wrap e molto altro ancora!
