Stato del CSS 2022

Le funzionalità di stile web di oggi e di domani, come mostrato alla conferenza Google IO 2022, oltre ad alcuni extra.

Adam Argyle

Il 2022 è destinato a essere uno degli anni migliori per i CSS, per quanto riguarda il rilascio di funzionalità e funzionalità del browser cooperative, con l'obiettivo collaborativo di implementare 14 funzionalità.

Panoramica

Questo post è la versione in articolo del talk tenuto al Google IO 2022. Non deve essere una guida approfondita su ogni funzionalità, ma un'introduzione e una breve panoramica per suscitare l'interesse, fornendo ampiezza anziché profondità. Se il tema ti interessa, controlla la fine di una sezione per trovare i link alle risorse con ulteriori informazioni.

Sommario

Utilizza l'elenco di seguito per passare agli argomenti che ti interessano:

Compatibilità del browser

Uno dei motivi principali per cui così tante funzionalità CSS sono impostate per essere rilasciate in collaborazione è dovuto agli sforzi di Interop 2022. Prima di studiare gli sforzi di Interop, è importante esaminare gli sforzi di Compat 2021.

Compat 2021

Gli obiettivi per il 2021, basati sui feedback degli sviluppatori tramite sondaggi, erano stabilizzare le funzionalità attuali, migliorare la suite di test e aumentare i punteggi di superamento dei browser per cinque funzionalità:

1. Posizionamento di sticky
2. Taglie aspect-ratio
3. Layout flex
4. Layout grid
5. transform Posizionamento e animazione

I punteggi dei test sono stati migliorati in modo complessivo, a dimostrazione di un miglioramento della stabilità e dell'affidabilità. Congratulazioni ai team!

Interoperabilità 2022

Quest'anno i browser si sono riuniti per discutere delle funzionalità e delle priorità su cui intendevano lavorare, unendo le forze. L'azienda prevedeva di fornire agli sviluppatori le seguenti funzionalità web:

1. @layer
2. Spazi colore e funzioni
3. Contenimento
4. <dialog>
5. Compatibilità dei moduli
6. Scorrimento
7. Griglia secondaria
8. Tipografia
9. Unità dell'area visibile
10. Compatibilità web

Si tratta di un elenco entusiasmante e ambizioso che non vedo l'ora di vedere realizzato.

Novità per il 2022

Non sorprende che lo stato di CSS 2022 sia notevolmente influenzato dal lavoro di Interop 2022.

Livelli in cascata

Prima di @layer, l'ordine scoperto degli stili CSS caricati era molto importante, poiché gli stili caricati per ultimi possono sovrascrivere quelli caricati in precedenza. Ciò ha portato a stili di fogli di stile di entrata gestiti meticolosamente, in cui gli sviluppatori dovevano caricare prima gli stili meno importanti e poi quelli più importanti. Esistono intere metodologie per aiutare gli sviluppatori nella gestione di questa importanza, come ITCSS.

Con @layer, il file di immissione può predefinire i livelli e il relativo ordine in anticipo. Poi, man mano che gli stili vengono caricati o definiti, possono essere inseriti in un livello, consentendo di preservare l'importanza dell'override dello stile, ma senza l'orchestrazione del caricamento gestita meticolosamente.

Il video mostra come i livelli di struttura a cascata definiti consentano un processo di creazione e caricamento più libero e personalizzato, mantenendo al contempo la struttura a cascata necessaria.

Chrome DevTools è utile per visualizzare gli stili provenienti da ciascun livello:

Risorse

• Specifica CSS Cascade 5
• Spiegazione dei livelli in cascata
• Crea livelli a cascata su MDN
• Una Kravets: Cascade Layers
• Ahmad Shadeed: Ciao, livelli CSS Cascade

Sottostruttura

Prima di subgrid, una griglia all'interno di un'altra griglia non poteva allinearsi alle celle principali o alle linee della griglia. Ogni layout della griglia era univoco. Molti designer posizionano un'unica griglia sull'intero design e allineano costantemente gli elementi al suo interno, cosa che non sarebbe possibile fare in CSS.

Dopo subgrid, un elemento secondario di una griglia può adottare le colonne o le righe dell'elemento padre come proprie e allinearsi a sé stesso o a quelle secondarie.

Nella seguente demo, l'elemento body crea una griglia classica di tre colonne: la colonna centrale è chiamata main e le colonne sinistra e destra hanno linee con lo stesso nome fullbleed. Quindi, ogni elemento del corpo, <nav> e <main>, adotta le linee con nome del corpo impostando grid-template-columns: subgrid.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

Infine, gli elementi secondari di <nav> o <main> possono allinearsi o ridimensionarsi utilizzando le colonne e le righe fullbleed e main.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

DevTools può aiutarti a vedere le linee e le sottogriglie (al momento solo in Firefox). Nell'immagine seguente, la griglia principale e le sottogriglie sono sovrapposte. Ora ricorda l'idea dei designer riguardo al layout.

Nel riquadro degli elementi di devtools puoi vedere quali elementi sono griglie e sottogriglie, il che è molto utile per il debug o la convalida del layout.

Risorse

• Specifiche della sottogriglia
• Sottogriglia su MDN
• Bramus: Tutorial video pratici su CSS Subgrid

Query sui contenitori

Prima di @container, gli elementi di una pagina web potevano adattarsi solo alle dimensioni dell'intera area visibile. Questo è ottimo per i layout macro, ma per i layout micro, dove il contenitore esterno non è l'intero viewport, è impossibile per il layout adattarsi di conseguenza.

