Al Google I/O ho condiviso notizie su come Baseline si è evoluta dopo il nostro annuncio all'I/O dell'anno scorso. Ho anche annunciato la dashboard della piattaforma web, le integrazioni con RUM Archive e l'integrazione con RUMvision. Questo post riunisce tutte le risorse della discussione in un unico posto.
La dashboard della piattaforma web è un nuovo ed entusiasmante modo per visualizzare l'intera piattaforma web e il percorso delle singole funzionalità verso l'interoperabilità e diventare parte di Baseline. Scopri di più nella pagina Annuncio della dashboard della piattaforma web.
L'integrazione di Baseline con gli strumenti che usi tutti i giorni è sempre stata parte integrante della vision di questo progetto. Vogliamo rendere la gestione della compatibilità con i browser al quale non devi dedicare molto tempo a pensare. Scopri di più sull'integrazione dell'archivio RUM e guarda questo spazio a breve per scoprire di più su altri fornitori di strumenti.
Non conosci la base di riferimento
Durante l'I/O ho condiviso 12 funzionalità della piattaforma web che sono diventate di recente parte di Baseline Newly Available. Queste funzionalità sono ora disponibili in Chrome, Edge, Firefox e Safari e vanno da piccole aggiunte che possono semplificare lo sviluppo ad alcune delle funzionalità più ricercate dagli sviluppatori, incluse le query container e :has().
Query container di dimensioni
Le query relative al contenitore per le dimensioni ti consentono di modificare il design in base alla larghezza o alle dimensioni in linea di un contenitore, anziché poter scegliere come target solo le dimensioni dell'area visibile con le query supporti. Ciò consente di avere più componenti riutilizzabili che possono modificarli autonomamente in base allo spazio disponibile quando vengono inseriti in un layout. È stata l'elenco delle funzionalità più ricercato quasi da quando esisteva il concetto di design reattivo.
- Novità disponibile a febbraio 2023.
- Ampiamente disponibile ad agosto 2025.
Scopri di più sulle query relative ai container su MDN nell'articolo Le query sui container arrivano in browser stabili e scopri in che modo altri team di sviluppo ne stanno traendo vantaggio negli case study sulle query container.
Selettore :has()
Il selettore :has() ci offre qualcosa che per molti anni è stata un'altra delle richieste principali degli sviluppatori: un selettore principale, un modo per selezionare un elemento in base ai contenuti al suo interno. Tuttavia, :has() può essere molto più di questo.
Come per le query sui container, ciò è incredibilmente utile quando si creano componenti riutilizzabili, in quanto consente di creare un singolo componente in grado di adattarsi a ciò che contiene.
- Novità disponibile a dicembre 2023.
- Ampiamente disponibile a giugno 2026.
Scopri di più su :has() su MDN, nel selettore Famiglia di :has() e nei :has() case study.
Griglia del layout della griglia CSS
La griglia consente a un layout di griglia nidificato di ereditare le tracce dal relativo elemento padre. Consente un migliore allineamento degli elementi all'interno di griglie nidificate.
- Novità disponibile a dicembre 2023.
- Ampiamente disponibile a giugno 2026.
Scopri di più sulla sottogriglia su MDN e nella sottogriglia CSS che rimanda a un gran numero di altre risorse.
Nidificazione CSS
Negli ultimi anni CSS si è ispirato alle funzionalità utilizzate dagli sviluppatori nei preprocessori come Sass. Ad esempio, le proprietà personalizzate CSS, spesso note come variabili CSS, sono una funzionalità ampiamente disponibile che consente di impostare variabili come i colori in un unico posto e di utilizzarle in tutto il CSS, una funzionalità precedentemente disponibile solo con un preprocessore.
Un'altra funzionalità dei pre-processori è la nidificazione. La nidificazione consente di evitare la ripetizione dei selettori e di favorire la leggibilità del codice CSS, in quanto gli elementi correlati possono essere raggruppati in modo più semplice.
- Novità di agosto 2023
- Ampia disponibilità a febbraio 2026
Scopri di più sulla nidificazione di CSS su MDN e sulla nidificazione di CSS.
L'elemento HTML <search>
La ricerca è una funzionalità presente su molti siti e applicazioni, ma fino a poco tempo fa non c'erano elementi di markup delle funzionalità utilizzate per la ricerca o i filtri su una pagina. L'elemento <search> è stato progettato
per questo scopo. È un elemento all'interno del quale puoi inserire un modulo
di ricerca o altri elementi utilizzati per filtrare i risultati.
- Novità a ottobre 2023
- Ampia disponibilità ad aprile 2026
Scopri di più sull'elemento <search> su MDN.
Video adattabile
Questa funzionalità fa riferimento alla possibilità di utilizzare l'elemento <source> all'interno di un
elemento <video> per pubblicare video di dimensioni appropriate su dispositivi diversi
nello stesso modo in cui si possono pubblicare immagini di dimensioni diverse.
- Novità disponibili a novembre 2023
- Ampia disponibilità a maggio 2026
Scopri di più su MDN in L'elemento multimediale o di origine immagine e in Come utilizzare i video adattabili.
Attributo inert
Quando un elemento è inerte, non è possibile interagirvi. Ad esempio, quando apri una finestra di dialogo, non è possibile fare clic o utilizzare schede per gli elementi che si trovano nella pagina dietro la finestra di dialogo. L'attributo inert ti consente di controllare l'inertezza in qualsiasi parte della UI.
Con l'attributo inert applicato a un elemento, gli eventi di clic non vengono attivati
se si fa clic sull'elemento, quest'ultimo non può diventare attivo e l'elemento e i relativi contenuti sono nascosti alle tecnologie per la disabilità in quanto vengono esclusi
dall'albero dell'accessibilità.
- Novità di aprile 2023
- Ampia disponibilità a ottobre 2025
Scopri di più sull'attributo inerte su MDN e anche in Attributo inerte.
La funzione color-mix()
La funzione color-mix() consente di mescolare un colore in un altro, in qualsiasi
spazio colore disponibile, e questo include tutti i nuovi modelli di colore (LCH, Lab,
OKLCH e OKLab), recentemente entrati a far parte di Baseline Newly Available.
- Novità di aprile 2023
- Ampia disponibilità a ottobre 2025
Scopri di più su color-mix() su MDN e in CSS color-mix().
È disponibile anche un'enorme guida ai colori CSS ad alta definizione
che illustra tutti i nuovi modelli di colore disponibili in CSS. Inoltre,
dai un'occhiata a gradient.style per sperimentare questi nuovi
colori e creare splendide sfumature.
:user-valid e :user-invalid
Le pseudo-classi :valid e :invalid sono ampiamente disponibili nei browser
e indicano se un elemento del modulo è attualmente valido in base a qualsiasi
regola di vincolo applicato oppure non è valido. Di conseguenza, se hai un campo con un tipo di indirizzo email che contiene un nome, la pseudo-classe :invalid lo seleziona e puoi aggiungere un colore o un'icona per dimostrare che deve essere corretto.
Il problema delle pseudo-classi :valid e :invalid è che vengono
applicate prima che l'utente abbia interagito con un modulo. Pertanto, se è richiesto un elemento del modulo e l'utente non lo ha ancora completato, verrà visualizzato uno stile non valido. In genere, vuoi mostrare stili non validi solo dopo che l'utente ha inserito qualcosa in modo errato o ha saltato un campo e l'ha lasciato vuoto.
Per migliorare l'esperienza utente in questa situazione, utilizza le pseudo-classi :user-valid e :user-invalid. Questi si comportano più o meno allo stesso modo,
con l'eccezione che corrispondono solo dopo che l'utente ha interagito con il campo. Pertanto, nell'esempio di un campo obbligatorio, l'utente deve aver selezionato lo stato a schede o aver fatto clic nel campo e poi essere uscito senza completarlo affinché il campo mostri lo stato non valido.
- Novità a ottobre 2023
- Ampia disponibilità ad aprile 2026
Scopri di più su :user-valid
e :user-invalid
su MDN.
Flussi di compressione
Molte applicazioni web devono fornire un download all'utente in un formato compresso, ad esempio un file ZIP. In passato, questo richiedeva all'applicazione di includere una libreria di compressione, un codice che aumentava le dimensioni dell'applicazione per tutti gli utenti. L'API Compression Streams offre un modo integrato per comprimere un flusso di dati.
- Novità di maggio 2023
- Ampia disponibilità a novembre 2025
Scopri di più sull'API Compression Streams su MDN e in I flussi di compressione sono ora supportati in tutti i browser.
Il DOM dichiarativo shadow
Il DOM dichiarativo Shadow è un nuovo modo per creare un albero delle ombre da HTML,
dove in precedenza potevi creare un albero delle ombre solo da JavaScript utilizzando
attachShadow(). La possibilità di eseguire questa operazione da HTML è particolarmente utile negli ambienti in cui JavaScript potrebbe non essere eseguito, come ad esempio un client di posta. È importante anche per i componenti web con rendering lato server.
- Novità disponibili a febbraio 2024
- Ampia disponibilità ad agosto 2026
Scopri di più sul DOM dichiarativo shadow.
L'API Popover
I popup vengono utilizzati per molte attività diverse nelle nostre applicazioni web. Ad esempio, menu, notifiche toast personalizzate e selettori di contenuti. Ora esiste un modo integrato per creare questi popup in modo decorativo con l'API Popover.
- Novità di aprile 2024
- Ampia disponibilità a ottobre 2026
Scopri di più sull'API Popover su MDN, sull'API Popover arriva in Baseline e nei case study di Popover.
Queste 12 funzionalità sono solo alcune delle funzionalità incluse in Baseline Newly Available. Puoi scoprire di più su questo sito. Scopri tutte le funzionalità che sono diventate parte di Baseline 2023 e la crescente raccolta di funzionalità che fanno parte di Baseline 2024.