Stili web di nuova generazione

Aggiornati su alcune delle fantastiche funzionalità del CSS moderno.

Adam Argyle

Una Kravets

Al momento stanno accadendo tonnellate di cose entusiasmanti in CSS e molte sono già supportate nei browser odierni. La nostra conferenza al CDS 2019, che puoi guardare di seguito, illustra diverse funzionalità nuove e in arrivo che riteniamo potrebbero richiedere attenzione.

Questo post si concentra sulle funzionalità che puoi usare oggi, quindi assicurati di guardare la presentazione per approfondire le funzionalità in arrivo come Houdini. Potete anche trovare demo di tutte le funzionalità di cui parliamo nella nostra pagina CSS@CDS.

Sommario

• Scorrimento
• :focus-within
• Query supporti livello 5
• Proprietà logiche
• position: sticky
• backdrop-filter
• :is()
• gap
• CSS Houdini
• Riversamento

Scorrimento a scatto

Scorrimento orizzontale consente di definire i punti di agganciamento quando l'utente scorre i contenuti in verticale, in orizzontale o in entrambi i modi. Offre inerzia e decelerazione integrate dello scorrimento ed è abilitata al tocco.

Questo codice di esempio imposta lo scorrimento orizzontale in un elemento <section> con punti di agganciamento allineati ai lati sinistro degli elementi <picture> secondari:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

Ecco come funziona:

• Nell'elemento <section> principale:
  • L'app overflow-x è impostata su auto per consentire lo scorrimento orizzontale.
  • L'impostazione overscroll-behavior-x è impostata su contain per impedire lo scorrimento degli elementi principali quando l'utente raggiunge i limiti dell'area di scorrimento dell'elemento <section>. Questa operazione non è strettamente necessaria per l'agganciamento, ma di solito è una buona idea.
  • L'impostazione scroll-snap-type è impostata su x per l'agganciamento orizzontale e su mandatory per garantire che l'area visibile si agganci sempre al punto di agganciamento più vicino.
• Negli elementi secondari <picture> è impostato l'avvio di scroll-snap-align, che imposta i punti di agganciamento sul lato sinistro di ogni immagine (supponendo che direction sia impostato su ltr).

Ed ecco una demo dal vivo:

Puoi anche dare un'occhiata alle demo relative allo sgancio a scorrimento verticale e allo scatto di scorrimento matrice.

Nota: anche se l'agganciamento di scorrimento supporta l'agganciamento verticale, presta attenzione quando lo utilizzi a livello di pagina, poiché in alcuni casi potrebbe sembrare che l'utente abbia preso il controllo. In genere è meglio applicare l'agganciamento a un componente della pagina, anziché alla pagina stessa.

:focus-within

:focus-within risolve un problema di accessibilità di lunga data: in molti casi lo stato attivo di un elemento secondario dovrebbe influire sulla presentazione di un elemento principale in modo che l'interfaccia utente sia accessibile agli utenti delle tecnologie per la disabilità.

Ad esempio, se hai un menu a discesa con più elementi, questo dovrebbe rimanere visibile mentre uno qualsiasi degli elementi è attivo. In caso contrario, il menu scompare per gli utenti che usano la tastiera.

:focus-within indica al browser di applicare uno stile quando lo stato attivo è impostato su qualsiasi elemento secondario di un elemento specificato. Tornando all'esempio di menu, impostando :focus-within sull'elemento di menu, puoi fare in modo che rimanga visibile quando un elemento di menu è attivo:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

Prova a spostarti tra gli elementi attivabili della demo di seguito. Noterai che i menu rimangono visibili quando imposti lo stato attivo sulle voci di menu:

Query supporti livello 5

Le nuove query supporti ci offrono modi efficaci per modificare l'esperienza utente delle nostre app in base alle preferenze del dispositivo dell'utente. In sostanza, il browser funge da proxy per le preferenze a livello di sistema a cui possiamo rispondere nel nostro CSS utilizzando il gruppo prefers-* di query supporti:

Ecco le nuove query che riteniamo più interessanti per gli sviluppatori:

• preferisce-movimento-ridotto
• prefers-color-scheme
• prefers-contrast
• prefers-reduced-transparency
• colori-forzati
• colori-invertiti

Queste query sono molto efficaci per l'accessibilità. In precedenza, non avevamo modo di sapere, ad esempio, che un utente avesse impostato il proprio sistema operativo sulla modalità ad alto contrasto. Se volevi fornire una modalità ad alto contrasto per un'app web che rimanesse fedele al tuo brand, dovevi chiedere agli utenti di sceglierla dall'interfaccia utente dell'app. Ora puoi rilevare l'impostazione ad alto contrasto del sistema operativo utilizzando prefers-contrast.