Dopo @container, gli elementi possono adattarsi alle dimensioni o allo stile di un contenitore principale. L'unico svantaggio è che i container devono dichiararsi come possibili target di query, un piccolo requisito per un grande vantaggio.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

Questi stili consentono di eseguire query sulle colonne Lun, Mar, Mer, Gio e Ven nel video seguente tramite gli elementi evento.

Ecco il CSS per eseguire query al contenitore calendar-day per determinarne le dimensioni e per modificare il layout e le dimensioni dei caratteri:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

Ecco un altro esempio: un componente del libro si adatta allo spazio disponibile nella colonna in cui viene trascinato:

Una ha ragione nel valutare la situazione come nuova nuova risposta. Esistono molte decisioni di design interessanti e significative da prendere quando si utilizza @container.

Risorse

• Specifiche delle query sui contenitori
• Spiegazione di Container Queries
• Query dei contenitori su MDN
• Il nuovo responsive su web.dev
• Demo di Calendar di Una
• Incredibile raccolta di query sui contenitori
• Come abbiamo creato Designcember su web.dev
• Ahmad Shadeed: Diamo il benvenuto alle query del contenitore CSS

accent-color

Prima del giorno accent-color, per creare un modulo con colori corrispondenti ai brand, potresti ritrovarti con librerie o soluzioni CSS complesse che diventavano difficili da gestire nel corso del tempo. Anche se hanno offerto tutte le opzioni e, possibilmente, incluso l'accessibilità, la scelta di utilizzare i componenti integrati o di adottare i propri diventa noiosa continuare a scegliere.

Dopo il giorno accent-color, una riga di CSS conferisce un colore del brand ai componenti integrati. Oltre a una tinta, il browser sceglie in modo intelligente i colori di contrasto appropriati per le parti accessorie del componente e si adatta alle combinazioni di colori del sistema (chiare o scure).

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

Per scoprire di più su accent-color, consulta il mio post su web.dev, dove esploro molti altri aspetti di questa utile proprietà CSS.

Risorse

• Specifica accent-color
• accent-color su MDN
• accent-color su web.dev
• Bramus: colorare i controlli dell'interfaccia utente con il CSS color-accent

Livello di colore 4 e 5

Il web è stato dominato da sRGB negli ultimi decenni, ma in un mondo digitale in espansione di display ad alta definizione e dispositivi mobili preequipaggiati con schermi OLED o QLED, sRGB non è sufficiente. Inoltre, sono previste pagine dinamiche che si adattano alle preferenze degli utenti e la gestione del colore è un problema crescente per designer, sistemi di design e gestori del codice.

Tuttavia, non nel 2022, CSS offre una serie di nuove funzioni e nuovi spazi per i colori: - Colori disponibili per le funzionalità dei colori HD dei display. - Spazi di colore che corrispondono a un'intenzione, ad esempio l'uniformità percettiva. - Spazi di colore per le sfumature che modificano drasticamente i risultati dell'interpolazione. - Funzioni di colore per aiutarti a mescolare e creare contrasto e scegliere lo spazio in cui lavorare.

Prima di tutte queste funzionalità di colore, i sistemi di progettazione dovevano precalcolare i colori di contrasto appropriati e garantire tavolozze vivaci in modo appropriato, il tutto mentre i precompilatori o JavaScript facevano il lavoro più difficile.

Dopo tutte queste funzionalità di colore, il browser e il CSS possono fare tutto il lavoro, dinamicamente e just in time. Anziché inviare molti KB di CSS e JavaScript agli utenti per attivare i temi e i colori di visualizzazione dei dati, il CSS può eseguire l'orchestrazione e i calcoli. Il CSS è anche più adatto a verificare il supporto prima dell'utilizzo o a gestire i fallback in modo elegante.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

HWB sta per tonalità, bianco e nero. Si presenta come un modo di esprimere il colore in modo intuitivo, poiché è solo una tonalità e una quantità di bianco o nero da schiarire o scurire. Gli artisti che mischiano i colori con il bianco o il nero potrebbero apprezzare questa aggiunta alla sintassi dei colori.

L'utilizzo di questa funzione di colore genera colori nello spazio colore sRGB, come per HSL e RGB. In termini di novità per il 2022, non offre nuovi colori, ma potrebbe semplificare alcune attività per gli appassionati di sintassi e modello mentale.

Risorse

• Specifiche HWB
• HWB su MDN
• Stefan Judis: hwb() – una notazione di colore per gli esseri umani?

Spazi colore

Il modo in cui i colori vengono rappresentati avviene con uno spazio colore. Ogni spazio di colore offre varie funzionalità e compromessi per lavorare con i colori. Alcuni potrebbero riunire tutti i colori brillanti, mentre altri potrebbero allinearli prima in base alla loro leggerezza.

Il CSS 2022 offrirà 10 nuovi spazi di colore, ciascuno con funzionalità uniche per aiutare designer e sviluppatori a visualizzare, scegliere e mescolare i colori. In precedenza, sRGB era l'unica opzione per lavorare con i colori, ma ora il CSS offre nuove potenzialità e un nuovo spazio colore predefinito, LCH.

color-mix()

Prima di color-mix(), gli sviluppatori e i designer avevano bisogno di preprocessori come Sass per mescolare i colori prima che il browser li vedesse. La maggior parte delle funzioni di miscelazione dei colori non offriva inoltre la possibilità di specificare lo spazio colore in cui eseguire la miscelazione, causando a volte risultati confusi.

