Durante l'ultimo evento Codemotion di Milano, sono state toccate due principali tematiche: l’intelligenza artificiale generativa (una sorpresa prevedibile!) e la crescente attenzione al carico cognitivo di chi lavora nel settore IT, con diversi spunti su come gestirlo al meglio (se vuoi approfondire l'argomento ti consiglio l'ultimo articolo di Mariano a riguardo).

Non sono mancate però le occasioni di tornare alle basi del web e ai suoi elementi fondamentali. In un ambiente dove framework e tool come Svelte e Tailwind dominano la scena, è stato interessante scoprire che non sempre occorre reinventare la ruota e aggiungere ulteriori step per creare soluzioni innovative. Semplificare i processi permette di ottenere interfacce moderne e performanti e allo stesso tempo rendere il lavoro più facile a noi sviluppatori.

CSS3? Un po’ di chiarezza.

CSS è il linguaggio che controlla lo stile di un'applicazione web e negli ultimi 10 anni si è evoluto in maniera costante. Fino a ieri ancora si parlava di CSS3, ma forse la versione comincia a stare un po' stretta.

Il CSS working group, ovvero la comunità che segue i lavori sullo standard, dopo anni di discussione ha finalmente deciso di adottare un approccio modulare; CSS è diventato così un linguaggio in continua evoluzione, in cui ogni modulo (come Flexbox, Grid, Animations, Color) si sviluppa e viene aggiornato con nuove specifiche indipendentemente dagli altri, permettendo a designer e sviluppatori di beneficiare immediatamente delle ultime innovazioni. Questo approccio rende CSS un linguaggio estremamente flessibile e allineato ai bisogni dell’ecosistema web, favorendo un’evoluzione continua e sostenibile.

5 novità di CSS che devi sapere

Le novità introdotte negli ultimi anni sono tantissime, ma in questo articolo voglio mostrartene 5 che, nella loro semplicità, avranno un grosso impatto sul futuro del web.

1. Centrare un elemento

La centratura orizzontale e verticale di un elemento è uno dei problemi più classici di CSS ed è un ottimo esempio per far capire quanto il linguaggio si sia evoluto nel tempo.

1. Inizialmente (parliamo degli anni 2000), l’elemento doveva essere posizionato in maniera assoluta al 50% dall’alto e dal lato sinistro, con margini negativi pari a metà della sua altezza e larghezza. Una soluzione complessa e poco intuitiva!

2. Con l’avvento delle trasformazioni (nel 2012) è diventato possibile posizionare l'elemento relativamente con translate(-50%, -50%), rendendo superfluo conoscere le sue dimensioni in anticipo.

3. Poi, nel 2017 Flexbox e Grid hanno ulteriormente semplificato la centratura con poche proprietà, come align-items e justify-content.

Oggi finalmente ci bastano 2 regole:

[data-example='padre'] {
align-content: center;
}
[data-example='figlio'] {
margin: 0 auto;
}

2. Un mondo di colore

Lo sapevi che un comune display sRGB può rappresentare solo il 35% dei colori visibili all'occhio umano?

Fortunatamente sempre più pannelli supportano lo standard DCI-P3, uno spazio colore più ampio (circa 45% dello spettro visibile), che offre tonalità più vivide e saturate. Questo consente ai designer di creare esperienze visive più ricche su dispositivi che supportano P3, migliorando l’impatto e la fedeltà dei colori nelle immagini e nelle interfacce grafiche. Quasi tutti gli smartphone di ultima generazione hanno display P3.

Senza entrare nei meandri matematici della teoria del colore, per poter accedere a questi nuovi colori è necessario usare un modello colore basato sui parametri di luminosità (L), chroma (C) e hue (H) e abbandonare il caro e vecchio RGB. Ma non preoccupatevi, la fatica la facciamo noi sviluppatori, voi godetevi solo i colori più brillanti!

Provate a vedere se il vostro display supporta P3 e che differenza fanno i colori cliccando qui.

