Scopri alcune delle funzionalità interessanti introdotte nei browser web stabili e beta durante agosto 2022.
Release stabili del browser
Ad agosto, Firefox 104, Chrome 104 e Chrome 105 sono diventati stabili.
Trasformazioni individuali
Chrome 104 include proprietà individuali per le trasformazioni CSS. Le proprietà sono scale
, rotate
e translate
, che puoi utilizzare per definire singolarmente queste parti di una trasformazione.
In questo modo, Chrome si unisce a Firefox e Safari, che supportano già queste proprietà.
Nuova sintassi delle query sui contenuti multimediali
Chrome 104 include anche la sintassi dell'intervallo di query sui contenuti multimediali. Questa funzionalità è già stata implementata in Firefox e contribuisce a semplificare le query sui contenuti multimediali. Ad esempio, la seguente query sui contenuti multimediali:
@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 sui contenitori
Chrome 105 è una release entusiasmante che porta alla piattaforma web la funzionalità tanto attesa delle query dei contenitori. Mentre le query sui media ti consentono di eseguire query in base alle dimensioni dell'area visibile, le query dei contenitori forniscono un metodo per eseguire query in base alle dimensioni di un contenitore.
Per utilizzare le query dei contenitori, 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 della direzione in linea del contenitore principale. Nelle lingue latine come l'inglese, si tratta della larghezza della scheda, poiché il testo scorre in linea da sinistra a destra.
Ora possiamo utilizzare questo contenitore per applicare stili a qualsiasi elemento secondario 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 dei contenitori nel post @container e :has(): due nuove potenti API responsive in arrivo in Chromium 105.
L'pseudo-classe principale :has()
Il post menzionato sopra menziona anche :has()
. Questa nuova pseudo-classe CSS :has() consente di scegliere come target l'elemento principale e gli elementi associati in base a delle condizioni. Scopri di più nella sezione :has() il selettore di famiglia.
API Sanitizer
In Chrome 105 è presente anche l'API Sanitizer. Questa API integra la sanificazione nella piattaforma per contribuire a rimuovere le vulnerabilità di cross-site scripting.
In Chrome 105 è presente anche la pseudo-classe CSS :modal. Corrisponde a un elemento in uno stato in cui esclude qualsiasi interazione con gli elementi esterni. Ad esempio, un <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 utilizzati per trovare il valore e l'indice (rispettivamente) dell'ultimo elemento in un Array o TypedArray che corrisponde a una funzione di test fornita.
Release beta del browser
Le versioni beta del browser ti offrono un'anteprima delle funzionalità che saranno disponibili nella prossima versione stabile del browser. È un'ottima occasione per testare nuove funzionalità o rimozioni che potrebbero influire sul tuo sito prima che la release venga resa disponibile a livello mondiale.
Poiché le date di rilascio non rientrano nel mese, l'unica nuova versione beta di agosto è stata Firefox 105, di cui al momento non sono disponibili molti dettagli.
Anche la versione beta di Safari 16 menzionata a giugno è ancora in corso.
Componente della serie Novità sul web