CSS 2021

CSS 2021: una panoramica sullo stato dell’arte

CSS 2021 – analizzare lo stato dell’arte del CSS è un’indagine abbastanza difficoltosa: da una parte la mancanza di dati, dall’altra l’essenza stessa della materia che vogliamo trattare.

Se per i dati ci siamo appoggiati allo studio effettuato da The State of CSS, dall’altra dobbiamo premettere la complessità della questione: la risposta a quale sia lo stato dell’arte del CSS potrebbe essere diversa a seconda di chi fornisce la propria opinione, forse si potrebbe definire uno stato del CSS valutando caso per caso, metodologia per metodologia, framework per framework e proprietà per proprietà.

Definire lo stato dell’arte del CSS è una questione quasi ineffabile: quello che si può fare è intravedere le tendenze confrontandosi con i mezzi a disposizione, con il passato e le nuove esigenze.

Centrare un DIV: fra passato e futuro

Nei tempi in cui non esisteva il concetto di “mobile-first”, dunque parliamo di qualche anno fa quando non ci si doveva nemmeno preoccupare di tutti i device disponibili oggi, avremmo potuto centrare un div più o meno così:

.container {
  position: relative;
} 

.block { 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

Con l’introduzione di Flexbox, qualche anno dopo, il nostro codice poteva apparire già più breve:

.container {
  display: flex;
  justify-content: center;
  align-items: center
} 

Oggi, invece, possiamo cavarcela con 2 linee di codice:

.container {
  display: grid;
  place-items: center;
}

Il W3C introdusse i fogli di stile nel 1996 e dopo due anni, per inserire nuove specifiche, vennero presentati i CSS2. Lo sviluppo di CSS3 partì nel 1999, solo un anno dopo la presentazione della sua versione precedente e il W3C vi ha lavorato per più di 12 anni fino al rilascio della prima versione stabile.

La semplice centratura di un DIV ci dimostra come il CSS è cambiato e si è evoluto, ulteriori grandi cambiamenti sono in atto, altri devono senza dubbio ancora arrivare: appare evidente come si complichi la definizione del CSS oggi; un qualcosa in continuo mutamento e revisione.

Tendenze

Per migliorare la situazione dei fogli di stile sono stati utilizzati, storicamente, 3 approcci fondamentali:

  1. Revisione ed evoluzione dello standard (CSS1, CSS2, CSS2.1, CSS3, ecc.)
  2. Creazione di Framework CSS
  3. Arricchimento dello standard CSS tramite meta-linguaggi (SCSS, SASS, Stylus, ecc.)

Analizzando il questionario di State of CSS possiamo intravedere alcune tendenze del mutamento del CSS che sono in atto oggi e che corrispondono ai diversi approcci. Possiamo suddividerle in:

  • Nuove proprietà
  • Frameworks utility-first
  • CSS-in-JS

Nuove proprietà

Inserire nuove proprietà CSS si riflette anche su altri aspetti dello stile e gli effetti sono evidenti: l’uso di Grid potrebbe consentire di gestire più dimensioni di viewport senza dover scrivere alcuna media query.
Una singola proprietà potrebbe sbloccare un’intera gamma di nuove possibilità rendendo obsolete soluzioni alternative, come dimostrato nell’esempio all’inizio di questo articolo. Se si considerano tutte le nuove funzionalità rispetto a quelle introdotte nel 1996 si ha l’immagine di un CSS completamente nuovo e diverso.
Le nuove proprietà possono essere suddivise in 7 categorie:

  • Layout: ovvero come posizionare gli elementi sullo schermo.
    Grande rivoluzione degli ultimi anni è stata l’adozione di Flex e Grid: la percentuale di sviluppatori che utilizzano Grid è passata dal 54.7% nel 2019 al 73.3% nel 2020, mentre l’uso di Flexbox è rimasto costante con una percentuale di utilizzo altissima (circa il 97%).
  • Forme e grafiche: riguarda le forme e la visualizzazione di componenti.
    Possiamo notare, in questa categoria, che dal 2019 al 2020 c’è stato un notevole aumento nell’uso di proprietà come object-fit e clip-path, mentre è rimasto costante quello del blend mode e dei filtri e effetti.
  • Interazioni: controllano come gli utenti interagiscono con gli elementi della pagina.
  • Tipografia: concerne l’impostazione e stesura del testo.
  • Animazioni & Trasformazioni: si occupano di animare e trasformare elementi.
  • Media Queries: ovvero come adattare il sito ai dispositivi e alle preferenze dell’utente.
    Fra queste possiamo citare ‘prefers-color-scheme’ che segue la tendenza della modalità dark degli ultimi tempi; questa permetterebbe la creazione di temi che si adattano dinamicamente alle impostazioni dell’utente.
  • Altre funzionalità
    In questa sezione possiamo inserire l’uso di variabili CSS utilizzate, oggi, da quasi il 75% degli sviluppatori contro circa il 60% dell’anno prima. Le CSS Custom Properties, in questo contesto, sono forse gli elementi più degni di nota in quanto utilizzano un costrutto che si avvicina molto a quello usato nei linguaggi di programmazione e dai maggiori pre-processori come SASS.
    Anche l’utilizzo di calc() che ci permette di fare calcoli matematici porta il CSS sempre di più verso la direzione dei linguaggi di programmazione, differenziandosi non poco dai fogli di stile di qualche anno fa.

E qui riusciamo a intravedere un punto focale della direzione del CSS 2021: può essere considerato, oggi, un linguaggio di programmazione?

css 2021 proprietà
Panoramica sull’uso di nuove proprietà

L’era del CSS utility-first

All’alba del Web se volevamo i titoli verdi scrivevamo:

<font color=”green”>Titolo</font>

Un bel lavoro di cerca e sostituisci se all’improvviso i titoli non fossero più stati verdi ma gialli; il CSS ha risolto immediatamente questo inconveniente con un semplice

 h1 {color:green}

I framework utility-first, ovvero basati su classi di utilità, rimangono sempre molto popolari ma a differenza degli anni scorsi è Tailwind a prendere il comando a livello di soddisfazione e interesse, sebbene non per utilizzo, dove ancora primeggia Bootstrap (26% di uso per TailWind, dato cresciuto del 20% in un solo anno, e 86% per Bootstrap ).
Bootstrap per tasso di interesse, ovvero la proporzione di non-utilizzatori interessati ad apprendere una tecnologia, si trova in ultima posizione.
Cosa significa? Tailwind è meglio di Bootstrap? Tailwind è più moderno?
l motivo principale per questo scatto di Tailwind CSS è che probabilmente si tratta di un framework a basso livello. Ciò vuol dire che Tailwind CSS non ci fornisce, ad esempio, elementi “preconfezionati” ma ci permette di costruire qualsiasi cosa in maniera molto dettagliata e puntuale. Facciamo un esempio con un button:

//bootstrap
<button type=”button” class=”btn btn-success”>
  Invia
</button>

//tailwind
<button class=”bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded”>
  Invia
</button>

Bootstrap potrebbe apparire più semplice in quanto si utilizza meno codice ma con Tailwind abbiamo un controllo maggiore sullo stile rispetto ad altri frameworks.

Trapstudio Blog CSS 2021 8

Da notare che il grafico ci suggerisce come in questo ecosistema non esistano solo frameworks e che il CSS 2021 è dominato anche dal secondo approccio esposto in precedenza ovvero l’arricchimento dello standard: SASS e BEM hanno il miglior rapporto fra soddisfazione e utilizzo, maggiore anche di quello dei frameworks. Questo potrebbe indicarci qualcosa? La situazione del CSS migliora maggiormente con l’introduzione di meta linguaggi?

CSS-in-JS

CSS-in-JS permette di creare CSS con la sintassi di Javascript, legando insieme gli stili con i componenti e sfruttando, quindi, appieno le funzionalità native del mondo JS.

La necessità di utilizzare la sintassi nativa del CSS viene meno: non serve gestire le dipendenze, il CSS è finalizzato a determinati componenti e non a un intera pagina o sito, rendendo più semplice includere regole di stile specifiche per ciascun elemento.

Uno dei punti focali di React è proprio l’ approccio basato sulla modularità dei componenti che aiuta a creare componenti riutilizzabili. Esistono diverse implementazioni di questo concetto sotto forma di librerie che consentono di creare componenti e possiamo notarne una crescita nell’uso e nell’interesse molto sostanziosa.

Trapstudio Blog CSS 2021 1
Librerie CSS-in-JS utilizzate

Cosa manca al CSS

Trapstudio Blog CSS 2021 3

Fra le funzionalità più richieste sicuramente spiccano le Container Query e il Parent Selector, infatti al momento con il CSS non è possibile puntare al genitore di un determinato componente ma solo al figlio.

Altre funzionalità che risultano mancanti sono comunque state implementate da alcune estensioni del CSS, come il nesting e il mixin in SASS.

Container Query

Nello sviluppo moderno è auspicabile che un componente sia autonomo rispetto al resto del layout così da poterlo aggiungere o spostare senza interferire con gli altri componenti della pagina.

Inoltre deve essere responsive e adattarsi a seconda della situazione in cui viene inserito: questa situazione non deve corrispondere obbligatoriamente alla larghezza della pagina.

Trapstudio Blog CSS 2021 4

Per esempio la card qui sopra potrebbe essere visualizzata in una sidebar o all’interno della pagina; se c’è spazio dovrebbe essere visualizzata con l’immagine affiancata altrimenti con l’immagine sopra al testo.

Si tratta dello stesso componente ma per ottenere questi due risultati diversi bisogna identificare il componente in qualche modo o aggiungendo una classe come eccezione o utilizzando un selettore padre che ci indica dove è inserito il componente.

Le container query permettono un comportamento responsive relativo alla situazione, all’area in cui viene inserito senza specificare quale sia l’area rendendolo indipendente dal layout senza l’uso di classi aggiuntive o selettori per identificarne la posizione.

Stato dell’arte

Dal sondaggio di Stateofcss emergono diverse opinioni che potrebbero dare un’ulteriore panoramica dell’andamento dei fogli di stile.

  • CSS è un linguaggio di programmazione?
    Abbiamo sollevato il dubbio se si possa considerare il CSS un linguaggio di programmazione: è un’opinione che, alla luce di quanto emerso fino ad ora, sembra comunque crescere leggermente. Se non altro si è dimezzato chi era fortemente in disaccordo.
Trapstudio Blog CSS 2021 5
  • Quale formato viene utilizzato per i test?
    Il concetto di mobile-first si afferma sempre di più, raggiungendo quasi il formato desktop: è chiaro, dunque, che il CSS si deve adeguare di conseguenza a questa tendenza con un mix degli approcci che abbiamo citato.
Trapstudio Blog CSS 2021 6
  • Il CSS si evolve troppo lentamente?
    Il CSS evolve. Lentamente o no, la cosa certa è che sta evolvendo.
    Lo stato delle cose, con uno sguardo al passato, ci mostra chiaramente i cambiamenti che il mondo CSS sta affrontando e attraversando in questo momento.
    Il rischio è proprio quello di rimanere indietro: le versioni più vecchie dei browser non supportano le nuove tecnologie.
    Le innovazioni nei codici potrebbero essere più veloci dell’adattamento di alcuni browser causando problemi di retrocompatibilità: se il codice si evolve e il browser no è un problema. E non piccolo.
Trapstudio Blog CSS 2021 7

Una questione complicata

Il CSS è stato spesso criticato come troppo complicato, arbitrario o “non un vero linguaggio di programmazione” tuttavia bisogna considerare il sistema solido che è diventato per stilizzare differenti aspetti del Web; i molti ruoli che ha ricoperto e la direzione che sta prendendo e che abbiamo analizzato.  

Sempre più sviluppatori CSS si sono inoltrati nel mondo JavaScript, e d’altra parte, gli sviluppatori JavaScript iniziano a rendersi conto che il CSS non si riduce a un semplice “font-weight: bold”.

Abbiamo sollevato molte domande a cui è difficile dare risposta ma dalle quali abbiamo intravisto potenzialità e criticità e la cosa interessante è forse proprio come i numerosi strumenti, tecnologie, metodologie, framework, librerie facciano parte di un ecosistema in via di sviluppo dove ognuno ha un posto ben preciso, non per forza migliore o peggiore, senza annullare quello che già esiste e che lascia spazio alle diverse esigenze degli sviluppatori che mutano in base al contesto dei loro stessi progetti.

Fonti dati:
-State of CSS Survey https://www.kaggle.com/sachag/state-of-css