Un'implicazione molto interessante di queste query supporti è che possiamo progettare per molteplici combinazioni di preferenze dell'utente a livello di sistema al fine di soddisfare l'ampia gamma di preferenze dell'utente ed esigenze di accessibilità. Se un utente vuole la modalità Buio ad alto contrasto in ambienti poco illuminati, è possibile farlo.

Per Adam è importante che "preferisce il moto ridotto" non venga implementato come "nessun movimento". L'utente dice di preferire meno movimento, non che non vuole animazioni. Afferma che il moto ridotto non è moto. Ecco un esempio che utilizza un'animazione a dissolvenza incrociata quando l'utente preferisce un movimento ridotto:

Nota: in Chrome Canary, puoi testare i CSS che utilizzano prefers-reduced-motion o prefers-color-scheme scegliendo le impostazioni appropriate nel riquadro a scomparsa Rendering di DevTools. Per accedere a Rendering, apri il menu Comando ed esegui il comando Show Rendering.

Proprietà logiche

Le proprietà logiche risolvono un problema che ha acquisito visibilità man mano che sempre più sviluppatori affrontano l'internazionalizzazione. Molte proprietà di layout come margin e padding presuppongono una lingua letta dall'alto verso il basso e da sinistra a destra.

Quando si progettano pagine per più lingue con modalità di scrittura diverse, gli sviluppatori hanno dovuto regolare tutte queste proprietà singolarmente su più elementi, il che diventa rapidamente un incubo per la gestibilità.

Le proprietà logiche consentono di mantenere l'integrità del layout in tutte le modalità di traduzione e scrittura. Vengono aggiornate dinamicamente in base all'ordinamento semantico dei contenuti anziché alla loro disposizione spaziale. Con le proprietà logiche, ogni elemento ha due dimensioni:

• La dimensione blocco è perpendicolare al flusso di testo in una linea. (In inglese, block-size è uguale a height).
• La dimensione in linea è Parallela al flusso del testo in una linea. (In inglese, inline-size è uguale a width).

Questi nomi di dimensioni si applicano a tutte le proprietà del layout logico. Quindi, ad esempio, in inglese block-start è uguale a top e inline-end è uguale a right.

Con le proprietà logiche, puoi aggiornare automaticamente il layout per altre lingue semplicemente modificando le proprietà writing-mode e direction della pagina anziché aggiornare decine di proprietà di layout per singoli elementi.

Puoi vedere come funzionano le proprietà logiche nella demo riportata di seguito impostando valori diversi per la proprietà writing-mode sull'elemento <body>:

position: sticky

Un elemento con position: sticky rimane nel flusso del blocco finché non inizia a uscire dalla schermata, a questo punto smette di scorrere con il resto della pagina e rimane nella posizione specificata dal valore top dell'elemento. Lo spazio allocato per l'elemento rimane nel flusso e l'elemento vi torna quando l'utente scorre di nuovo in alto.

Il posizionamento permanente consente di creare molti effetti utili che in precedenza richiedevano JavaScript. Per mostrare alcune delle possibilità, abbiamo creato diverse demo. Ogni demo utilizza in gran parte lo stesso CSS e modifica solo leggermente il markup HTML per creare ogni effetto.

Stack fisso

In questa demo, tutti gli elementi permanenti condividono lo stesso container. Ciò significa che ogni elemento fisso scorre sul precedente mentre l'utente scorre verso il basso. Gli elementi persistenti condividono la stessa posizione bloccata.

Slide persistente

Qui, gli elementi persistenti sono cugini. ovvero i genitori sono fratelli e sorelle. Quando un elemento fisso tocca il limite inferiore del container, si sposta verso l'alto insieme al container, creando l'impressione che gli elementi permanenti più bassi spinscano verso l'alto quelli più in alto. In altre parole, sembrano competere per la posizione bloccata.

Desperado appiccicoso

Come nel caso delle slide appariscenti, gli elementi persistenti di questa demo sono cugini. Tuttavia, sono stati inseriti in contenitori impostati su un layout a griglia a due colonne.

backdrop-filter

La proprietà backdrop-filter consente di applicare effetti grafici all'area dietro un elemento, anziché all'elemento stesso. In questo modo si creano molti effetti interessanti, che in precedenza erano realizzabili solo usando codice CSS e JavaScript complicati da realizzare con una sola riga di CSS.

