Novità sulla piattaforma web a giugno

Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta a giugno 2026.

Rachel Andrew

Data di pubblicazione: 30 giugno 2026

Release stabili del browser

Chrome 149, Chrome 150 e Firefox 152 rilasciati nella versione stabile a giugno. Non è stata rilasciata alcuna versione stabile di Safari questo mese. Questo post esamina le nuove funzionalità in arrivo nei browser web.

Nota:i dati di compatibilità del browser estratti da MDN sono inclusi in questi post e potrebbero non essere ancora stati aggiornati per le versioni del browser più recenti. Il post mostrerà le informazioni corrette non appena verranno visualizzate nella release di browser-compat-data.

Il dimensionamento dei controlli del modulo con field-sizing diventa Baseline

Firefox 152 introduce il supporto della proprietà CSS field-sizing, rendendo disponibile la nuova dimensione automatica dei controlli dei moduli in tutti i principali motori dei browser.

La proprietà field-sizing consente ai controlli dei moduli come <textarea>, <input> e <select> di ridursi o aumentare dinamicamente per adattarsi ai contenuti (field-sizing: content) anziché rimanere fissi a una dimensione predefinita (field-sizing: fixed). In questo modo, non è più necessario ricorrere a soluzioni alternative JavaScript quando si creano input di testo o aree di testo che vengono ridimensionate durante la digitazione.

textarea {
  field-sizing: content;
}

Browser Support

• 123
• 123
• 152
• 26.2

Source

Le forme di base rect() e xywh() in shape-outside diventano Baseline

Con Chrome 149 che supporta le funzioni rect() e xywh() di forma nella proprietà shape-outside, queste forme di base sono ora Baseline e disponibili nei principali browser.

Le funzioni rect() e xywh() ti consentono di definire aree di esclusione rettangolari utilizzando le coordinate esatte dell'inset o la sintassi di origine e dimensioni. Offre una sintassi più semplice e leggibile rispetto all'utilizzo di polygon() per le forme di wrapping rettangolari.

Browser Support

• 149
• 149
• 149
• 17.2

Source

Scalabilità automatica dei caratteri con CSS text-fit

Chrome 150 introduce la proprietà CSS text-fit, che consente agli sviluppatori di scalare automaticamente le dimensioni dei caratteri in base alla larghezza di una casella contenitore.

.headline {
  text-fit: grow;
}

Decorazioni per spazi CSS

Chrome 149 introduce il supporto per le decorazioni dello spazio CSS nei layout a griglia e flexbox. Le decorazioni per gli spazi vuoti ti consentono di aggiungere linee e stili direttamente alla spaziatura tra gli elementi della griglia e flessibili, in modo simile a column-rule nei layout a più colonne.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Scopri di più in Gap decorations: Now in Chromium.

Browser Support

• 149
• 149
• x
• x

CSS background-clip: border-area

Chrome 150 aggiunge il supporto per background-clip: border-area da CSS Backgrounds Level 4.

Questo valore ritaglia gli sfondi degli elementi in modo specifico nell'area del bordo, consentendoti di creare bordi sfumati personalizzati, bordi decorativi e effetti di bordo animati senza richiedere elementi di wrapping o pseudo-elementi aggiuntivi.

Browser Support

• x
• x
• x
• 18.2

Promesse di scorrimento programmatiche

Chrome 150 aggiorna i metodi di scorrimento programmatico (scrollTo(), scrollBy() e scrollIntoView()) per restituire una promessa.

La promessa restituita viene risolta al termine dell'animazione di scorrimento fluido, fornendo un segnale affidabile per attivare le azioni di follow-up una volta terminato lo scorrimento.

Navigazione da tastiera dichiarativa con focusgroup

Chrome 150 introduce il supporto per l'attributo focusgroup.

L'attributo focusgroup consente agli sviluppatori di gestire in modo dichiarativo la navigazione con i tasti freccia nei controlli UI compositi (come barre degli strumenti, elenchi di schede e menu) senza scrivere manualmente listener di eventi della tastiera.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Scopri di più nella spiegazione del focus group.

WebSocket supportati nella cache back-forward (bfcache)

In Chrome 149, le pagine con connessioni WebSocket attive possono ora entrare nella cache back-forward (bfcache).

In precedenza, una connessione WebSocket aperta rendeva una pagina non idonea per la cache back-forward. Ora, il browser chiude automaticamente le connessioni WebSocket attive all'inserimento nella bfcache, consentendo di memorizzare nella cache la pagina e ripristinarla immediatamente quando viene visualizzata di nuovo.

Tempistica delle risposte intermedie e delle intestazioni in Resource Timing

Firefox 152 aggiunge il supporto per firstInterimResponseStart e finalResponseHeadersStart nell'interfaccia PerformanceResourceTiming.

Questi possono essere utilizzati per misurare rispettivamente il tempo necessario al browser per ricevere le risposte HTTP provvisorie e la risposta HTTP finale dopo l'invio di una richiesta.

Browser Support

• 115
• 115
• 152
• 26.4

Source

Pulsanti di azione per le notifiche

Firefox 152 aggiunge il supporto per i pulsanti di azione delle notifiche utilizzando la proprietà actions su Notification e le opzioni in ServiceWorkerRegistration.showNotification().

Ora puoi includere pulsanti di azione nelle notifiche del sistema operativo e ascoltare le interazioni degli utenti quando vengono toccati i pulsanti.

Browser Support

• 53
• 18
• 152
• x

Source

Versioni beta del browser

Le versioni beta del browser offrono un'anteprima delle funzionalità della prossima versione stabile del browser. È il momento ideale per testare nuove funzionalità o rimozioni che potrebbero influire sul tuo sito prima che il resto del mondo riceva l'aggiornamento. Le nuove versioni beta di questo mese sono Firefox 153 e Safari 27.

Firefox 153 beta introduce il supporto di Error.stackTraceLimit per configurare la profondità massima della traccia dello stack acquisita, IDBObjectStore.getAllRecords() e IDBIndex.getAllRecords() per recuperare i record indicizzati e RTCDtlsTransport.getRemoteCertificates() per l'ispezione della sicurezza WebRTC. Gli sviluppatori di componenti aggiuntivi ottengono anche una nuova API publicSuffix e un metodo userScripts.execute() per l'inserimento di script on demand.

La versione beta di Safari 27 introduce il posizionamento degli ancoraggi in base alla trasformazione, la pseudo-classe :heading per la corrispondenza degli elementi di intestazione, la parola chiave revert-rule per il rollback dei livelli a cascata, il supporto della parola chiave stretch nel dimensionamento delle caselle e i selettori composti :host:has().