Questa pagina è stata tradotta dall'API Cloud Translation.

Novità sulla piattaforma web ad agosto

Scopri alcune delle funzionalità interessanti introdotte nei browser web stabili e beta durante agosto 2022.

Rachel Andrew

Release stabili del browser

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 queste parti di una trasformazione.

In questo modo, Chrome si unisce a Firefox e Safari, che supportano già queste proprietà.

Supporto dei browser

Origine

Nuova sintassi delle query sui contenuti multimediali

Chrome 104 include anche la sintassi degli intervalli di query supporti. 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.
}

Supporto dei browser

Origine

Query sui contenitori

Chrome 105 è una release entusiasmante che porta alla piattaforma web la funzionalità tanto attesa delle query dei contenitori. Mentre le query supporti offrono un modo per eseguire query sulla dimensione dell'area visibile, le query container forniscono un metodo per eseguire query sulle dimensioni di un container.

Supporto dei browser

Origine

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 usare quel contenitore per applicare stili a uno dei relativi elementi 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 dei contenitori nel post @container e :has(): due nuove potenti API responsive in arrivo in Chromium 105.

La pseudo-classe principale :has()

Il post menzionato sopra menziona anche :has(). Questa nuova pseudo-classe, la pseudo-classe CSS :has(), consente di scegliere come target l'elemento principale e gli elementi di pari livello in base alle condizioni. Scopri di più in :has() il selettore della famiglia.

Supporto dei browser

Origine

API Sanitizer

In Chrome 105 è disponibile 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. Ciò corrisponde a un elemento in uno stato in cui esclude ogni interazione con elementi esterni. Ad esempio, un <dialog> aperto con l'API showModal().

Supporto dei browser

Origine

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.

Supporto dei browser

Origine

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 ottimo momento per testare nuove funzionalità, o rimozioni, che potrebbero avere un impatto sul tuo sito prima che il mondo venga rilasciato.

Poiché le date di uscita non si avvicinavano più al mese, ad agosto l'unica nuova versione beta è stata Firefox 105, per cui al momento non abbiamo informazioni dettagliate.

Anche la versione beta di Safari 16 menzionata a giugno è ancora in corso.

Componente della serie Novità sul web