Dopo color-mix(), gli sviluppatori e i designer possono mescolare i colori nel browser, insieme a tutti gli altri stili, senza eseguire processi di compilazione o includere JavaScript. Inoltre, possono specificare lo spazio colore in cui eseguire la miscelazione o utilizzare lo spazio colore di miscelazione predefinito LCH.

Spesso, un colore del brand viene utilizzato come base da cui vengono create varianti, ad esempio colori più chiari o più scuri per gli stili al passaggio del mouse. Ecco come funziona concolor-mix():

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

Se volessi mescolare quei colori in uno spazio colore diverso, ad esempio s web, modificalo:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

Di seguito è riportata una demo sulla tematizzazione con color-mix(). Prova a cambiare il colore del brand e guarda l'aggiornamento del tema:

Nel 2022 potrai mescolare i colori in vari spazi di colore nei tuoi fogli di stile.

Risorse

• Specifiche color-mix()
• color-mix() su MDN
• Demo di temi
• Un'altra demo di temi
• Fabio Giolito: crea un tema a colori con queste funzionalità CSS imminenti

color-contrast()

Prima di color-contrast(), gli autori degli stili dovevano conoscere in anticipo i colori accessibili. Spesso una tavolozza mostra un testo nero o bianco su un campione di colore per indicare a un utente del sistema di colori il colore del testo necessario per creare un contrasto adeguato con il campione.

Dopo il giorno color-contrast(), gli autori dei fogli di stile possono trasferire completamente l'attività nel browser. Non solo puoi utilizzare il browser per scegliere automaticamente un colore nero o bianco, ma puoi fornirgli un elenco di colori appropriati per il sistema di progettazione e farlo scegliere per primo per trasmettere il rapporto di contrasto desiderato.

Questo è uno screenshot di una demo del set di tavolozza dei colori HWB in cui i colori del testo vengono scelti automaticamente dal browser in base al colore del campione:

Le nozioni di base della sintassi sono le seguenti, dove il grigio viene passato alla funzione e il browser determina se il nero o il bianco hanno il maggiore contrasto:

color: color-contrast(gray);

La funzione può anche essere personalizzata con un elenco di colori, dal quale sceglierà il colore con il contrasto più elevato:

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

Infine, nel caso in cui sia preferibile non scegliere il colore di contrasto più elevato nell'elenco, è possibile fornire un rapporto di contrasto target e viene scelto il primo colore da passare:

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

Questa funzione può essere utilizzata per più di un colore di testo, anche se ritengo che questo sarà il suo caso d'uso principale. Pensa a quanto sarà più facile creare interfacce accessibili e leggibili una volta che la scelta di colori a contrasto adeguati sarà integrata nel linguaggio CSS stesso.

Risorse

• specifica color-contrast()
• color-contrast() su MDN
• Demo

Sintassi del colore relativo

Prima della sintassi dei colori relativa, per eseguire calcoli sul colore e apportare modifiche, i canali di colore dovevano essere inseriti singolarmente nelle proprietà personalizzate. Questa limitazione ha reso HSL anche la funzione di colore principale per la manipolazione dei colori perché la tonalità, la saturazione o la luminosità potevano essere regolate in modo semplice con calc().

Dopo la sintassi dei colori relativa, qualsiasi colore in qualsiasi spazio può essere decostruito, modificato e restituito come colore, il tutto in una riga di CSS. Non ci sono più limitazioni al modello HSL: le manipolazioni possono essere eseguite in qualsiasi spazio di colore e per semplificarle è necessario creare molte meno proprietà personalizzate.

Nel seguente esempio di sintassi, viene fornito un codice esadecimale di base e vengono creati due nuovi colori in base a questo. Il primo colore --absolute-change crea un nuovo colore in LCH dal colore di base, quindi sostituisce la luminosità del colore di base con 75%, mantenendo la cromia (c) e la tonalità (h). Il secondo colore --relative-change crea un nuovo colore in LCH dal colore di base, ma questa volta riduce la cromia (c) del 20%.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

È simile alla miscelazione dei colori, ma è più simile alle alterazioni che alla miscelazione. Puoi trasmettere un colore da un altro colore, ottenendo l'accesso ai tre valori di canale come descritti dalla funzione di colore utilizzata, con la possibilità di aggiustare questi canali. Nel complesso, si tratta di una sintassi molto interessante e potente per il colore.

Nella seguente demo ho utilizzato la sintassi dei colori relativa per creare varianti più chiare e più scure di un colore di base e ho utilizzato color-contrast() per garantire che le etichette abbiano un contrasto adeguato:

Questa funzione può essere utilizzata anche per la generazione di tavolozze di colori. Ecco una demo in cui intere tavolozze vengono generate a partire da un colore di base fornito. Questo unico insieme di CSS è alla base di tutte le varie tavolozze, ognuna delle quali fornisce semplicemente una base diversa. Come bonus, dato che ho utilizzato LCH, guarda quanto sono percettibilmente uniformi le palette: non ci sono punti caldi o morti, grazie a questo spazio di colore.

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

A questo punto, spero che tu abbia capito come gli spazi di colore e le diverse funzioni di colore possano essere utilizzati per scopi diversi, in base ai loro punti di forza e di debolezza.

Risorse

• Specifiche della sintassi del colore relativo
• Creare tavolozze di colori con la sintassi dei colori relativi
• Creare varianti di colore con la sintassi del colore relativo

Spazi di colore gradiente

Prima degli spazi colore sfumati, sRGB era lo spazio colore predefinito utilizzato. sRGB è generalmente affidabile, ma presenta alcuni punti deboli come la zona morta grigia.

