Funzionalità di stile web di oggi e di domani, come mostrato a Google IO 2022, oltre ad alcune extra.
Il 2022 sarà uno dei migliori anni per CSS, sia per quanto riguarda le funzionalità che per i rilasci di funzionalità dei browser, con l'obiettivo di implementare 14 funzionalità in collaborazione.
Panoramica
Questo post è l'articolo del discorso tenuto a Google IO 2022. Non deve essere una guida approfondita per ogni funzionalità, piuttosto un'introduzione e una breve panoramica per stuzzicare il tuo interesse, fornendone l'ampiezza anziché la profondità. Se il tuo interesse è suscitato, controlla la fine di una sezione con link a risorse che rimandano a ulteriori informazioni.
Sommario
Utilizza l'elenco di seguito per passare agli argomenti di interesse:
Compatibilità del browser
Uno dei motivi principali per cui molte funzionalità CSS sono impostate per essere rilasciate in modo collaborativo è dovuto all'impegno di Interop 2022. Prima di esaminare le iniziative di interoperabilità, è importante esaminare le iniziative di Compat 2021.
Compatto 2021
Gli obiettivi per il 2021, basati sul feedback degli sviluppatori tramite i sondaggi, erano quelli di stabilizzare le funzionalità attuali, migliorare la suite di test e aumentare il punteggio di superamento dei browser per cinque funzionalità:
- Posizionamento
sticky - Dimensioni di
aspect-ratio - Layout
flex - Layout
grid - Posizionamento e animazione
transform
I punteggi dei test sono stati alzati su tutta la linea, dimostrando stabilità e affidabilità migliorate. Grandi 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 loro iniziative. Ha pianificato di fornire le seguenti funzionalità web agli sviluppatori:
@layer- Spazi colore e funzioni
- Contenimento
<dialog>- Compatibilità dei moduli
- Scorrimento
- Griglia
- Tipografia
- Unità area visibile
- Compatibilità web
Si tratta di un elenco entusiasmante e ambizioso che non vedo l'ora di scoprire.
Novità del 2022
Non sorprende che lo stato di CSS 2022 sia notevolmente influenzato dal lavoro di Interoperabilità 2022.
Livelli a cascata
Prima del giorno @layer, l'ordine rilevato dei fogli di stile caricati era molto importante, poiché gli stili caricati per ultimi possono sovrascrivere quelli caricati in precedenza. Ciò ha portato alla gestione meticolosa dei fogli di stile delle voci, in cui gli sviluppatori dovevano caricare prima gli stili meno importanti e quelli più importanti in seguito. Esistono intere metodologie
per aiutare gli sviluppatori a gestire questa importanza, ad esempio
ITCSS.
Con @layer, il file di input può predefinire i livelli e il loro ordine in anticipo. Quindi, man mano che gli stili vengono caricati, caricati o definiti, possono essere inseriti all'interno di un livello, consentendo di preservare l'importanza della sostituzione dello stile, ma senza l'orchestrazione del caricamento meticolosamente gestita.
Il video mostra in che modo i livelli definiti a cascata consentono un processo di creazione e caricamento più liberato e a stile libero, mantenendo al contempo la cascata come necessario.
Chrome DevTools è utile per visualizzare gli stili da cui provengono i livelli:
Risorse
- Specifiche Cascade 5 di CSS
- Spiegazione dei livelli a cascata
- Livelli a cascata su MDN
- Una Kravets: Livelli a cascata
- Ahmad Shadeed: Ciao, livelli Cascade CSS
Griglia
Prima del giorno subgrid, una griglia all'interno di un'altra griglia non poteva allinearsi alle celle o alle linee della griglia principali. Ogni layout a griglia era unico. Molti designer posizionano un'unica griglia sopra l'intero design e allineano costantemente gli elementi al suo interno, cosa che non è possibile fare in CSS.
Dopo subgrid, un elemento secondario di una griglia può adottare le colonne o le righe principali come proprie e allinearsi a loro o ai file secondari.
Nella demo seguente, l'elemento body crea una griglia classica di tre colonne:
la colonna centrale è denominata main e le colonne sinistra e destra assegnano un nome
alle linee
fullbleed. A questo punto, ogni elemento nel corpo, <nav> e <main>, adotta le righe 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 righe e le colonne fullbleed e main.
.main-content {
grid-column: main;
}
.fullbleed {
grid-column: fullbleed;
}
DevTools può aiutarti a visualizzare le linee e le sottogriglie (al momento solo Firefox). Nell'immagine seguente, la griglia principale e le reti secondarie sono state sovrapposte. Ora ricorda il layout che i designer stavano pensando.
Nel riquadro Elementi di DevTools puoi vedere quali elementi sono griglie e sottogriglie, il che è molto utile per il debug o la convalida del layout.
Risorse
Query container
Prima del giorno @container, gli elementi di una pagina web potevano rispondere solo alle dimensioni
dell'intera area visibile. È un'ottima soluzione per i layout macro, ma per i layout micro, dove
il container esterno non corrisponde all'intera area visibile, è impossibile che il layout si adatti
di conseguenza.
Dopo @container, gli elementi possono rispondere a una dimensione o a uno stile del contenitore principale.
L'unico avvertimento è che i container devono autodichiararsi come possibili target delle query, il che è 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 nelle colonne Lun, Mar, Mer, Gio e Ven nel seguente video per eseguire query da parte degli elementi evento.
Ecco il CSS per eseguire query al contenitore calendar-day in merito alle sue dimensioni, quindi
regolare un 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 libro si adatta automaticamente allo spazio disponibile nella colonna in cui viene trascinato:
Una ha ragione nel valutare la situazione come il nuovo adattabile. È necessario prendere molte decisioni di progettazione entusiasmanti e significative quando si utilizza @container.
Risorse
- Specifiche delle query container
- Spiegazione delle query container
- Query container su MDN
- Il nuovo adattabile su web.dev
- Demo di Calendar di Una
- Fantastica raccolta di query container
- Come abbiamo creato Designcember su web.dev
- Ahmad Shadeed: Say Hello to CSS Container Queries
accent-color
Prima del giorno accent-color, quando volevi un modulo con colori corrispondenti ai brand, potresti ritrovarti con librerie o soluzioni CSS complesse diventate difficili da gestire con il passare del tempo. Nonostante le fornissero tutte le opzioni e, speriamo, includessero
l'accessibilità, la scelta di utilizzare i componenti integrati o adottarne uno proprio
diventa noiosa.
Dopo il giorno accent-color, una riga di CSS applica un colore del brand ai componenti integrati. Oltre alla tinta, il browser sceglie in modo intelligente i colori contrastanti appropriati per le parti accessorie del componente e si adatta agli schemi di colori del sistema (chiaro o scuro).
/* 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 analizzo molti altri aspetti di
questa utile proprietà CSS.
Risorse
- specifica accent-color
- accent-color su MDN
- accent-color su web.dev
- Bramus: Tint User-Interface Controls con CSS accent-color
Livello di colore 4 e 5
Negli ultimi decenni il web è stato dominato da sRGB, ma in un mondo digitale in espansione di display ad alta definizione e dispositivi mobili dotati di schermi OLED o QLED, sRGB non è sufficiente. Inoltre, sono previste pagine dinamiche che si adattano alle preferenze degli utenti e la gestione dei colori è sempre più preoccupata da progettisti, sistemi di progettazione e gestori del codice.
Tuttavia, non nel 2022. CSS offre una serie di nuove funzioni colore e nuovi spazi: - Colori che si adattano alle funzionalità cromatiche HD dei display. - Spazi colore che corrispondono a un intent, come l'uniformità percettiva. - Spazi colore per gradienti che cambiano drasticamente i risultati dell'interpolazione. - Funzioni per il colore che ti aiutano a combinare e contrastare i colori e a scegliere lo spazio in cui lavorare.
Prima di tutte queste caratteristiche dei colori, i sistemi di progettazione dovevano precalcolare i colori contrastanti adeguati e garantire una tavolozza di colori appropriati, il tutto mentre i preprocessori o JavaScript si occupavano del lavoro pesante.
Dopo tutte queste caratteristiche relative ai colori, il browser e il CSS possono fare tutto il lavoro, in modo dinamico e giusto in tempo. Invece di inviare molti kB di CSS e JavaScript agli utenti per attivare i colori dei temi e della visualizzazione dei dati, CSS può occuparsi dell'orchestrazione e dei calcoli. Inoltre, CSS è più adatto a verificare l'assistenza prima dell'utilizzo o a gestire agevolmente i fallback.
@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 semplice per articolare i colori, in quanto è solo una tonalità e una quantità di bianco o nero che illuminano o scuriscono. Gli artisti che mescolano i colori con il bianco o il nero potrebbero scoprire apprezzare l'aggiunta di questa sintassi.
L'uso di questa funzione colore consente di ottenere i colori dello spazio colore sRGB, gli stessi di HSL e RGB. In termini di novità per il 2022, questo non dà nuovi colori, ma potrebbe semplificare alcune attività per chi ama la sintassi e il modello mentale.
Risorse
Spazi colore
Il modo in cui vengono rappresentati i colori avviene tramite uno spazio colore. Ogni spazio colore offre varie funzionalità e compromessi per lavorare con i colori. Alcuni possono combinare tutti i colori vivaci insieme; altri li allineano per primi in base alla loro leggerezza.
Per il 2022 il CSS offrirà 10 nuovi spazi colore, ognuno con funzionalità uniche per aiutare designer e sviluppatori a visualizzare, scegliere e mischiare i colori. In precedenza, sRGB era l'unica opzione per lavorare con i colori, ma ora CSS sblocca un nuovo potenziale e un nuovo spazio colore predefinito, LCH.
color-mix()
Prima del giorno color-mix(), sviluppatori e progettisti avevano bisogno di preprocessori come
Sass per mescolare i colori prima che il browser li vedesse.
Inoltre, la maggior parte delle funzioni di combinazione dei colori non offriva la possibilità di specificare lo spazio colore in cui eseguire la combinazione, il che a volte generava risultati confusi.
Dopo il giorno color-mix(), sviluppatori e designer potranno combinare 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 combinazione
oppure utilizzare lo spazio colore di combinazione predefinito di LCH.
Spesso viene utilizzato un colore del brand come base e ne vengono create varianti, ad esempio colori più chiari o più scuri per gli stili al passaggio del mouse. Ecco come si presenta con color-mix():
.color-mix-example {
--brand: #0af;
--darker: color-mix(var(--brand) 25%, black);
--lighter: color-mix(var(--brand) 25%, white);
}
and if you wanted to mix those colors in a different color space, like srgb, change it:
.color-mix-example {
--brand: #0af;
--darker: color-mix(in srgb, var(--brand) 25%, black);
--lighter: color-mix(in srgb, var(--brand) 25%, white);
}
Segue una demo sulla tematizzazione con color-mix(). Prova a cambiare il colore del brand
e guarda l'aggiornamento del tema:
Divertiti a mescolare i colori in vari spazi cromatici nei tuoi fogli di stile nel 2022.
Risorse
- Specifiche di color-mix()
- color-mix() su MDN
- Demo dei temi
- Un'altra demo a tema
- Fabio Giolito: Crea un tema a colori con queste funzionalità CSS future
color-contrast()
Prima del giorno color-contrast(), gli autori dei fogli di stile dovevano conoscere
in anticipo i colori accessibili. Spesso una tavolozza mostrava testo in bianco o nero su un campione di colore per indicare a un utente del sistema di colori quale colore del testo sarebbe 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à al browser. Non solo puoi utilizzare il browser per scegliere automaticamente un colore bianco o nero, ma puoi anche fornire un elenco di colori adatti al sistema di progettazione e scegliere il primo per trasmettere il rapporto di contrasto desiderato.
Ecco uno screenshot di una demo del set di tavolozze dei colori HWB in cui i colori del testo vengono scelti automaticamente dal browser in base al colore campione:
L'aspetto di base della sintassi è il seguente, dove il grigio viene passato alla funzione e il browser determina se il bianco o il nero hanno il contrasto maggiore:
color: color-contrast(gray);
La funzione può anche essere personalizzata con un elenco di colori, da cui verrà selezionato il colore con il maggiore contrasto tra quelli selezionati:
color: color-contrast(gray vs indigo, rebeccapurple, hotpink);
Infine, nel caso in cui sia preferibile non scegliere il colore con il più alto contrasto dall'elenco, è possibile fornire un rapporto di contrasto target e scegliere 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 qualcosa di più del semplice colore del testo, anche se ritengo che sarà il suo caso d'uso principale. Pensa a quanto sarà più semplice fornire interfacce accessibili e leggibili una volta che la scelta di colori a contrasto appropriati sarà incorporata nel linguaggio CSS stesso.
Risorse
Sintassi dei colori relativa
Prima della sintassi relativa dei colori, per calcolare i colori e apportare modifiche, i canali colore dovevano essere inseriti singolarmente nelle proprietà personalizzate. Questa limitazione ha anche reso HSL 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 relativa sintassi, ogni colore in qualsiasi spazio può essere scomposto, modificato e restituito come colore, il tutto in un'unica riga di CSS. Non ci sono più limitazioni a HSL: è possibile eseguire le manipolazioni in qualsiasi spazio colore desiderato e occorre creare molte meno proprietà personalizzate per semplificare l'operazione.
Nell'esempio di sintassi riportato di seguito viene fornito un esadecimale di base e vengono creati due nuovi colori relativi. Il primo colore --absolute-change crea un nuovo colore in LCH rispetto al colore di base, quindi sostituisce la luminosità del colore di base con 75%, mantenendo il cromatico (c) e la tonalità (h). Il secondo colore --relative-change crea un nuovo colore in LCH rispetto al colore di base, ma questa volta riduce la crominanza (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);
}
È come mescolare i colori, ma è più simile alle alterazioni che al mescolare. Puoi trasmettere un colore di un altro colore, avere accesso ai tre valori dei canali indicati dalla funzione colore utilizzata, con la possibilità di regolare questi canali. Nel complesso, questa è una sintassi per il colore molto potente ed efficace.
Nella demo seguente ho usato la sintassi relativa del colore per creare varianti più chiare e
più scure di un colore di base e ho usato color-contrast() per garantire
il contrasto corretto delle etichette:
Questa funzione può essere utilizzata anche per la generazione della tavolozza dei colori. Ecco una demo in cui vengono generate intere tavolozze da un colore di base specificato. Questo insieme di CSS è alla base di tutte le diverse tavolozze, ciascuna delle quali offre semplicemente una base diversa. Come bonus, dato che ho usato LCH, guarda come sono percepite anche le tavolozze: non si vedono punti caldi o morti, grazie a questo spazio 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);
}
Spero che a questo punto sia possibile vedere come gli spazi colore e le diverse funzioni colore possono essere utilizzati per scopi diversi, in base ai loro punti di forza e di debolezza.
Risorse
- Specifica della sintassi dei colori relativa
- Creazione di tavolozze dei colori con la sintassi dei colori relativa
- Creazione di varianti di colore con la sintassi dei colori relativa
Spazi colore con gradiente
Prima degli spazi colore a gradiente, 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 dei colori. In questo modo, sviluppatori e progettisti possono scegliere la sfumatura che preferiscono. Anche lo spazio colore predefinito diventa LCH anziché sRGB.
L'aggiunta della sintassi va 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 un gradiente di base ed essenziale dal nero al bianco. Osserva l'intervallo di risultati in ogni spazio colore. Alcune diventano il nero scuro prima di altre, altre svaniscono al bianco troppo tardi.
Nel prossimo esempio, il nero passa al blu perché è uno spazio problematico per i gradienti. La maggior parte degli spazi colore diventa viola durante l'interpolazione dei colori o, come mi piace, quando i colori viaggiano all'interno dello spazio colore dal punto A al punto B. Dal momento che il gradiente prenderà una linea retta dal punto A al punto B, la forma dello spazio colore cambia drasticamente le fermate del percorso lungo il percorso.
Per esplorazioni, esempi e commenti più approfonditi, leggi questo thread di Twitter.
Risorse
- Specifica dell'interpolazione gradiente
- Demo sul confronto dei gradienti negli spazi
- Blocco note osservabile che confronta i gradienti
inert
Prima del giorno inert era buona norma indirizzare l'attenzione dell'utente su aree della pagina o dell'app che richiedevano attenzione immediata. Questa strategia basata su focus guidato
è diventata nota come focus trap perché gli sviluppatori dovevano concentrarsi su uno spazio
interattivo, ascoltare gli eventi di cambiamento dell'attenzione e, se l'attenzione lasciava lo spazio
interattivo, dovevano essere riproposti in modo forzato. Gli utenti che utilizzano tastiere o screen reader vengono indirizzati nuovamente allo spazio interattivo per assicurarsi che l'attività sia completata prima di proseguire.
Dopo il giorno inert, non è più necessario bloccare i contenuti perché puoi bloccare o proteggere intere sezioni della pagina o dell'app. I clic e i tentativi di modifica dello stato attivo non sono semplicemente disponibili mentre quelle parti di un documento sono inerti. Potresti pensare a questo servizio come a un servizio di guardia anziché a una trappola, in cui a inert non interessa far sì che la tua casa rimanga in qualche modo, piuttosto che rendere non disponibili altri luoghi.
Un buon esempio è la funzione alert() di JavaScript:
Come puoi vedere nel video precedente, la pagina era accessibile tramite mouse e tastiera fino alla chiamata di un elemento alert(). Quando è stata mostrata la finestra popup di avviso, il resto
della pagina è stato bloccato, o inert. L'elemento attivo dell'utente viene inserito nella finestra di dialogo dell'avviso e non c'è altro da fare. Una volta che l'utente interagisce e completa la richiesta di funzione di avviso, la pagina diventa di nuovo interattiva. inert consente agli sviluppatori di ottenere facilmente questa stessa esperienza di concentrazione guidata.
Ecco un piccolo esempio di codice che illustra il funzionamento:
<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 cose come l'esperienza utente del menu laterale a scorrimento. Quando un utente fa scorrere il menu laterale fuori dalla pagina, non va bene lasciare che il mouse o la tastiera interagiscano con la pagina visualizzata; la situazione è un po' complessa per gli utenti. Invece, quando il menu laterale è visualizzato, rendi la pagina inerte; ora gli utenti devono chiudere o navigare all'interno del menu laterale e non si troveranno mai in un altro punto della pagina con un menu aperto.
Risorse
Caratteri COLRv1
Prima dei caratteri COLRv1, il web aveva i caratteri OT-SVG, anche un formato aperto per i caratteri con gradienti e colori ed effetti integrati. Le dimensioni erano molto grandi e, sebbene fosse consentito modificare il testo, la personalizzazione non era sufficiente.
Dopo i caratteri COLRv1, il web ha caratteri di dimensioni ridotte, scala vettoriale, riposizionabili, con gradiente e in modalità di combinazione, che accettano parametri per personalizzare il carattere in base ai casi d'uso o a un brand.
Ecco un esempio tratto dal post del blog per sviluppatori di Chrome sulle emoji. Forse hai notato che, se aumenti le dimensioni del carattere di un'emoji, il risultato non viene mantenuto. È un'immagine e non un'arte vettoriale. Spesso nelle applicazioni in cui si usa un'emoji, viene sostituita con un asset di qualità superiore. Con i caratteri COLRv1, le emoji sono vettoriali e belle:
I caratteri delle icone possono fare delle cose straordinarie con questo formato, offrendo tavolozze dei colori a due tonalità personalizzate e altro ancora. Il caricamento di un carattere COLRv1 è come qualsiasi altro file carattere:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
La personalizzazione del carattere COLRv1 viene eseguita con @font-palette-values, una regola CSS speciale per raggruppare e assegnare un nome a un insieme di opzioni di personalizzazione in un bundle per utilizzarli in seguito. Osserva come specifichi un nome personalizzato, proprio come una proprietà
personalizzata, a partire da --:
@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 colorati:
@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 e caratteri a colori variabili, la tipografia web si trova su un percorso magnifico verso una personalizzazione ed un'espressione creativa avanzate.
Risorse
- Specifiche Colrv1 su GitHub
- Sviluppatori Chrome: caratteri Colrv1
- Video esplicativo per gli sviluppatori BlinkOn
Unità area visibile
Prima delle nuove varianti dell'area visibile, il web offriva unità fisiche utili per adattare le aree visibili. Ce n'era uno per altezza, larghezza, dimensioni minime (vmin) e lato più grande (vmax). Hanno funzionato bene per molti aspetti, ma i browser mobile hanno introdotto una complessità.
Sui dispositivi mobili, quando si carica una pagina, viene mostrata 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 scomparire per consentire all'utente di avere un'esperienza più ampia dell'area visibile. Tuttavia, quando la barra esce dall'area, l'altezza dell'area visibile è cambiata e tutte le unità vh si spostano e ridimensionano quando le dimensioni di destinazione cambiano.
Negli anni successivi, l'unità vh doveva specificatamente decidere quale delle due dimensioni dell'area visibile doveva utilizzare, perché causava problemi di layout visivo fastidiosi sui dispositivi mobili. È stato stabilito che vh rappresenterà sempre
l'area visibile più grande.
.original-viewport-units {
height: 100vh;
width: 100vw;
--size: 100vmin;
--size: 100vmax;
}
Dopo aver reso disponibili le nuove varianti dell'area visibile, le unità dell'area visibile piccola, grande e dinamica sono state rese disponibili, con l'aggiunta di equivalenti logici a quelli fisici. L'idea è dare a sviluppatori e designer la possibilità di scegliere quale unità utilizzare per il loro scenario specifico. Forse va bene avere una piccola variazione del layout fastidioso quando la barra di stato scompare, in modo da poter utilizzare l'altezza dell'area visibile dinamica dvh senza preoccupazioni.
Di seguito è riportato un elenco completo di tutte le nuove opzioni di unità dell'area visibile rese disponibili con le nuove varianti dell'area visibile:
.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 offrano a sviluppatori e designer la flessibilità necessaria per realizzare design adattabili per l'area visibile.
Risorse
:has()
Prima di :has(), l'oggetto di un selettore era sempre alla fine. Ad esempio, l'oggetto di questo selettore è un elemento dell'elenco: ul > li. Gli pseudo selettori possono modificare
il selettore, ma non modificano l'oggetto: ul > li:hover o ul >
li:not(.selected).
Dopo :has(), un soggetto più in alto nell'albero degli elementi può rimanere soggetto
fornendo una query sugli elementi secondari: ul:has(> li). È facile capire in che modo :has() ha un nome comune di "selettore padre", poiché in questo caso il soggetto del selettore è ora l'elemento padre.
Ecco 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) {...}
Ecco un esempio in cui un elemento <section> è il soggetto, ma il selettore corrisponde solo se uno degli elementi secondari ha :focus-visible:
section:has(*:focus-visible) {...}
Il selettore :has() inizia a diventare un'utilità fantastica quando diventano evidenti altri casi d'uso pratici. Ad esempio, al momento non è possibile selezionare i tag <a> quando aggregano le immagini, il che rende difficile insegnare all'anchor tag come modificare i propri stili in questo caso d'uso. È possibile con :has(), tuttavia:
a:has(> img) {...}
Questi sono tutti esempi in cui :has() sembra solo un selettore principale.
Considera il caso d'uso delle immagini all'interno degli elementi <figure> e regola gli
stili sulle immagini se la figura ha un <figcaption>. Nel seguente esempio, vengono selezionate le figure con sottotitoli codificati e poi le immagini all'interno di quel contesto. Viene utilizzato :has() e non cambia l'oggetto, in quanto l'oggetto scelto come target è costituito da immagini, non da figure:
figure:has(figcaption) img {...}
Le combinazioni sono praticamente infinite. Combina :has() con le query
sulla quantità e modifica
i layout della griglia CSS in base al numero di elementi secondari. Combina :has() con
stati di pseudo-classi interattive e crea
applicazioni che rispondono in modi nuovi e creativi.
La verifica dell'assistenza è semplice grazie a @supports e alla sua funzione selector(), che verifica se il browser comprende la sintassi prima di utilizzarlo:
@supports (selector(:has(works))) {
/* safe to use :has() */
}
Risorse
2022 e oltre
Ci sono ancora una serie di cose che saranno difficili da fare una volta che queste funzionalità sorprendenti arriveranno nel 2022. Nella prossima sezione esamineremo alcuni dei problemi rimanenti e le soluzioni che si stanno sviluppando attivamente per risolverli. Queste soluzioni sono sperimentali, anche se possono essere specificate o disponibili dietro flag dei browser.
Il risultato delle sezioni successive dovrebbe essere conforto sul fatto che molte persone di molte aziende cercano una soluzione ai problemi elencati, ma non che queste soluzioni verranno rilasciate nel 2023.
Proprietà personalizzate digitate in modo non corretto
Le proprietà personalizzate CSS sono straordinarie. Consentono di archiviare tutti i tipi di elementi all'interno di una variabile con nome, che può essere estesa, calcolata, condivisa e altro ancora. In effetti, sono così flessibili che sarebbe bello averne alcuni meno flessibili.
Considera uno scenario in cui box-shadow utilizza proprietà personalizzate per i propri valori:
box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
Tutto questo funziona bene fino a quando una delle proprietà non viene modificata in un valore non accettato da CSS, ad esempio --x: red. L'intera ombra si interrompe 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 digitata, non più larga 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 la versione successiva di --x: red,
red verrà ignorata perché non è un <length>. Ciò significa che l'ombra continua a funzionare, anche se a una delle sue proprietà personalizzate è stato assegnato un valore non valido.
Anziché non funzionare, viene ripristinata la metrica initial-value di 0px.
Animazione
Oltre alla funzionalità di sicurezza tipo, apre anche molte porte per l'animazione. La flessibilità della sintassi CSS rende impossibile l'animazione di alcuni elementi, ad esempio 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 troppo complessa. Sostanzialmente limita l'ambito di possibilità, dal momento che un
browser può animare aspetti di uno stile che prima non era possibile.
Considera questo esempio dimostrativo, in cui viene utilizzato un gradiente radiale per creare una porzione di un overlay, creando un effetto di messa a fuoco in evidenza. JavaScript imposta x e y del mouse quando viene premuto il tasto Alt/opt, quindi modifica la dimensione focale impostando un valore inferiore, ad esempio 25%, creando il cerchio di messa a fuoco in evidenza 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%
);
}
Tuttavia, i gradienti non possono essere animati. Sono troppo flessibili e troppo complesse per essere
solo nel modo in cui vuoi che si animano. Con @property, tuttavia, una proprietà può essere digitata e animata in modo isolato, in modo che il browser possa comprendere facilmente l'intento.
I videogiochi che usano questo effetto di messa a fuoco animano sempre il cerchio, da un cerchio grande a uno stenopeico. Ecco come utilizzare @property con la nostra demo in modo che il browser anima la maschera sfumatura:
@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 la dimensione del gradiente perché abbiamo ridotto l'area 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 abilitazioni possono fare la differenza.
Risorse
- @specifica della proprietà
- @proprietà su MDN
- @property su web.dev
- Demo di messa a fuoco zoom
- Trucchi CSS: esplorare @proprietà e i suoi poteri di animazione
Era in min-width o max-width
Prima degli intervalli di query supporti, una query supporti CSS utilizza min-width e max-width per
articolare le condizioni sopra e sotto. Potrebbe avere il seguente aspetto:
@media (min-width: 320px) {
…
}
Dopo gli intervalli di query supporti, la stessa query supporti potrebbe avere il seguente aspetto:
@media (width >= 320px) {
…
}
Una query multimediale CSS che utilizza sia min-width sia max-width potrebbe avere il seguente aspetto:
@media (min-width: 320px) and (max-width: 1280px) {
…
}
Dopo gli intervalli di query supporti, la stessa query supporti potrebbe avere il seguente aspetto:
@media (320px <= width <= 1280px) {
…
}
A seconda delle tue conoscenze di programmazione, una di queste sarà molto più leggibile dell'altra. Grazie alle aggiunte di specifiche, gli sviluppatori potranno scegliere quello che preferiscono o persino utilizzarli in modo intercambiabile.
Risorse
- Specifica della sintassi dell'intervallo di query multimediali
- Sintassi dell'intervallo di query multimediali su MDN
- Plug-in PostCSS per la sintassi dell'intervallo di query multimediali
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 alle variabili statiche durante il tempo di build.
Dopo @custom-media, il CSS consente l'aliasing delle query multimediali e il relativo riferimento, proprio come una proprietà personalizzata.
L'assegnazione di un nome è molto importante: è in grado di allineare lo scopo alla sintassi, rendendo le cose più facili da condividere e da usare nei team. Ecco alcune query multimediali personalizzate che mi seguono tra un progetto e l'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 nel seguente modo:
@media (--OSdark) {
:root {
…
}
}
Trova un elenco completo delle query multimediali personalizzate che utilizzo nella libreria delle proprietà personalizzate del mio CSS Open Props.
Risorse
- Specifica delle query supporti personalizzate
- Plug-in PostCSS per le query multimediali personalizzate
La nidificazione dei selettori è perfetta
Prima del giorno @nest, i fogli di stile venivano ripetuti più volte. Era particolarmente poco gestibile quando i selettori erano lunghi e ciascuno puntava a piccole differenze. La comodità della nidificazione è uno dei motivi più comuni per
l'adozione di un preprocessore.
Dopo il giorno @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);
}
}
L'aspetto più importante della nidificazione per me, oltre a non ripetere article nel selettore nidificato, è che il contesto dello stile rimane all'interno di un blocco di stile.
Invece di passare da un selettore e i suoi stili a un altro selettore con stili (esempio 1), il lettore può rimanere nel contesto di un articolo e vedere che l'articolo possiede i link al suo interno. La relazione e l'intenzione di stile sono
insieme, in modo che article appaia come proprietario dei suoi stili.
La proprietà può essere considerata anche come centralizzazione. Invece di cercare stili pertinenti nei fogli di stile, puoi trovarli tutti nidificati all'interno di un contesto. Questo approccio funziona nelle relazioni da padre a figlio, ma anche con le relazioni padre-figlio.
Considera un componente figlio che vuole regolarsi automaticamente in un contesto principale diverso, anziché cambiare l'elemento principale che possiede lo stile e modificare l'asset 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 favorisce complessivamente con uno stile più salutare l'organizzazione, la centralizzazione e la
proprietà. I componenti possono raggruppare e possedere i propri stili, anziché essere distribuiti tra gli altri blocchi di stile. Può sembrare piccolo, ma può avere effetti
molto importanti, sia per quanto riguarda la convenienza che per la leggibilità.
Risorse
Gli stili di ambito sono davvero difficili
Supporto dei browser
- 118
- 118
- x
- 17,4
Prima del giorno @scope, esistevano molte strategie perché gli stili in CSS si basano su sistemi a cascata, ereditano e hanno un ambito globale per impostazione predefinita. Queste funzionalità di CSS sono molto utili per molte cose, ma nel caso di applicazioni e siti complessi, con molti stili di componenti diversi, lo spazio globale e la natura della cascata possono far percepire gli stili.
Dopo @scope, non solo sarà possibile limitare l'ambito degli stili solo all'interno di un contesto, ad esempio una classe, ma anche spiegare dove terminano e non continuano a cascata o ereditare.
Nell'esempio seguente, l'ambito della convenzione di denominazione BEM può essere invertito nell'intent effettivo. Il selettore BEM sta tentando di limitare il colore di un elemento header a un container .card con convenzioni di denominazione. Ciò richiede l'inserimento di questo nome della classe nell'intestazione, in modo da completare l'obiettivo. Con @scope, non sono necessarie convenzioni di denominazione per completare lo stesso obiettivo senza eseguire il markup dell'elemento di 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ù dettagli sulla natura
in ambito globale di CSS. I temi chiaro e scuro devono coesistere all'interno di un foglio di stile, dove
l'ordine è importante per determinare uno stile vincente. Generalmente, ciò significa che gli stili di tema scuro vengono dopo il tema chiaro e che il tema chiaro viene impostato come predefinito e scuro come facoltativo. Evita di scontrare gli ordini e l'ambito con @scope:
@scope (.light-theme) {
a { color: purple; }
}
@scope (.dark-theme) {
a { color: plum; }
}
Per completare la storia in questo caso, @scope consente anche di stabilire dove
termina l'ambito dello stile. Questa operazione non può essere eseguita con alcuna convenzione di denominazione o preprocessore; è speciale e solo qualcosa del CSS integrato nel browser può fare. Nell'esempio seguente, gli stili img e .content vengono applicati esclusivamente quando un elemento secondario di .media-block è l'elemento di pari livello o l'elemento padre di .content:
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
Risorse
Nessun modo CSS per un layout in muratura
Prima della creazione in muratura CSS con griglia, JavaScript era il modo migliore per ottenere un layout in muratura, poiché qualsiasi metodo CSS con colonne o flexbox rappresenta in modo impreciso l'ordine dei contenuti.
Dopo la creazione in muratura CSS con griglia, non saranno necessarie librerie JavaScript e l'ordine dei contenuti verrà corretto.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
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. In più, puoi provarla oggi stesso con Firefox.
Risorse
- Specifiche del layout della muratura
- Layout in muratura su MDN
- Smashing Magazine: Layout per muratura CSS nativo con CSS Grid
Il CSS non può aiutare gli utenti a ridurre i dati
Prima della query multimediale prefers-reduced-data, JavaScript e un server potevano
modificare il proprio comportamento in base all'opzione "Risparmio dati" del sistema operativo o del browser
di un utente, ma non CSS.
Dopo la query multimediale prefers-reduced-data, il CSS può partecipare al miglioramento dell'esperienza utente e contribuire al salvataggio dei dati.
@media (prefers-reduced-data: reduce) {
picture, video {
display: none;
}
}
Il codice CSS precedente viene utilizzato in questo componente di scorrimento multimediale e il risparmio può essere enorme. A seconda delle dimensioni dell'area visibile per la visita, maggiore sarà il risparmio
con il caricamento pagina. Il risparmio continua man mano che gli utenti
interagiscono con le barre di scorrimento dei contenuti multimediali. Tutte le immagini hanno attributi loading="lazy" e questo,
combinato 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 stati inizialmente caricati 40 richieste e 700 kB di risorse. Man mano che un utente scorre la selezione dei contenuti multimediali, vengono caricate altre richieste e risorse. Con CSS e la query multimediale ridotta per i dati vengono caricati 10 richieste e 172 kB di risorse. Ciò equivale a mezzo megabyte di risparmio e l'utente non ha neanche fatto scorrere i contenuti multimediali e, a quel punto, non ci vengono richieste aggiuntive.
Questa esperienza con i dati ridotta presenta altri vantaggi oltre al risparmio dei dati. È possibile vedere più titoli e non ci sono immagini di copertina che distraggono per attirare l'attenzione. Molti utenti utilizzano la modalità Risparmio dati perché pagano per megabyte di dati. È davvero bello vedere che CSS è in grado di aiutarti.
Risorse
- prefers-reduced-data-specification
- prefers-reduced-data on MDN
- prefers-reduced-data in una GUI Challenge
- Smashing Magazine: Migliorare i Core Web Vitals, A Smashing Magazine Case Study
Le funzionalità di agganciamento di scorrimento sono troppo limitate
Prima di queste proposte di scorrimento, scrivere il tuo codice JavaScript per gestire un carosello, un dispositivo di scorrimento 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 poco chiara.
Nuove API
snapChanging()
L'evento si attiva non appena il browser rilascia uno Snap figlio. Ciò consente all'interfaccia utente di riflettere la mancanza di un elemento figlio di agganciamento e lo stato di aggancio indeterminato dello scorrimento, poiché ora è in uso e si troverà in una nuova posizione.
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
Questo evento si attiva non appena il browser si è agganciato a un nuovo bambino e la barra di scorrimento è bloccata. In questo modo, qualsiasi UI che dipende dall'elemento figlio 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 quando viene caricata la pagina viene inizialmente nascosta finché non scorri verso l'alto. Questa proprietà CSS consente agli sviluppatori di specificare che uno scorrimento 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 agganciamento 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 scorrimento dello scorrimento, creare un dispositivo di scorrimento, un carosello o una galleria è molto più semplice, poiché il browser ora offre praticità per l'attività, eliminando osservatori e codice di orchestrazione dello scorrimento in favore dell'utilizzo delle API integrate.
Queste funzionalità CSS e JS sono ancora agli inizi, ma a breve presta attenzione ai polyfill, che potrebbero facilitarne l'adozione e il test.
Risorse
Ciclo tra gli stati noti
Prima del giorno toggle(), solo gli stati integrati nel browser potevano essere già utilizzati per lo stile e l'interazione. L'input della casella di controllo, ad esempio, contiene :checked, uno stato del browser gestito internamente per l'input che CSS può utilizzare per modificare visivamente l'elemento.
Dopo il giorno toggle(), potrai creare stati personalizzati su qualsiasi elemento in modo che il CSS possa modificarlo
e utilizzarlo per lo stile. Consente gruppi, ciclismo, attivazione/disattivazione diretta e altro ancora.
Nell'esempio seguente, si ottiene lo stesso effetto di una voce dell'elenco barrata al completamento, ma senza elementi delle caselle di controllo:
<ul class='ingredients'>
<li>1 banana
<li>1 cup blueberries
...
</ul>
E gli stili CSS toggle() pertinenti:
li {
toggle-root: check self;
}
li:toggle(check) {
text-decoration: line-through;
}
Se hai familiarità con le macchine a stati, potresti notare la quantità di crossover
con toggle(). Questa funzionalità consentirà agli sviluppatori di integrare una quantità maggiore del loro stato
in CSS, il che si spera in modi più chiari e semantici di orchestrare
interazione e stato.
Risorse
Personalizzazione di elementi selezionati
Prima del giorno <selectmenu>, il CSS non aveva la possibilità di personalizzare gli elementi <option>
con RTF o di modificare molto la visualizzazione di un elenco di opzioni.
Questo ha portato gli sviluppatori a caricare librerie esterne che ricreavano gran parte delle
funzionalità di un elemento <select>, il che si è rivelato molto impegnativo.
Dopo il giorno <selectmenu>, gli sviluppatori potranno fornire codice HTML avanzato per gli elementi delle opzioni e personalizzarli secondo le loro esigenze, pur rispettando i requisiti di accessibilità e fornendo HTML semantico.
Nell'esempio seguente, tratto dalla pagina esplicativa <selectmenu>, 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>
Il CSS può scegliere come target e definire lo stile delle 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 attivato. Aspetti da considerare nel 2023 e non solo per gli elementi
di menu selezionati personalizzabili.
Risorse
Ancorare un elemento a un altro
Prima del giorno anchor(), le strategie di posizione assoluta e relativa erano offerte agli sviluppatori per far spostare gli elementi secondari all'interno di un elemento principale.
Dopo il giorno anchor(), gli sviluppatori potranno posizionare elementi in altri elementi, a prescindere dal fatto che siano o meno secondari. Consente inoltre agli sviluppatori di specificare il bordo in base al quale posizionare
il posizionamento e altri aspetti utili per creare relazioni di posizione tra
gli elementi.
Se ti interessa saperne di più, nel video esplicativo troverai alcuni ottimi esempi di codice ed esempi di codice.