Stili web di nuova generazione

Tieniti al corrente su alcune delle entusiasmanti funzionalità del CSS moderno.

Adam Argyle
Una Kravets

Ci sono tonnellate di eventi entusiasmanti in corso in questo momento in CSS molti di essi sono già supportati nei browser attuali. Il nostro discorso al CDS 2019, che puoi guardare di seguito. copre diverse funzionalità nuove e future che pensiamo debbano ricevere un po' di attenzione.

Questo post è incentrato sulle funzionalità che puoi usare oggi. quindi assicurati di guardare l'intervento per una discussione più approfondita delle prossime funzionalità come Houdini. Puoi anche trovare demo di tutte le funzionalità illustrate nel nostro Pagina CSS@CDS.

Sommario

Scorrimento rapido

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

Questo codice di esempio consente di impostare 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 principale <section>,
    • overflow-x è impostato su auto per consentire lo scorrimento orizzontale.
    • overscroll-behavior-x è impostato su contain per impedire lo scorrimento di qualsiasi elemento principale quando l'utente raggiunge i limiti dell'area di scorrimento dell'elemento <section>. Questa operazione non è strettamente necessaria per lo scatto, ma di solito è una buona idea.
    • scroll-snap-type è impostata su x per l'aggancio orizzontale e su mandatory per garantire che l'area visibile si aggancia sempre al punto di agganciamento più vicino.
  • Negli elementi secondari <picture>, scroll-snap-align è impostato sull'inizio, che imposta i punti di aggancio sul lato sinistro di ogni immagine (supponendo che direction sia impostato su ltr).

Ecco una demo dal vivo:

Puoi anche dare un'occhiata alle demo relative all'aggancio a scorrimento verticale e all'aggancio a scorrimento a matrice.

:focus-within

:focus-within risolve un problema di accessibilità già presente da tempo: in molti casi l'elemento secondario deve 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 è attivo uno qualsiasi degli elementi. In caso contrario, il menu scompare per gli utenti della 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 del menu, se imposti :focus-within sull'elemento del menu, puoi assicurarti che rimanga visibile quando è attiva una voce di menu:

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

Un&#39;illustrazione che mostra la differenza di comportamento tra focus e focus all&#39;interno.

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

Query multimediali livello 5

Le nuove query multimediali ci offrono modi efficaci per modificare l'esperienza utente delle nostre app in base alle preferenze del dispositivo dell'utente. Fondamentalmente, 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:

Diagramma che mostra query supporti che interpretano le preferenze dell&#39;utente a livello di sistema.

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

Queste query sono un enorme vantaggio per l'accessibilità. In precedenza non avevamo modo di sapere, ad esempio, se un utente aveva impostato il proprio sistema operativo sulla modalità ad alto contrasto. Se volessi 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 all'interno dell'app. Ora puoi rilevare l'impostazione ad alto contrasto dal sistema operativo utilizzando prefers-contrast.

Un'entusiasmante implicazioni di queste query supporti è che possiamo progettare per più combinazioni di preferenze utente a livello di sistema per soddisfare la vasta gamma di preferenze dell'utente e delle esigenze di accessibilità. Se un utente preferisce la modalità Buio ad alto contrasto in ambienti poco illuminati, puoi farlo.

Per Adam è importante che "preferisci il movimento ridotto" non vengono implementate come "nessun movimento". L'utente dice di preferire meno movimenti, non che non vuole animazioni. Afferma che il moto ridotto non è un movimento. Ecco un esempio che utilizza un'animazione di dissolvenza incrociata quando l'utente preferisce la riduzione del movimento:

Proprietà logiche

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

Un diagramma che mostra le proprietà di layout CSS tradizionali.

Quando si progettavano pagine per più lingue con diverse modalità di scrittura, gli sviluppatori dovevano regolare tutte queste proprietà individualmente su più elementi, cosa che diventa rapidamente un incubo della manutenibilità.

Le proprietà logiche consentono di mantenere l'integrità del layout tra le modalità di traduzione e scrittura. Si aggiornano dinamicamente in base all'ordine semantico dei contenuti anziché alla 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 di testo in una riga. (In inglese, inline-size è uguale a width.)

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

Diagramma che mostra le nuove proprietà del layout logico CSS.

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

Per vedere come funzionano le proprietà logiche nella demo riportata di seguito, imposta valori diversi per la proprietà writing-mode nell'elemento <body>:

position: sticky

Un elemento con position: sticky rimane nel flusso a blocchi finché non inizia a uscire dallo schermo. a quel punto smette di scorrere con il resto della pagina e rimane nella posizione specificata dal valore top dell'elemento. Lo spazio allocato per quell'elemento rimane nel flusso, e ritorna all'elemento quando l'utente scorre di nuovo verso l'alto.

