Scopri alcune delle interessanti funzionalità disponibili nei browser web stabili e beta ad agosto 2022.
Release del browser stabile
Ad agosto, Firefox 104, Chrome 104 e Chrome 105 sono diventati stabili.
Trasformazioni individuali
Chrome 104 include singole proprietà per le trasformazioni CSS. Le proprietà sono scale, rotate e translate, che puoi utilizzare per definire singolarmente le parti di una trasformazione.
In questo modo, Chrome si unirà a Firefox e Safari che già supportano queste proprietà.
Nuova sintassi delle query supporti
Chrome 104 include anche la sintassi dell'intervallo di query supporti. Questa soluzione è già stata fornita da Firefox e consente di semplificare le query sui contenuti multimediali. Ad esempio, la seguente query multimediale:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Può essere scritto utilizzando un operatore di confronto:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Query container
Chrome 105 è una release entusiasmante che introduce la funzionalità tanto attesa delle query dei container sulla piattaforma web. Mentre le query supporti offrono un modo per eseguire query sulle dimensioni dell'area visibile, le query relative al contenitore forniscono un metodo per eseguire query sulle dimensioni di un contenitore.
Per utilizzare le query container, attiva il contenimento utilizzando la proprietà container-type.
.card-container {
container-type: inline-size;
}
L'impostazione di container-type su inline-size esegue una query sulla dimensione delle indicazioni in linea dell'elemento principale. Nelle lingue latine come l'inglese, questa sarebbe la larghezza della scheda, dato che il testo è in linea da sinistra a destra.
Ora possiamo utilizzare quel container per applicare stili a tutti i suoi asset secondari utilizzando @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Puoi scoprire di più sulle query relative ai container nel post @container and :has(): due nuove potenti API adattabili che arrivano in Chromium 105.
La pseudo-classe padre :has()
Il post sopra menzionato menziona anche :has(). La nuova pseudo-classe CSS :has() ti offre un modo per scegliere come target l'elemento principale e gli elementi di pari livello in base alle condizioni. Per saperne di più, consulta il selettore famiglia:has().
API Sanitizer
In Chrome 105 c'è anche l'API Sanitizer. Questa API integra la sanitizzazione nella piattaforma per contribuire a rimuovere le vulnerabilità cross-site scripting (XSS).
Sempre in Chrome 105 è presente la pseudo-classe CSS :modal. Corrisponde a un elemento in uno stato in cui esclude tutte le interazioni con gli elementi esterni. Ad esempio, un elemento <dialog> aperto con l'API showModal().
I metodi FindLast() e findLastIndex()
Firefox 104 aggiunge il supporto dietro un flag per i metodi Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() e TypedArray.prototype.findLastIndex(). Questi vengono usati per trovare rispettivamente il valore e l'indice dell'ultimo elemento di un array o di Typed che corrisponde a una funzione fornita.
Release del browser beta
Le versioni beta del browser offrono un'anteprima degli elementi che saranno disponibili nella versione stabile successiva del browser. È un ottimo momento per testare le nuove funzionalità, o le rimozioni, che potrebbero avere un impatto sul tuo sito prima dell'uscita ufficiale.
A causa di date di rilascio che non rientrano nel mese, l'unica nuova versione beta di agosto era Firefox 105, che al momento presenta pochi dettagli.
Anche la versione beta di Safari 16 menzionata a giugno è ancora in corso.
Parte della Nuova serie web