Nuove funzionalità CSS da guardare al futuro nel 2022

Ecco alcuni aggiornamenti dei fogli di stile a cascata da non perdere, che vanno dalle proprietà di snap a scorrimento poco conosciute a nuove straordinarie tavolozze di colori.

CSS (Cascading Style Sheets) ha debuttato nel 1996 ed è ancora un componente importante e in evoluzione dello stack di sviluppo web. I CSS, come altri linguaggi viventi, aggiungono sempre nuove funzionalità in risposta alle pratiche del mondo reale. A causa della rapida evoluzione, anche gli sviluppatori dedicati potrebbero perdere nuove funzionalità. Dai un'occhiata ad alcune delle funzionalità più utili in arrivo nei CSS nel prossimo futuro.

Sottogriglia

I CSS sono stati criticati per una serie di difetti eclatanti sin dal suo inizio. Alcune semplici attività, come centrare qualcosa in CSS, richiedono soluzioni alternative e finagling eccessivamente complesse.
Un altro problema significativo è stato il raggiungimento di un layout della griglia ragionevole, almeno fino a quando non è intervenuto il modulo CSS Grid Layout.

Un layout della griglia è indicato dal display: grid dichiarazione ed è simile a Flexbox in quanto consente di definire layout rettangolari controllando anche la griglia in due dimensioni.
Secondo la ricerca, la maggior parte degli sviluppatori CSS è a conoscenza di Grid Layout e molti di noi lo usano. (Non dimenticare di provarlo se non l'hai fatto!)

Sottogriglia è una funzionalità nuova di zecca ed estremamente utile per il modulo Layout griglia. La funzione della griglia secondaria consente di creare una griglia figlio che erediterà il layout della griglia padre.

Contrariamente all'annidamento di una visualizzazione griglia all'interno di un'altra, la griglia figlio definisce le proprie dimensioni e spazi vuoti. Il layout del genitore viene applicato alla griglia secondaria quando si utilizza la griglia secondaria, ma la griglia secondaria può comunque ignorare aspetti del layout, se necessario.

La griglia secondaria è attualmente disponibile solo in Firefox 71 e versioni successive, ma è prevista per Safari WebKit, Google Chrome e Microsoft Edge. Una sottogriglia sarà una funzionalità di layout molto utile in futuro.

Colore accento

Nonostante la loro popolarità, alcuni elementi di visualizzazione sono notoriamente difficili da modellare. Caselle di controllo e pulsanti di opzione, ad esempio, vengono spesso sostituiti con un widget personalizzato che ne imita il comportamento nascondendo l'implementazione del browser. Puoi scegliere come target questi elementi con la nuova opzione CSS accent-color.

Ad esempio, come mostrato nel Listato 1, potresti applicare un colore magenta a tutti i pulsanti di opzione sulla tua pagina (vedi anche questo esempio live).

Listato 1: Controllo del colore CSS per i pulsanti di opzione

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Scatto di scorrimento

CSS offre un pratico set di proprietà per il controllo dell'azione di scorrimento dello snap in un browser web. Molte di queste funzionalità sono già disponibili nelle versioni recenti del browser, mentre altre sono ancora in fase di implementazione.

Vale la pena notare che più di un terzo degli utenti CSS non è ancora a conoscenza dello snap di scorrimento.

Il comando delle proprietà scroll-snap-* fornisce diverse opzioni per la regolazione fine del funzionamento della posizione di scorrimento su un contenitore. Gli sviluppatori traggono vantaggio da una maggiore precisione, mentre gli utenti finali traggono vantaggio da un'esperienza utente più fluida e controllata.

Il Listato 2 mostra un semplice esempio di come controllare lo snap di scorrimento su un div (vedi anche questo esempio live).

Il Listato 2 è un esempio di un semplice scroll snap.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

La posizione di scorrimento y nel Listato 3 si sposta automaticamente sull'elemento figlio indipendentemente da dove si rilascia il movimento di scorrimento. Ciò è dovuto al fatto che la proprietà scroll-snap-type del contenitore di scorrimento è impostata su y e gli elementi figlio hanno la dichiarazione scroll-snap-align: start.

Questo comportamento può anche essere modificato. È possibile, ad esempio, impostare la proprietà scroll-snap-type su y proximity. Funziona come previsto, scattando solo quando lo scroll è vicino all'elemento.

Inoltre, la relativa proprietà overscroll-behavior controlla il comportamento dei contenitori nidificati-scroll.

Proprietà CSS logiche

Probabilmente hai provato il fastidio di dover scrivere alla lettera le proprietà border-left e border-right o border-top, border-bottom se hai mai voluto impostare un bordo contenitore a sinistra e a destra, o in basso e superiore. Il problema è che non c'è modo di utilizzare la proprietà del collegamento senza influire sui bordi che non si desidera modificare. Questo vale anche per elementi come padding e margini.

Il modulo CSS Logical Properties ti consente di fare riferimento alle cose in modo astratto usando le parole chiave inline e block. Quando si fa riferimento a sinistra ea destra, utilizzare inline; quando si fa riferimento alla parte superiore e inferiore, utilizzare il blocco. Ad esempio, per aggiungere un bordo ai lati sinistro e destro di un div, usa il codice nel Listato 3. (vedi anche un esempio live qui).

Listato 3: riempimento sinistro e destro con logica inline

 div { border- inline : 10px dashed seagreen; }

Queste sono utili scorciatoie per i bordi, ma le parole chiave logiche inline e block possono essere trovate anche in una varietà di altre proprietà.

La maggior parte degli sviluppatori utilizza queste scorciatoie per affrontare problemi relativi alla direzione del testo e alla modalità di scrittura. In questi casi, una proprietà come padding-inline-end consente di indirizzare il riempimento finale indipendentemente dalla direzione del testo.

In sostanza, l'astrazione da inline e block consente la creazione di stili generalizzati che possono essere applicati a una varietà di situazioni. Ulteriori informazioni possono essere trovate su Proprietà e valori logici CSS.

Ricerche di container

Le query container non sono ancora completamente stabili in CSS, ma lo saranno presto. Avranno un impatto significativo sul modo in cui pensiamo al design reattivo. L'idea di base è che sarai in grado di impostare un punto di interruzione in base alle dimensioni di un contenitore principale anziché solo al viewport e ai media.

Non esiste una definizione chiara della sintassi, ma probabilmente assomiglierà al Listato 4.

Elenco @container 4.

 @container (max-width: 650px){ … }

Considera quanto sarà potente mettere a punto un layout in base alle dimensioni dei vari contenitori che appaiono nei livelli nidificati di un'interfaccia utente. Questo è un cambiamento abbastanza significativo che quasi certamente scatenerà un'ondata di innovazioni nell'interfaccia.

Tre nuove combinazioni di colori

I professionisti CSS hanno utilizzato RGB, HEX e colori con nome per abbellire e ravvivare i display dei dispositivi da tempo immemorabile. La dichiarazione del colore in stile HSL è stata introdotta di recente. La specifica CSS sta ora introducendo nuovi descrittori di colore, vale a dire hwb, lab e lch.

HWB è l'abbreviazione di tonalità, bianco e nero. È un bel tocco che si distingue per la sua leggibilità umana: scegli un colore e poi aggiungi bianco e nero. È compatibile con le versioni più recenti di Chrome, Firefox e Safari. (Il riferimento alla funzionalità di Microsoft Edge è stranamente assordante su questo argomento.) Per ulteriori informazioni su HWB, vedere hwb() – una notazione a colori per gli esseri umani? Come RGB e HWL, ha un canale alfa per la trasparenza.

LCH, che sta per lightness, chroma e hue, è noto per espandere la tavolozza dei colori disponibile. Cosa, perché e come vengono utilizzati i colori LCH nei CSS? Questa è una buona panoramica che include una discussione illuminante sulla teoria del colore nei CSS. Solo Safari attualmente supporta LCH.

Il più teorico dei nuovi spazi colore è LAB, che deriva dalla teoria del colore CIE LAB. Il descrittore del colore di laboratorio afferma di coprire l'intero spettro dei colori percepibili dall'uomo, il che è un'affermazione audace. Come LCH, è attualmente supportato solo da Safari. Maggiori informazioni su LAB per CSS sono disponibili nella documentazione Mozilla CSS.