Il posizionamento fisso 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 ciascun effetto.

Stack permanente

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

Slide adesiva

Qui, gli elementi permanenti sono cugini. (i genitori sono fratelli e sorelle). Quando un elemento fisso raggiunge il limite inferiore del suo contenitore, si sposta verso l'alto insieme al contenitore, creando l'impressione che gli elementi permanenti più in alto spingono verso l'alto. In altre parole, sembrano competere per la posizione bloccata.

Disperado appiccicoso

Come Sticky Slide, gli elementi permanenti in questa demo sono i cugini. Tuttavia, sono stati inseriti in contenitori impostati con un layout a griglia a due colonne.

backdrop-filter

La proprietà backdrop-filter ti consente di applicare effetti grafici all'area dietro un elemento anziché all'elemento stesso. In questo modo si possono ottenere molti effetti interessanti che in precedenza erano ottenibili solo con CSS complessi e compromissioni di JavaScript 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 la pagina per maggiori informazioni.

:is()

Sebbene la pseudo-classe :is() abbia più di dieci anni, non viene ancora utilizzata tanto quanto riteniamo meriti. Prende un elenco di selettori separati da virgole come argomento e corrisponde a tutti i selettori dell'elenco. Questa flessibilità lo rende estremamente pratico e può ridurre notevolmente la quantità di CSS spediti.

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 CSS ha avuto gap (in precedenza grid-gap) da un po' di tempo. Specificando la spaziatura interna di un elemento contenitore anziché lo spazio attorno agli elementi secondari, gap risolve molti problemi comuni di layout. Ad esempio, con un intervallo vuoto, non devi preoccuparti che i margini degli elementi secondari creino spazi vuoti indesiderati intorno ai bordi di un elemento contenente:

Illustrazione che mostra in che modo la proprietà gap evita spaziature involontarie intorno ai bordi di un elemento contenitore.

Una notizia ancora migliore: gap sta arrivando su flexbox e offre gli stessi vantaggi di spaziatura offerti dalla griglia:

  • È presente una sola dichiarazione di spaziatura anziché molte.
  • Non è necessario stabilire convenzioni per il progetto su quali elementi secondari devono avere una spaziatura; l'elemento contenitore è proprietario della spaziatura.
  • 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 l'altro con layout flessibile:

Al momento, solo FireFox supporta gap con 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 CSS Object Model (modello a oggetti CSS), che ti permette di estendere CSS tramite JavaScript. Questo approccio comporta diversi vantaggi:

  • che ti offre molto più potenza per creare funzionalità CSS personalizzate.
  • È più facile separare i problemi di rendering dalla logica dell'applicazione.
  • È più efficace del polyfill di CSS attualmente eseguito con JavaScript poiché il browser non deve più analizzare gli script ed eseguire un secondo ciclo di rendering. Il codice Houdini viene analizzato nel primo ciclo di rendering.

Illustrazione che mostra il funzionamento di Houdini rispetto ai polyfill JavaScript tradizionali.

Houdini è un nome generico per diverse API. Se vuoi saperne di più su questi segmenti e sul loro stato attuale, consulta il sito Is Houdini Ready Yet?. Nel corso della presentazione, abbiamo parlato delle API Properties and Values, di Paint e di Animation Worklet, che sono attualmente le più supportate. Potremmo dedicare facilmente un post completo a ciascuna di queste entusiasmanti API, ma per il momento consulta la nostra presentazione per una panoramica e alcune interessanti demo che iniziano a darti un'idea di cosa puoi fare con queste API.

Overflow

Ci sono altri punti all'orizzonte di cui volevamo discutere, ma non abbiamo avuto il tempo di approfondire, quindi li abbiamo esaminati in modo rapido.⚡ Se non hai ancora sentito parlare di alcune di queste funzionalità, assicurati di guardare l'ultima parte della discussione.

  • size: una proprietà che ti consente di impostare contemporaneamente altezza e larghezza
  • aspect-ratio: una proprietà che imposta proporzioni per gli elementi che non ne hanno intrinsecamente uno
  • 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 a breve supporterà una gamma più ampia di valori, tra cui emoji e SVG
  • display: outer inner: la proprietà display accetterà a breve due parametri per consentirti di specificare esplicitamente i layout esterno e interno anziché utilizzare parole chiave composte come inline-flex.
  • Regioni CSS: ti consentono di riempire un'area specifica non rettangolare da cui possono fluire i contenuti.
  • Moduli CSS: JavaScript potrà richiedere un modulo CSS e recuperare un oggetto avanzato su cui è facile eseguire operazioni