Dopo gli spazi colore a gradiente, indica al browser quale spazio colore utilizzare per l'interpolazione del colore. In questo modo, sviluppatori e designer possono scegliere il gradiente che preferiscono. Anche lo spazio colore predefinito diventa LCH anziché sRGB.

L'aggiunta di sintassi avviene dopo la direzione del gradiente, utilizza la nuova sintassi in ed è facoltativa:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

Ecco una sfumatura di base ed essenziale dal nero al bianco. Esamina l'intervallo di risultati in ogni spazio di colore. Alcune raggiungono il nero scuro prima di altre, altre diventano bianche troppo tardi.

In questo esempio, il nero passa al blu perché è un problema noto per i gradienti. La maggior parte degli spazi di colore assume una tonalità viola durante l'interpolazione del colore o, come mi piace pensare, quando i colori si spostano all'interno del loro spazio di colore dal punto A al punto B. Poiché il gradiente prenderà una linea retta dal punto A al punto B, la forma dello spazio colore modifica drasticamente le fermate lungo il percorso.

Per esplorazioni, esempi e commenti più approfonditi, leggi questo thread di Twitter.

Risorse

• Specifiche della sfumatura
• Demo di confronto dei gradienti negli spazi
• Notebook Observable che confronta i gradienti

inert

Prima del giorno inert, era buona norma indirizzare l'attenzione dell'utente verso aree della pagina o dell'app che richiedevano attenzione immediata. Questa strategia di stato attivo guidato è stata conosciuta come inganno dello stato attivo perché gli sviluppatori inserivano lo stato attivo in uno spazio interattivo, ascoltavano gli eventi di modifica dello stato attivo e, se lo stato attivo usciva dallo spazio interattivo, veniva reinserito forzatamente. Gli utenti che utilizzano tastiere o screen reader vengono nuovamente indirizzati allo spazio interattivo per assicurarsi che l'attività sia completata prima di procedere.

Dopo inert, non è necessario alcun blocco perché puoi bloccare o proteggere intere sezioni della pagina o dell'app. I clic e i tentativi di modifica dell'attenzione non sono semplicemente disponibili mentre queste parti di un documento sono inattive. Si potrebbe anche pensare a questo come a delle guardie anziché a una trappola, in cui inert non è interessato a farti rimanere da qualche parte, ma piuttosto a rendere non disponibili altri posti.

Un buon esempio è la funzione alert() di JavaScript:

Nel video precedente, noterai che la pagina era accessibile con il mouse e la tastiera fino a quando non è stato chiamato un alert(). Dopo aver visualizzato il popup della finestra di dialogo di avviso, il resto della pagina è stato bloccato o inert. Lo stato attivo degli utenti è posizionato all'interno della finestra di dialogo dell'avviso e non può essere spostato altrove. Quando l'utente interagisce e completa la richiesta della funzione di avviso, la pagina diventa di nuovo interattiva. inert consente agli sviluppatori di ottenere con facilità questa stessa esperienza di concentrazione guidata.

Ecco un piccolo esempio di codice che mostra come funziona:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

Una finestra di dialogo è un ottimo esempio, ma inert è utile anche per aspetti come l'esperienza utente del menu laterale scorrevole. Quando un utente scorre fuori dal menu laterale, non consente al mouse o alla tastiera di interagire con la pagina visualizzata. Questo è un po' complicato per gli utenti. Invece, quando viene visualizzato il menu laterale, la pagina deve essere inattiva. Gli utenti devono quindi chiudere o navigare nel menu laterale e non si perderanno mai altrove nella pagina con un menu aperto.

Risorse

• Specifica Inert
• Inert su MDN
• Sviluppatori di Chrome: presentazione di inert

Caratteri COLRv1

Prima dei caratteri COLRv1, sul web erano disponibili i caratteri OT-SVG, un altro formato aperto per i caratteri con gradienti ed effetti e colori integrati. Tuttavia, potevano diventare molto grandi e, sebbene consentissero di modificare il testo, non c'era molto spazio per la personalizzazione.

Dopo i caratteri COLRv1, il web ha caratteri di dimensioni ridotte, scalabili vettoriali, riposizionabili, con gradiente e modalità misto che accettano parametri per personalizzare il carattere in base al caso d'uso o per adattarlo a un brand.

Ecco un esempio tratto dal post del blog per sviluppatori di Chrome sugli emoji. Forse hai notato che se aumenti le dimensioni del carattere di un'emoji, questa non rimane nitida. Si tratta di un'immagine e non di un'illustrazione vettoriale. Spesso nelle applicazioni, quando viene utilizzata un'emoji, viene sostituita con un asset di qualità superiore. Con i caratteri COLRv1, le emoji sono vettori e bellissime:

I caratteri icona potrebbero fare cose straordinarie con questo formato, offrendo tavolozze di colori duotone personalizzate e altro ancora. Il caricamento di un carattere COLRv1 è come qualsiasi altro file di caratteri:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

La personalizzazione del carattere COLRv1 viene eseguita con @font-palette-values, un'istruzione at-rule CSS speciale per raggruppare e assegnare un nome a un insieme di opzioni di personalizzazione in un bundle per riferimento futuro. Tieni presente che specifichi un nome personalizzato come una proprietà personalizzata, iniziando con --:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

Con --colorized come alias per le personalizzazioni, l'ultimo passaggio consiste nell'applicare la tavolozza a un elemento che utilizza la famiglia di caratteri a colori:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

Con la disponibilità di un numero sempre maggiore di caratteri variabili e a colori, la tipografia web è sulla strada per una personalizzazione avanzata e un'espressione creativa.

