Modern CSS

Ad oggi, per il mondo tecnologico è in corso un’era prosperosa in cui le tecnologie e gli strumenti per utilizzarle sono in continuo sviluppo e miglioramento. In questa prospettiva, il CSS (Cascading Style Sheets) non è da meno e ogni anno vengono rilasciate nuove funzionalità e migliorate delle vecchie, grazie al costante lavoro del World Wide Web Consortium (W3C), l’organizzazione internazionale che sviluppa standard per garantire la crescita del Web a lungo termine.

W3C

Formato da persone che rappresentano diversi interessi nel web, inclusi sviluppatori dei più noti browser, questo gruppo di ingegneri si riuniscono virtualmente per discutere, ideare e sviluppare caratteristiche CSS che rispondano alla domanda più importante: di cosa hanno bisogno gli utenti?

Prima di addentrarci però nelle più ambite novità del momento, bisogna fare un passo indietro per comprendere a pieno come si è arrivati all’era moderna dei fogli di stile.

Primo Livello dei Fogli di Stile a Cascata

Il CSS nasce ufficialmente nel 1996 nella sua versione 1.0, come soluzione alla crescente necessità di separare il contenuto dalla presentazione nelle pagine web.

Tuttavia, la prima genesi di questa necessità nasce già nel ‘93. Nonostante questo, le richieste da parte degli utenti del primordiale World Wide Web di avere maggiore controllo sulla formattazione delle proprie pagine, che fino ad allora era affidata unicamente ai browser, erano state solo parzialmente soddisfatte da Marc Andreessen, co-fondatore di Netscape (il primo browser della storia), che introdusse i tag presentazionali nell’HTML, come ad esempio "<center>" per centrare il testo.

Riprendendo le parole di Håkon Wium Lie, fondatore del CSS, nella sua tesi di presentazione dell’HTML :

"..Il linguaggio si evolse dall'essere un linguaggio di marcatura astratto e strutturato dove gli autori marcavano le differenti regole logiche del testo (paragrafi, intestazioni, elenchi e così via) in un concreto linguaggio di presentazione dove l'enfasi è posta sulla presentazione della forma finale dei documenti (font, colori e layout).”

Continua poi:

"..fu un passo indietro nella scala d'astrazione. Diversi nuovi elementi (per esempio BLINK) avevano senso solo per particolari dispositivi di output (come viene visualizzato il testo lampeggiante su un sistema di sintesi vocale?). I creatori dell'HTML volevano che tale linguaggio fosse utilizzabile per molte impostazioni ma i tag presentazionali minacciavano l'indipendenza dal dispositivo, l'accessibilità e il riutilizzo del contenuto, (oltre che) l'equilibrio di potere tra autori e utenti."

Queste ed altre criticità, come la confusione nel mescolare contenuto con istruzioni di stile, che rende il codice più difficile da leggere e mantenere, hanno dunque portato alla nascita della stilizzazione dei contenuti web come li conosciamo.

Cosa si intende per CSS moderno

Quando si può considerare una feature CSS moderna? Possiamo rispondere a questo legittimo quesito facendo riferimento, comunemente, alle specifiche introdotte con CSS3, che hanno aperto la strada a design più complessi, talvolta dinamici e interattivi.

Il CSS3 è strutturato in moduli per facilitare l’aggiornamento e l’espansione: animazioni, transizioni, layout flessibili e molto altro.

Tuttavia però, non è corretto affermare che moderno equivale a “migliore” mentre il vecchio a “peggiore”, si tratta di adattamento alle esigenze moderne, e soprattutto al contesto in cui si sta operando; vi sorprenderebbe sapere cosa è possibile fare oggi con CSS vanilla!

Un esempio sono i pre-processori come Sass, relativamente sempre meno utili in quanto molte funzionalità sono state portate nel semplice CSS:

Custom Properties (variabili) - Supportato

Si dichiarano prefissandole con -- , a cui segue una proprietà che può essere qualsiasi valore CSS valido:

section {
    --main-bg-color: brown;
}

Questo definisce lo scope in cui può essere utilizzata; per questo motivo, una common practice è quella di definire le variabili nella pseudo-classe :root, così che siano disponibili globalmente:

:root {
    --main-bg-color: brown;
}

A sua volta, questa variabile si può utilizzare in altre dichiarazioni sfruttando la funzione var().

section {
    background-color: var(--main-bg-color);
}

Nesting (annidamento dei selettori) - Working Draft

