CSS5 e CSS6: cosa aspettarsi dalla nuova frontiera del web design

Anche il mondo del web design è in continua evoluzione, ecco perché il rilascio di nuove specifiche del CSS porta con sé scalpore e curiosità. Esatto, perché dal rilascio del CSS3, non si può parlare di vere e proprie versioni, quanto più di livelli, ossia approfondimenti di specifiche funzionalità, es: CSS Fonts Level 3, CSS Selectors Level 2, etc. Questo perché il CSS3 non venne rilasciato come singola specifica ma come sistema di moduli, che può quindi aggiornarsi e crescere nel tempo, potenzialmente all’infinito; CSS3 diventa uno standard.

Ma quindi cosa significano CSS5 e CSS6?

E’ dagli albori di internet che l’informatico ha sempre cercato di categorizzare periodi e tecnologie per comprendere meglio l’evoluzione di ciò che stava nascendo; etichettare le varie fasi crea punti di riferimento e dà un senso di progresso tangibile: è per questo motivo che la community dei fogli di stile , al momento, è coinvolta in un acceso dibattito sulla definizione delle nomenclature da accostare alle fasi del CSS.

Dato quello che abbiamo stabilito precedentemente, possiamo affermare che non c’è mai stato un rilascio ufficiale del CSS4, tantomeno nè del CSS5, nè del CSS6. Il termine è stato utilizzato ed è comparso numerose volte all’interno di articoli o forum, ma il W3C (World Wide Web Consortium, fondatore del CSS), non ha mai ufficialmente parlato di un CSS4 come versione successiva. È pur vero però che nel periodo antecedente al CSS3 sono state introdotte novità altrettanto rivoluzionarie tali da essere considerate qualcosa di distaccato. Di conseguenza, l’obiettivo di community come CSS Next è di aiutare a educare gli sviluppatori sull’ecosistema del CSS, costruire una comprensione quanto più oggettiva possibile dell’evoluzione delle funzionalità rilasciate dal 2009 in poi per raggrupparle in epoche riconoscibili.

Qui uno schema di come, fino ad ora, sono stati classificati i diversi livelli di CSS:

CSS3 (~2009-2012)

Senza dubbio una pietra miliare nell’evoluzione del linguaggio CSS, il suo approccio modulare ha permesso aggiornamenti e miglioramenti rapidi; tra specifiche più usate troviamo:

• Media queries: nasce il design responsive: queste consentono di adattare il layout a diverse dimensioni di schermo.
  
  Come si applicano:

/* Stili per schermi più larghi di 768px */

@media (min-width: 768px) {
    body {
        background-color: lightblue;
    }
}

/* Stili per schermi più piccoli di 768px */

@media (max-width: 767px) {
    body {
        background-color: darkblue;
    }
}

• Transizioni e animazioni: questa introduzione ha reso possibile creare effetti di movimento senza l’uso di JavaScript.
• Selettori avanzati: nuovi selettori come nth-child(), che permettono una selezione più coincisa degli elementi, rendendo il codice più pulito.

CSS4 (~2013-2018)

Termine associato alle caratteristiche che non erano state ancora implementate in precedenza.

Tra le più popolari troviamo:

• Flexbox Layout e Grid Layout: il primo, un potente sistema di layout che ha semplificato di molto l’allineamento e la distribuzione degli elementi in un contenitore; il secondo, più avanzato, è un sistema di layout bidimensionale che permette di costruire strutture più complesse. (abbiamo approfondito l’argomento qui! → https://unitiva.it/technology/modern-css) .
• Custom properties (CSS Variables): consentono di definire variabili personalizzate, aumentando la flessibilità e riusabilità del codice senza l’uso di librerie esterne.
• CSS Shapes: Permette di far fluire il testo intorno a forme geometriche, migliorando il design visivo delle pagine.

Comprendere le funzionalità sviluppate in questo periodo è largamente consigliato e considerato necessario per utilizzare il CSS ad un livello professionale.

CSS5 (~2019-2024)

Termine associato alle caratteristiche che non erano state ancora implementate in precedenza.

Questa la definizione per la maggior parte delle nuove funzionalità la cui adozione sta sempre più crescendo o si è già stabilita, lasciando un grande impatto su come si stilizza oggi. In particolare si pone maggiore enfasi sui seguenti aspetti:

• Flessibilità
• Modularità
• Prestazioni

Per i front-end developers questo si tradurrebbe nella possibilità di creare siti web più dinamici e accessibili, e in tempistiche ridotte.

Tra le novità principali, troviamo:

• Containers Queries: questa nuova funzionalità permette di applicare stili basati sulle dimensioni di un contenitore, anziché sul viewport. Questo rappresenta una svolta per il responsive design avanzato, permettendo una maggiore flessibilità e precisione nei layout.
  
  Come si applicano:
  

 /* Struttura HTML */
 
<div class="card-container">

            <div class="card">

              <h2>Title</h2>

              <p>Some text here</p>

              <img src="image.jpg" alt="Image">

            </div>

        </div>

.card-container {
	****container: inline-size; /* In questo modo, viene dichiarato il tipo di contesto per il container */
}

.card {
  border: 1px solid #ccc;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr; /* Inizialmente, tutti gli elementi (titolo, testo e img) sono disposti l'uno sotto l'altro */
  gap: 10px;
}

/* Container query: cambia layout quando la card è più larga di 400px */
@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 1fr; /* Adesso il layout è a due colonne: una per il testo e una per l'immagine */
  }
}