Risorse

• Specifiche Colrv1 su GitHub
• Sviluppatori di Chrome: caratteri Colrv1
• Video esplicativo per sviluppatori su BlinkOn

Unità dell'area visibile

Prima delle nuove varianti dell'area visibile, il web offriva unità fisiche per agevolare l'adattamento delle aree visibili. Ce n'erano uno per altezza, larghezza, dimensione più piccola (vmin) e lato più grande (vmax). Questi metodi hanno funzionato bene per molte cose, ma i browser mobile hanno introdotto una complessità.

Sui dispositivi mobili, quando viene caricata una pagina, viene visualizzata la barra di stato con l'URL, che occupa parte dello spazio dell'area visibile. Dopo alcuni secondi e un po' di interattività, la barra di stato potrebbe scivolare via per offrire all'utente un'esperienza di visualizzazione più ampia. Tuttavia, quando la barra viene estratta, l'altezza dell'area visibile cambia e le eventuali unità vh si spostano e ridimensionano in base alle dimensioni target modificate. Negli anni successivi, l'unità vh aveva bisogno nello specifico di decidere quale delle due dimensioni dell'area visibile avrebbe utilizzato, perché causava problemi di layout visivo sgradevoli sui dispositivi mobili. È stato stabilito che vh rappresenterà sempre la visualizzazione più grande.

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