Se siete amanti di estensioni di stile come Sass saprete bene che uno dei “superpoteri” più utili di questo preprocessore è l’abilità di annidamento delle regole di stile.

A tal riguardo, il W3C sta sviluppando un modulo che descrive il suo supporto, consentendo di aggregare stili correlati in una singola struttura all’interno del documento CSS.

Prima:

table.colortable td {
    text-align:center;

}

table.colortable td.c {
    text-transform:uppercase;
}

table.colortable td:first-child, table.colortable td:first-child+td {
    border:1px solid black;
}

table.colortable th {
    
    text-align:center;
   
    background:black;

    color:white;
}

Dopo:

table.colortable {
    & td {
      text-align:center;

      &.c { text-transform:uppercase }

      &:first-child, &:first-child + td { border:1px solid black }

    }

    & th {

      text-align:center;

      background:black;

      color:white;
    }

}

Oltre a rimuovere duplicazioni, il raggruppamento di regole tra parenti migliora leggibilità e manutenibilità del codice.

Questa ed altre sono le regole di sintassi su cui si sta lavorando in questo modulo.

CSS Layout: Flexbox VS Grid

Flexbox

Ormai noto da anni, Flexbox risolve quell’enigma sempreverde di uno sviluppatore: come si centra un div?

Questa funzionalità, utile per strutturare componenti di scala più piccola, si concentra sulla relazione tra l’elemento genitore (flex-container) con i suoi elementi figli (flex-items).

La sintassi può essere a tratti complessa ma per fortuna l’argomento è stato ben approfondito sul web attraverso webinar, video e articoli.
Credo però che imparare divertendosi renda il processo di apprendimento ancora più efficiente, a proposito di questo l’azienda codepip ha sviluppato un gioco in browser. L’obiettivo? aiutare le rane a raggiungere le ninfee attraverso le regole flexbox!

CSS Grid

La proprietà CSS Grid è una moderna tecnologia volta alla creazione di layout web più complessi; introdotta per risolvere i problemi associati alle tecniche di layout tradizionali come float (in disuso), è una soluzione robusta e facile da mantenere per i design di layout bidimensionali (righe e colonne), offrendo un maggiore controllo rispetto a flexbox su come gli elementi vengono posizionati e allineati.

Quando si parla di griglie, solitamente si utilizzano le frazioni fr, unità di misura frazionarie responsive:

.grid-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: 30px 50px 20px;
}

Una grid-area è uno spazio condiviso da 4 grid lines, viene utilizzata per assegnare un nome specifico a una cella della griglia, mentre grid-template-areas viene utilizzata per definire il layout della griglia utilizzando questi nomi di cella.

Ogni riga della stringa rappresenta una riga della griglia e ogni carattere all'interno della riga rappresenta una cella:

.grid-container {

    display: grid;
   
 grid-template-areas:
    
"header header header"
   
 "sidebar main main"
   
 "footer footer footer";
}


.header {
    grid-area: header;
}


.sidebar {
    grid-area: sidebar;
}


.main {
    grid-area: main;
}


.footer {
    grid-area: footer;
}

In questo modo possiamo vedere ad occhio dove si posizioneranno gli elementi.

In generale, se vogliamo un layout flessibile (la disposizione si adatta al contenuto), sceglieremo flex; al contrario, se vogliamo un layout più fisso (il contenuto si adatta alla disposizione), la scelta ricadrà su grid.

La magia delle Houdini APIs

Houdini è un set di APIs che espone parti del motore CSS, dando la possibilità agli sviluppatori di estendere CSS agganciandosi direttamente al processo di styling del motore di rendering di un browser. Queste API forniscono accesso diretto al CSS Object Model: ciò significa che il browser analizza il codice sotto forma di CSS, lo scopo?

Riuscire a creare nuove funzionalità senza dover attendere che vengano implementate nativamente nei browser.

Un sito chiamato “Is Houdini Ready Yet” è stato creato appositamente per tenere traccia del suo supporto nei browser.

Tra le varie funzionalità che offre, possiamo individuare API a basso livello, queste servono come fondamenta per quelle di alto livello: Paint API e Layout API. Sono considerate tali perché permettono l’espansione delle capacità CSS durante le fasi di painting e layouting.

Paint API

Paint è una funzione che fornisce accesso agli elementi durante la fase di rendering.

.textarea {
    background-image: paint(checkerboard);

}