Il gamut P3 al momento è nativamente supportato solo da Safari e Google Chrome, serve un display compatibile.

🎨 color-mix()

Sarebbe bello usare i colori online come se fosse una tavolozza, vero? Con questa funzione ora è possibile mescolare i colori all'interno di uno specifico spazio colore.

.colors {
      background-color: color-mix(
        in oklch, // spazio colore
        red, // colore di partenza
        blue var(--percentage) // colore da mescolare in percentuale
      );
    }

Ci sono tantissime altre novità che riguardano gamut, spazi colore relativi, conversioni e funzioni per gestire in maniera intelligente il contrasto dei testi su sfondo. Ma non voglio annoiarvi troppo!

3. Top Layer

Lo sapevate che anche le pagine web sono degli oggetti tridimensionali? Scommetto di no!

L'attributo z-index serve a identificare il livello di un elemento e a definirne la priorità visiva rispetto agli altri elementi. Questo parametro si usa per avere ad esempio un menu che resta sempre sopra il contenuto della pagina, o per fare in modo che elementi fissi non vengano coperti durante lo scorrimento. Il top layer è un nuovo livello che viene riservato dal browser ad alcuni elementi e sarà sempre superiore rispetto a qualunque z-index definito per gli elementi in pagina.
Il risultato? Niente più popup coperti da altri elementi!

dialog()

A proposito di popup, finalmente questi elementi sono disponibili nativamente (anche se serve ancora un pizzico di JS)! Non è più necessario appoggiarsi a pesanti script e plugin per gestire i propri popup. Ma è sufficiente sfruttare il markup nativo <dialog> e i popup fatti in questo modo useranno sempre il top layer!

<!-- Button that triggers the dialog --> 
<button onclick="document.getElementById('popup').showModal()">
  Apri popup
</button> 
<!-- Dialog element --> 
<dialog id="popup"> 
  <p>Questo è un popup</p>
  <button onclick="document.getElementById('popup').close()">
    Chiudi
  </button>
</dialog>

4. Transizione da height:auto

L'animazione di height: auto in CSS è stata una sfida di lunga data per gli sviluppatori web. Tradizionalmente, CSS richiede un valore di altezza specifico per l'animazione, rendendo impossibile la transizione da/verso height: auto direttamente. Questa limitazione ha sempre costretto gli sviluppatori a ricorrere a JavaScript per calcolare e animare le altezze degli elementi.

Non più grazie alla funzione calc-size()!

calc-size al momento è supportata solo da Google Chrome e Microsoft Edge. Altri browser non mostreranno l'animazione.

See the Pen Animate height: auto; by Zeno (@zenotds) on CodePen.

5. Scroll Animation

Animazioni native allo scorrimento? Ma cos'è un sogno?!
Grazie ai parametri animation-timeline è ora possibile senza dover ricorrere a pesanti e complicate soluzioni Javascript.

.grid-item {
        animation: zoom-in linear both;
        animation-timeline: scroll(root block);
        will-change: transform, opacity, filter;
    }

animation-timeline al momento è supportata solo da Google Chrome e Microsoft Edge.

See the Pen Scroll demo by Zeno (@zenotds) on CodePen.

E tanto altro ancora...

Ovviamente non finisce qui. Il mondo del CSS continua a evolversi rapidamente e offre nuove funzionalità e possibilità che vanno ben oltre quelle che conoscevamo fino a oggi, come il nesting nativo, nuove chiavi per la specificità, le direttive @scope, le container queries che aprono un nuovo mondo di layout responsive, microinterfacce e tanto tanto altro ancora!
Ogni aggiornamento porta con sé nuove opportunità per rendere i nostri progetti web più moderni, performanti e facili da utilizzare.

Se cerchi un modo per ottimizzare il tuo sito, migliorare le performance e l'esperienza utente, richiedi una consulenza senza impegno.
Studieremo insieme la soluzione migliore per far fare al tuo sito un vero salto di qualità!