Dopo le nuove varianti dell'area visibile, vengono messe a disposizione unità di area visibile piccole, grandi e dinamiche, con l'aggiunta di equivalenti logici a quelle fisiche. L'idea è dare a sviluppatori e designer la possibilità di scegliere l'unità da utilizzare per il proprio scenario. Potrebbe essere accettabile una piccola variazione del layout in modo fastidioso quando la barra di stato scompare, quindi è possibile utilizzare dvh (altezza dell'area visibile dinamica) senza problemi.

Di seguito è riportato un elenco completo di tutte le nuove opzioni di unità di visualizzazione rese disponibili con le nuove varianti di visualizzazione:

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

Ci auguriamo che queste informazioni offrano agli sviluppatori e ai designer la flessibilità necessaria per realizzare i loro design responsive del viewport.

Risorse

• Specifiche per le unità relative all'area visibile
• Bramus: Viewport grandi, piccoli e dinamici

:has()

Prima del giorno :has(), l'oggetto di un selector era sempre alla fine. Ad esempio, l'oggetto di questo selettore è un elemento dell'elenco: ul > li. Gli pseudoselettori possono modificare il selettore, ma non modificano l'oggetto: ul > li:hover o ul > li:not(.selected).

Dopo :has(), un soggetto più in alto nella struttura ad albero degli elementi può rimanere soggetto fornendo una query sui figli: ul:has(> li). È facile capire come :has() abbia ricevuto il nome comune di "selettore principale", poiché l'oggetto del selettore ora è il principale in questo caso.

Di seguito è riportato un esempio di sintassi di base in cui la classe .parent rimane l'oggetto, ma viene selezionata solo se un elemento secondario ha la classe .child:

.parent:has(.child) {...}

Di seguito è riportato un esempio in cui un elemento <section> è l'oggetto, ma il selettore corrisponde solo se uno degli elementi secondari ha :focus-visible:

section:has(*:focus-visible) {...}

Il selettore :has() diventa un'utilità fantastica quando si manifestano casi d'uso più pratici. Ad esempio, al momento non è possibile selezionare i tag <a> quando inseriscono un a capo nelle immagini, il che rende difficile insegnare al tag di ancoraggio come modificare i relativi stili in questo caso d'uso. Con :has() è possibile:

a:has(> img) {...}

Si tratta di esempi in cui :has() sembra essere solo un selettore principale. Considera il caso d'uso delle immagini all'interno di elementi <figure> e la modifica degli stili sulle immagini se la figura ha un <figcaption>. Nell'esempio seguente, vengono selezionate le figure con le figcaption e poi le immagini all'interno di questo contesto. :has() viene utilizzato e non cambia l'oggetto, poiché l'oggetto scelto come target sono le immagini e non le figure:

figure:has(figcaption) img {...}

Le combinazioni sono apparentemente infinite. Combina :has() con le query quantità e modifica i layout della griglia CSS in base al numero di elementi secondari. Combina :has() con stati di pseudo classi interactive e crea applicazioni che rispondono in nuovi modi creativi.

Il controllo del supporto è semplificato con @supports e la sua funzione selector(), che verifica se il browser comprende la sintassi prima di utilizzarla:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

Risorse

• Specifiche di :has()
• :has() su MDN
• Il selettore CSS :has() è molto più di un "selettore parente"

2022 e oltre

Ci sono ancora molte cose che saranno difficili da fare dopo che tutte queste straordinarie caratteristiche saranno introdotte nel 2022. La sezione successiva esamina alcuni dei problemi rimanenti e le soluzioni in fase di sviluppo per risolverli. Queste soluzioni sono sperimentali, anche se possono essere specificate o disponibili dietro ai flag dei browser.

Il risultato delle sezioni successive dovrebbe essere la certezza che i problemi elencati hanno molte persone di molte aziende che cercano una soluzione, non che queste soluzioni verranno rilasciate nel 2023.

Proprietà personalizzate digitate a mano libera

Le proprietà personalizzate CSS sono fantastiche. Consentono di memorizzare qualsiasi tipo di elemento all'interno di una variabile etichettata, che può essere estesa, calcolata, condivisa e altro ancora. In effetti, sono così flessibili che sarebbe bello averne di meno flessibili.

Considera uno scenario in cui un box-shadow utilizza proprietà personalizzate per i suoi valori:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

Tutto funziona bene finché una delle proprietà non viene modificata in un valore non accettato dal CSS, ad esempio --x: red. L'intera ombra viene interrotta se una delle variabili nidificate non è presente o è impostata su un tipo di valore non valido.

È qui che entra in gioco @property: --x può diventare una proprietà personalizzata con tipi, non più libera e flessibile, ma sicura con alcuni limiti definiti:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

Ora, quando box-shadow utilizza var(--x) e viene tentato --x: red in un secondo momento,red verrà ignorato perché non è un <length>. Ciò significa che l'ombra continua a funzionare anche se è stato assegnato un valore non valido a una delle sue proprietà personalizzate. Anziché non riuscire, torna al suo initial-value di 0px.

Animazione

Oltre alla sicurezza della digitazione, apre anche molte porte per l'animazione. La flessibilità della sintassi CSS rende impossibile l'animazione di alcuni elementi, come i gradienti. @property è utile in questo caso perché la proprietà CSS digitata può informare il browser sull'intenzione di uno sviluppatore all'interno di un'interpolazione altrimenti eccessivamente complessa. In sostanza, limita l'ambito delle possibilità in quanto un browser può animare aspetti di uno stile che prima non poteva.

Considera questo esempio di demo, in cui viene utilizzato un gradiente radiale per creare una parte di un overlay, creando un effetto di messa a fuoco con faretto. JavaScript imposta le coordinate x e y del mouse quando viene premuto il tasto Alt/Opzione, quindi modifica la dimensione focale in un valore inferiore, ad esempio il 25%, creando il cerchio di messa a fuoco del faretto nella posizione del mouse:

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

I gradienti non possono essere animati. Sono troppo flessibili e complessi per essere "semplicemente dedotti" dal browser in base a come vuoi che vengano animati. Tuttavia, con @property, una proprietà può essere digitata e animata in modo isolato, rendendo il browser facilmente comprensibile all'intento.

I videogiochi che utilizzano questo effetto di messa a fuoco animano sempre il cerchio, da uno grande a uno molto piccolo. Ecco come utilizzare @property con la nostra demo in modo che il browser animi la maschera con gradiente:

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

Ora il browser è in grado di animare le dimensioni del gradiente perché abbiamo ridotto la superficie della modifica a una sola proprietà e abbiamo digitato il valore in modo che il browser possa interpolare in modo intelligente le lunghezze.

@property può fare molto di più, ma queste piccole attivazione possono fare molto.

Risorse

• @specifica della proprietà
• @property su MDN
• @property su web.dev
• Demo di messa a fuoco con zoom
• CSS Tricks: Exploring @property and its animating powers

Hai visitato min-width o max-width

Prima degli intervalli di query sui dispositivi, una query sui dispositivi CSS utilizza min-width e max-width per esprimere le condizioni superiore e inferiore. Potrebbe avere il seguente aspetto:

@media (min-width: 320px) {
  …
}

Dopo gli intervalli di query sui contenuti multimediali, la stessa query sui contenuti multimediali potrebbe avere il seguente aspetto:

@media (width >= 320px) {
  …
}

Una query sui media CSS che utilizza sia min-width che max-width potrebbe avere il seguente aspetto:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

Dopo gli intervalli di query sui contenuti multimediali, la stessa query sui contenuti multimediali potrebbe avere il seguente aspetto:

@media (320px <= width <= 1280px) {
  …
}

A seconda delle tue conoscenze di programmazione, uno di questi sarà molto più leggibile rispetto all'altro. Grazie alle aggiunte alle specifiche, gli sviluppatori potranno scegliere quelle che preferiscono o addirittura utilizzarle in modo intercambiabile.

Risorse

• Specifica della sintassi dell'intervallo di query supporti
• Sintassi dell'intervallo di query dei contenuti multimediali su Media Data Network (MDN)
• Plugin PostCSS per la sintassi dell'intervallo di query sui media

Nessuna variabile di query supporti

Prima del giorno @custom-media, le query supporti dovevano ripetersi più volte o fare affidamento sui preprocessori per generare l'output corretto in base a variabili statiche durante la creazione.

Dopo @custom-media, CSS consente di creare un alias delle query supporti e di farvi riferimento, proprio come per una proprietà personalizzata.

L'assegnazione di nomi agli elementi è molto importante: consente di allineare lo scopo alla sintassi, semplificando la condivisione e l'utilizzo nei team. Ecco alcune query multimediali personalizzate che mi seguono da un progetto all'altro:

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

Ora che sono definiti, posso utilizzarne uno in questo modo:

@media (--OSdark) {
  :root {
    …
  }
}

Puoi trovare un elenco completo di query per i contenuti multimediali personalizzati che utilizzo all'interno della mia libreria di proprietà personalizzate CSS Open Props.

Risorse

• Specifiche per le query sui media personalizzati
• Plugin PostCSS per query supporti personalizzate

I selettori di nidificazione sono bellissimi

Prima di @nest, le stylesheet erano molto ripetitive. È diventata particolarmente difficile quando i selettori erano lunghi e ognuno prendeva di mira piccole differenze. La praticità dell'organizzazione gerarchica è uno dei motivi più comuni per adottare un preprocessore.

Dopo @nest, la ripetizione non è più disponibile. Quasi tutte le funzionalità di nidificazione abilitata per il preprocessore saranno rese disponibili integrate in CSS.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

Per me, l'aspetto più importante del nidificazione, oltre a non ripetere article nel selettore nidificato, è che il contesto degli stili rimane all'interno di un blocco di stili. Invece di passare da un selettore e dai relativi stili a un altro selettore con stili (esempio 1), il lettore può rimanere nel contesto di un articolo e vedere i link di proprietà dell'articolo al suo interno. La relazione e l'intenzione di stile vengono messe insieme, quindi article sembra avere i propri stili.

La proprietà può essere considerata anche come centralizzazione. Anziché cercare stili pertinenti in un foglio di stile, puoi trovarli tutti nidificati all'interno di un contesto. Questo metodo funziona con le relazioni genitore-figlio, ma anche con quelle figlio-genitore.

Prendi in considerazione un componente secondario che vuole adattarsi quando si trova in un contesto principale diverso, anziché il componente principale che possiede lo stile e modifica un componente secondario:

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

@nest contribuisce a migliorare l'organizzazione, la centralizzazione e la proprietà degli stili. I componenti possono raggruppare e possedere i propri stili, anziché doverli distribuire tra altri blocchi di stile. In questi esempi può sembrare piccolo, ma l'impatto può essere notevole, sia per la praticità che per la leggibilità.

Risorse

• Specifiche @nest
• Plugin @nest PostCSS
• Bramus: Il futuro del CSS: nidificazione dei selettori

È molto difficile definire l'ambito degli stili

Prima di @scope, esistevano molte strategie perché gli stili in CSS si applicano in cascata, vengono ereditati e hanno ambito globale per impostazione predefinita. Queste funzionalità dei CSS sono molto utili per molte cose, ma per siti e applicazioni complessi, con potenzialmente molti stili di componenti diversi, lo spazio globale e la natura della cascata possono far sembrare gli stili una perdita.

Dopo @scope, gli stili non solo possono limitare l'ambito solo all'interno di un contesto, come una classe, ma possono anche essere articolati dove finiscono gli stili e non possono continuare a cascata o ereditare.

Nell'esempio seguente, l'ambito della convenzione di denominazione BEM può essere invertito nell'intento effettivo. Il selettore BEM sta tentando di applicare il colore di un elemento header a un contenitore .card con convenzioni di denominazione. Ciò richiede che l'intestazione abbia questo nome di classe e completi l'obiettivo. Con @scope, non sono necessarie convenzioni di denominazione per completare lo stesso obiettivo senza eseguire il markup dell'elemento intestazione:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

Ecco un altro esempio, meno specifico per i componenti e più relativo alla natura di ambito globale del CSS. I temi scuro e chiaro devono coesistere all'interno di un foglio di stile, dove l'ordine è importante per determinare uno stile vincente. In genere, gli stili del tema scuro vengono visualizzati dopo quelli del tema chiaro, in modo che il tema chiaro sia impostato come predefinito e quello scuro come facoltativo. Evita i problemi di ordinamento e ambito con @scope:

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

Per completare la storia, @scope consente anche di stabilire dove termina l'ambito dello stile. Non è possibile farlo con convenzioni di denominazione o preprocessori; si tratta di una funzionalità speciale che può essere eseguita solo da CSS integrato nel browser. Nel seguente esempio, gli stili img e .content vengono applicati esclusivamente quando un elemento figlio di un .media-block è un fratello o un elemento principale di .content:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

Risorse

• Specifica @scope
• @scope explainer

Nessun modo CSS per un layout a mattonella

Prima del layout a mattoncini CSS con griglia, JavaScript era il modo migliore per ottenere un layout a mattoncini, poiché qualsiasi metodo CSS con colonne o flexbox rappresentava in modo inaccurato l'ordine dei contenuti.

Dopo la disposizione a mattoni CSS con griglia, non saranno necessarie librerie JavaScript e l'ordine dei contenuti sarà corretto.

La demo precedente viene ottenuta con il seguente CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

È confortante sapere che questa è una strategia di layout mancante, inoltre puoi provarla oggi stesso in Firefox.

Risorse

• Specifiche del layout in muratura
• Layout in muratura su MDN
• Smashing Magazine: layout in stile muratura con CSS nativo e CSS Grid

Il CSS non può aiutare gli utenti a ridurre i dati

Prima della query sui media prefers-reduced-data, JavaScript e un server potevano cambiare il loro comportamento in base all'opzione "Risparmio dati" del browser o del sistema operativo di un utente, ma non il CSS.

Dopo la query sui media prefers-reduced-data, il CSS può contribuire al miglioramento dell'esperienza utente e svolgere il proprio ruolo nel salvataggio dei dati.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

Il CSS precedente viene utilizzato in questo componente di scorrimento dei contenuti multimediali e i risparmi possono essere enormi. A seconda delle dimensioni dell'area visibile da visitare, maggiori saranno i risparmi sul caricamento pagina. Il salvataggio continua man mano che gli utenti interagiscono con gli annunci scorrevoli di contenuti multimediali. Tutte le immagini hanno attributi loading="lazy" e, se combinate con il CSS che nasconde completamente l'elemento, significa che non viene mai effettuata una richiesta di rete per l'immagine.

Per il mio test, su un'area visibile di medie dimensioni sono state caricate inizialmente 40 richieste e 700 kB di risorse. Quando un utente scorre la selezione di contenuti multimediali, vengono caricate altre richieste e risorse. Con il CSS e la query multimediale sui dati ridotta, vengono caricate 10 richieste e 172 kB di risorse. Si tratta di mezzo megabyte di risparmio e l'utente non ha nemmeno scorretto i contenuti multimediali, a quel punto non vengono effettuate altre richieste.

Questa esperienza con dati ridotti offre più vantaggi rispetto al semplice risparmio di dati. Puoi vedere più titoli e non ci sono immagini di copertina che distraggono. Molti utenti navigano in modalità Risparmio dati perché pagano per megabyte di dati. È bello vedere che CSS sia in grado di aiutarci.

Risorse

• prefers-reduced-data specification
• prefers-reduced-data su MDN
• prefers-reduced-data in una GUI Sfida
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Study

Le funzionalità di scorrimento automatico sono troppo limitate

Prima di queste proposte di snap scorrimento, scrivere il proprio codice JavaScript per gestire un carosello, un cursore o una galleria poteva diventare rapidamente complesso, con tutti gli osservatori e la gestione dello stato. Inoltre, se non fai attenzione, le velocità di scorrimento naturali potrebbero essere normalizzate dallo script, rendendo l'interazione dell'utente un po' innaturale e potenzialmente complicata.

Nuove API

snapChanging()

Questo evento viene attivato non appena il browser rilascia uno snap secondario. In questo modo, la UI riflette la mancanza di un elemento figlio snap e lo stato indefinito dello snap dello scorrevole, poiché ora viene utilizzato e verrà visualizzato in un nuovo punto.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

Questo evento viene attivato non appena il browser si aggancia a un nuovo elemento secondario e lo scorrimento viene interrotto. In questo modo, qualsiasi UI che dipende dall'elemento secondario agganciato può aggiornarsi e riflettere la connessione.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

Lo scorrimento non inizia sempre dall'inizio. Considera i componenti a scorrimento, in cui lo scorrimento verso sinistra o destra attiva eventi diversi oppure una barra di ricerca che al caricamento della pagina è inizialmente nascosta finché non scorri verso l'alto. Questa proprietà CSS consente agli sviluppatori di specificare che uno scorrevole deve iniziare in un punto specifico.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

Questo selettore CSS corrisponderà agli elementi in un contenitore di snap di scorrimento attualmente agganciati dal browser.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

Dopo queste proposte di snap di scorrimento, creare un cursore, un carosello o una galleria è molto più semplice perché ora il browser offre comodità per l'attività, eliminando gli osservatori e il codice di orchestrazione dello scorrimento a favore dell'utilizzo delle API integrate.

Queste funzionalità CSS e JS sono ancora agli inizi, ma presta attenzione ai polyfill che potrebbero semplificare l'adozione e i test di queste funzionalità a breve.

Risorse

• Specifiche preliminari di scorrimento snap 2
• Spiegazioni di Scorri Snap 2
• Demo di Snap

In bicicletta tra stati noti

Prima di toggle(), potevano essere sfruttati solo gli stati già integrati nel browser per lo stile e l'interazione. L'input della casella di controllo, ad esempio, ha :checked, un stato del browser gestito internamente per l'input che il CSS è in grado di utilizzare per modificare l'elemento visivamente.

Dopo toggle(), è possibile creare stati personalizzati su qualsiasi elemento in modo che il CSS possa modificarli e utilizzarli per gli stili. Consente gruppi, cicli, attivazione/disattivazione dirette e altro ancora.

Nell'esempio seguente viene ottenuto lo stesso effetto di un elemento dell'elenco barrato al completamento, ma senza elementi di casella di controllo:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

E gli stili toggle() CSS pertinenti:

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

Se hai familiarità con le macchine a stati, potresti notare quanto sia elevato il grado di sovrapposizione con toggle(). Questa funzionalità consentirà agli sviluppatori di incorporare più stato in CSS, con un conseguente miglioramento dell'orchestrazione dell'interazione e dello stato.

Risorse

• Specifiche della bozza di toggle()
• Bramus: Il futuro del CSS: pulsanti di attivazione/disattivazione CSS

Personalizzazione di alcuni elementi

Prima di <selectmenu>, il CSS non aveva la possibilità di personalizzare gli elementi <option> con HTML avanzato o di modificare in modo significativo la visualizzazione di un elenco di opzioni. Ciò ha portato gli sviluppatori a caricare librerie esterne che ricreavano gran parte della funzionalità di un <select>, il che alla fine ha richiesto molto lavoro.

Dopo <selectmenu>, gli sviluppatori possono fornire HTML avanzato per gli elementi di opzione e personalizzarli in base alle proprie esigenze, rispettando al contempo i requisiti di accessibilità e fornendo HTML semantico.

Nel seguente esempio, tratto dalla <selectmenu> pagina informativa, viene creato un nuovo menu di selezione con alcune opzioni di base:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS può scegliere come target e applicare stili alle parti dell'elemento:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

Puoi provare l'elemento <selectmenu> su Chromium in Canary con il flag degli esperimenti web abilitato. Nel 2023 e oltre, tieni d'occhio gli elementi del menu selezionati personalizzabili.

Risorse

• Specifiche di Selectmenu
• Demo di Selectmenu

Ancorare un elemento a un altro

Prima di anchor(), le strategie di posizionamento assoluto e relativo erano fornite agli sviluppatori per consentire il movimento degli elementi secondari all'interno di un elemento principale.

Dopo anchor(), gli sviluppatori possono posizionare gli elementi in altri elementi, indipendentemente dal fatto che siano elementi secondari o meno. Inoltre, consente agli sviluppatori di specificare il bordo rispetto al quale eseguire il posizionamento e altre funzionalità per creare relazioni di posizione tra gli elementi.

Nel video esplicativo vengono forniti alcuni ottimi esempi ed esempi di codice, se vuoi scoprire di più.

Risorse

• anchor() spiega