Ad esempio, questa demo utilizza backdrop-filter per ottenere una sfocatura in stile sistema operativo:

Abbiamo già un ottimo post su backdrop-filter, quindi visita questa pagina per saperne di più.

:is()

Sebbene la pseudo-classe :is() abbia in realtà più di dieci anni, non è ancora così utile come pensiamo che meriti. Prende come argomento un elenco di selettori separati da virgole e corrisponde a tutti i selettori dell'elenco. Questa flessibilità lo rende incredibilmente maneggevole e può ridurre notevolmente la quantità di CSS che spedisci.

Ecco un breve esempio:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

Il layout a griglia dei CSS ha gap (in precedenza grid-gap) da un po' di tempo. Specificando la spaziatura interna di un elemento contenitore piuttosto che la spaziatura intorno agli elementi secondari, gap risolve molti problemi di layout comuni. Ad esempio, con lo spazio vuoto, non devi preoccuparti dei margini sugli elementi secondari che causano spazio vuoto indesiderato intorno ai bordi di un elemento contenitore:

Novità ancora migliore: gap sarà in arrivo su Flexbox, con gli stessi vantaggi in termini di spaziatura offerti dalla griglia:

• Esiste una sola dichiarazione di spaziatura invece che molte.
• Non è necessario definire convenzioni per il tuo progetto in merito agli elementi secondari che devono avere la spaziatura, poiché la spaziatura sarà di proprietà dell'elemento contenitore.
• Il codice è più facilmente comprensibile rispetto alle strategie precedenti come il gufo lobotomizzato.

Il seguente video mostra i vantaggi dell'utilizzo di una singola proprietà gap per due elementi, uno con layout a griglia e uno con layout flessibile:

Al momento, solo FireFox supporta gap nei layout flessibili, ma prova questa demo per vedere come funziona:

CSS Houdini

Houdini è un insieme di API di basso livello per il motore di rendering del browser che ti consente di indicare al browser come interpretare il codice CSS personalizzato. In altre parole, ti dà accesso al modello di oggetti CSS, che ti permette di estendere CSS tramite JavaScript. Questo offre diversi vantaggi:

• Ti offre molta più potenza per creare funzionalità CSS personalizzate.
• È più facile separare i problemi di rendering dalla logica dell'applicazione.
• È più efficiente del polyfilling CSS che eseguiamo attualmente con JavaScript, poiché il browser non dovrà più analizzare gli script ed eseguire un secondo ciclo di rendering; il codice Houdini viene analizzato nel primo ciclo di rendering.

Houdini è un nome generico che include varie API. Per ulteriori informazioni su questi modelli e sul loro stato attuale, dai un'occhiata alla pagina Houdini Ready Yet? Nella nostra conversazione, abbiamo parlato dell'API Properties and Values, dell'API Paint e del Worklet dell'animazione, in quanto attualmente sono le più supportate. Potremmo dedicare facilmente un post completo a ognuna di queste entusiasmanti API, ma per ora dai un'occhiata al nostro discorso per una panoramica e alcune demo interessanti che iniziano a darti un'idea di cosa puoi fare con le API.

Extra

Ci sono ancora alcune cose all'orizzonte di cui volevamo parlare in modo approfondito, ma non abbiamo avuto il tempo di trattarle in modo approfondito, quindi le abbiamo esaminate in un round veloce.⚡ Se non hai ancora sentito parlare di alcune di queste funzionalità, assicurati di guardare l'ultima parte della presentazione.

• size: una proprietà che ti consente di impostare altezza e larghezza contemporaneamente
• aspect-ratio: una proprietà che imposta le proporzioni per gli elementi che non ne hanno uno intrinsecamente
• min(), max() e clamp(): funzioni che consentono di impostare vincoli numerici su qualsiasi proprietà CSS, non solo su larghezza e altezza
• list-style-type una proprietà esistente, ma presto supporterà una gamma più ampia di valori, inclusi emoji e SVG.
• display: outer inner: la proprietà display accetterà presto due parametri, che ti consentiranno di specificare esplicitamente il layout esterno e interno, anziché utilizzare parole chiave composte come inline-flex.
• Regioni CSS: consentono di riempire un'area specifica non rettangolare in cui i contenuti possono fluire dentro e fuori
• Moduli CSS: JavaScript potrà richiedere un modulo CSS e recuperare un oggetto avanzato su cui è facile eseguire operazioni