• Aspect Ratio: Gestione migliorata dei rapporti di aspetto (ad esempio mantenere proporzioni specifiche per immagini e video).
• Nuove funzioni in-built: Funzioni come min(), max(), e clamp() che semplificano la scrittura di layout dinamici senza passare per Javascript.

CSS6 (~2024+)

Ci si riferisce a una serie di funzionalità in fase di sviluppo o previste per il futuro. Molte di queste sono ancora in fase di proposta e non sono ampiamente adattate nei browser, ma rappresentano la prossima evoluzione del linguaggio:

• Cascade Layers: ti permettono di organizzare i tuoi stili in “strati” separati, consentendo maggior controllo su come vengono applicati in base alla loro priorità, infatti si chiamano così perché ogni strato ha la sua cascata interna, e puoi specificare quale layer è prioritario rispetto ad altri.
  
  Come si applicano:

 
/* Definiamo diversi strati con @layer */
@layer reset, base, theme, components;

/* Strato "reset" (base di partenza, priorità più bassa) */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* Strato "base" (stili di base per tutti gli elementi) */
@layer base {
  body {
    font-family: Arial, sans-serif;
  }

  .button {
    font-size: 16px;
    padding: 10px 20px;
    border: 2px solid black;
    background-color: white;
    color: black;
  }
}

/* Strato "theme" (personalizzazione del tema) */
@layer theme {
  .button {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
  }
}

/* Strato "components" (personalizzazione specifica di componenti) */
@layer components {
  .button {
    border-radius: 12px;
    font-weight: bold;
  }
}

N.B: Questo sistema segue un ordine gerarchico che rispetta la sequenza di definizione, questo consente di strutturare gli stili in modo chiaro e di risolvere eventuali conflitti tra stili in modo ordinato.

• CSS Houdini: Un insieme di API che permette agli sviluppatori di "entrare" nei processi di rendering del browser e di personalizzare come vengono interpretate e applicate le proprietà CSS. Questo potrebbe portare a innovazioni significative nel controllo del layout, delle animazioni e dello stile.
  
  
• Nesting: Possibilità di scrivere regole CSS annidate, simili a come funziona SCSS, che permetterà di organizzare il codice in modo più chiaro e gerarchico (e che, probabilmente, insieme ad altre integrazioni, renderà SASS obsoleto).
  

Innovazioni nel CSS: come farsi trovare pronti per le nuove frontiere del web design

Designer e sviluppatori potrebbero prendere in considerazione diversi percorsi per riuscire a non farsi cogliere impreparati.

Ad esempio con:

• formazione continua: riuscire a partecipare a workshop, webinar e conferenze dedicate, sia online che offline, tenuti da professionisti ed esperti è un primo ma fondamentale passo per riuscire a restare al passo con le innovazioni del CSS5 e, più in generale, del settore;
• documentazioni: quando il tempo scarseggia, possiamo sempre far affidamento su risorse ufficiali come W3C o MDN Web Docs che includono guide, tutorial e aggiornamenti dedicati, proponendo spesso casi d’uso ed esempi pratici che possono accelerare l’apprendimento;
• community e networking: costruire relazioni con altri professionisti, scambiarsi informazioni attraverso blog, forum o meetup non solo rafforza la comprensione personale, ma contribuisce anche alla crescita collettiva del settore.

Conclusioni

L’evoluzione del CSS potrebbe segnare un nuovo capitolo nel mondo del web design.

Ciò che è importante ricordare, come ogni volta in cui si discute di innovazione tecnologica, è che bisogna considerare sia le opportunità che le sfide a cui si va incontro.

Ecco perché investire tempo e risorse per comprendere e padroneggiare queste nuove tecnologie non solo garantirà maggiore competitività nel settore, ma permetterà anche di creare siti web più avanzati, user-friendly e innovativi.