La checkerboard è un worklet, uno script JS indipendente dallo script principale attraverso cui è possibile creare immagini personalizzate che possono essere poi usate come sfondi, bordi o contenuto stesso di un elemento.

Vediamo un esempio di worklet per una semplice scacchiera:

// checkerboard.js

class CheckerboardPainter {

    paint(ctx, geom, properties) {

      // Use `ctx` as if it was a normal canvas
    
 const colors = ['red', 'green', 'blue'];

      const size = 32;

      for(let y = 0; y < geom.height/size; y++) {

        for(let x = 0; x < geom.width/size; x++) {

          const color = colors[(x + y) % colors.length];

          ctx.beginPath();

          ctx.fillStyle = color;

          ctx.rect(x * size, y * size, size, size);

          ctx.fill();

        }
      }
    }
  }

// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);
 

I worklet possono arrivare in vari modi, si possono importare come segue, con CDN o semplicemente come un pacchetto scaricabile attraverso npm.

if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('checkerboard.js');
}

Il risultato:

Layout API

Questa API fornisce allo sviluppatore un metodo per creare layout personalizzati con design complessi o veri e propri modelli di layout nuovi.

Un esempio sono i layout “masonry”, diventati popolari perché offrono una presentazione visiva efficace dei contenuti, consentendo agli utenti di esplorare facilmente una grande quantità di informazioni; uno dei più noti website a farne uso è Pinterest, le cui immagini vengono disposte a griglia e ogni pin (elemento) ha un’altezza variabile che si adatta al contenuto.

Chiunque abbia provato a costruire un layout simile in CSS comprenderà bene i dolori e le sfide legate al calcolo dinamico delle posizioni degli elementi; ebbene con questa API tutto diventa più semplice sfruttando la funzione layout:

body {
    display: layout(masonry);
    --padding: 35;
    --columns: 4;
}

Quello che rimane da fare è sviluppare il worklet:

// masonry.js
class MasonryLayout {

    async layout(children, edges, constraints, styleMap) {

      const inlineSize = constraints.fixedInlineSize;

      const columnGap = parseInt(styleMap.get('--column-gap'));

      const columnCount = parseInt(styleMap.get('--column-count'));

      const columnWidth = (inlineSize - columnGap * (columnCount - 1)) / columnCount;
 
      let columns = new Array(columnCount).fill(0);
 
      for (const child of children) {

        // Determine the column with the smallest height

        const columnIndex = columns.indexOf(Math.min(...columns));
 
        const x = columnIndex * (columnWidth + columnGap);

        const y = columns[columnIndex];
 
        child.inlineOffset = x;
        child.blockOffset = y;
 
        const childFragment = await child.layoutNextFragment({ fixedInlineSize: columnWidth });

        child.fragments.push(childFragment);
 
        columns[columnIndex] += childFragment.blockSize + columnGap;

      }
 
      const maxColumnHeight = Math.max(...columns);

      return { autoBlockSize: maxColumnHeight };

    }
  }
 
  registerLayout('masonry', MasonryLayout);

Infine, lo carichiamo nel file JS come la checkerboard precedente:

if ('layoutWorklet' in CSS) {
    CSS.layoutWorklet.addModule('masonry.js');
}

Conclusione - come rimanere aggiornati

Con la costante pubblicazione di novità CSS è difficile stare al passo e se 10 anni fa era possibile affermare di conoscere ogni suo aspetto, al giorno d’oggi sarebbe irrealistico; il consiglio è quello di adattarsi agli strumenti della comunicazione moderna:

• W3C CSS drafts repo
  La repo ufficiale del W3C. Ogni cosa che viene discussa è una issue e gli utenti possono leggerle, commentare, aprire nuove issues. E’ completamente open source e altri punti di vista, che siano su bug o novità, sono sempre ben accetti.

• Canali Youtube
  Un esempio è Layout Land, canale gestito da Jen Simmons, facente parte del gruppo W3C, oltre che sviluppatrice di Mozilla. Attraverso brevi video, spiega com’è possibile tradurre le possibilità e l’immagine del graphic design nei layout.

• Blog e Magazine
  Tra i più famosi, CSS-Tricks e Smashing Magazine sono tra le risorse più valide e affidabili in questo campo.

Con un occhio attento alle novità e un impegno costante nel miglioramento delle proprie competenze, è possibile garantire agli utenti esperienze web sempre più innovative e all'avanguardia. Continuate a esplorare, sperimentare e imparare - il futuro del CSS è luminoso e pieno di opportunità!