news

Safari 26.5: le novità CSS e WebKit che cambiano il lavoro quotidiano

Safari 26.5 novità CSS WebKit: :open, random() element-scoped, Origin API e 63 bug fix. Verifica anchor positioning e scroll-driven animations.

Apple ha rilasciato Safari 26.5 per iOS 26.5, iPadOS 26.5, macOS Tahoe 26.5 e anche per Sequoia e Sonoma. Il WebKit Blog descrive questa come “la release di maggio più grande di WebKit”, con novità CSS e nuove Web Platform API e 63 bug fix distribuiti su aree che includono anchor positioning, scroll-driven animations, zoom rendering e WebRTC. Alcune delle correzioni possono alterare il comportamento di layout esistenti che si appoggiavano a bug precedenti, quindi vale la pena fare un giro di test prima di considerare la release ininfluente.

Novità CSS di Safari 26.5 e le nuove Web API

La pseudo-classe :open è probabilmente la novità più immediata per chi lavora con componenti interattivi. Si applica a <details>, <dialog>, <select> e <input> quando questi elementi sono nello stato aperto: il menu a tendina espanso, il dialog visibile, il date picker attivo. Finora per targettare lo stato aperto di un <select> si ricorreva a JavaScript o a workaround con :focus-within. Con :open il CSS diventa sufficiente per la maggior parte dei casi, e la progressione è senza rotture: i browser che non la supportano ignorano semplicemente la regola, l’elemento continua a funzionare normalmente.

La funzione random() introduce la keyword element-scoped, che circoscrive il valore casuale al singolo elemento invece di condividerlo globalmente. La sintassi accetta il nome e la keyword in entrambi gli ordini: random(--name element-scoped, 0, 100) oppure random(element-scoped --name, 0, 100). Un dettaglio che chi aveva già sperimentato random() nelle Technology Preview deve conoscere: la keyword element-shared è stata rimossa. Non è un alias di element-scoped, erano due comportamenti distinti; chi l’aveva usata deve aggiornare il codice prima di portare quegli stili in produzione con Safari 26.5.

Il supporto a color-interpolation="linearRGB" sui gradienti SVG (<linearGradient> e simili) cambia come WebKit interpola i colori lungo il gradiente: invece di usare lo spazio sRGB (il default, che produce transizioni percettivamente non uniformi), utilizza il RGB lineare. Il risultato è visibile soprattutto su gradienti che attraversano tonalità molto diverse. Non è un breaking change perché il valore deve essere esplicitamente impostato, ma può modificare l’aspetto di gradienti SVG esistenti se il valore era già presente nel markup.

ToggleEvent.source aggiunge alla gestione dei popover una proprietà che referenzia l’elemento che ha scatenato il toggle, tipicamente il pulsante invoker. Permette di coordinare il comportamento tra trigger e target senza dover conservare riferimenti manuali. L’Origin API introduce Origin.from(value) per costruire oggetti Origin da stringhe o oggetti nativi, e Origin.isSameSite(otherOrigin) per confronti same-site con gestione corretta delle origini opache (quelle la cui serializzazione è "null"). È un’API nuova che standardizza operazioni finora affidate a parsing manuale dell’URL.

63 bug fix: attenzione ad anchor positioning e scroll-driven animations

Il numero di fix è consistente: 43 nella sola area CSS, più 5 in SVG, 5 in WebRTC, 3 nell’editing, altri distribuiti tra networking, storage, media, accessibilità e Web Extensions. WebKit Team distingue le aree in modo abbastanza granulare nel blog post, il che aiuta a capire dove cercare se qualcosa smette di funzionare.

Le aree a rischio regressione sono anchor positioning (5 fix) e scroll-driven animations (4 fix). I fix correggono comportamenti sbagliati, ma chi aveva costruito layout che dipendevano da quel comportamento sbagliato vedrà un cambiamento. Per anchor positioning: sono stati corretti la rievaluazione delle media query durante il ridimensionamento della viewport, la risoluzione delle catene con tre o più elementi ancorati e l’uso di zero senza unità come valore di fallback per anchor(). Per le scroll-driven animations non sono stati dettagliati i fix singoli nel blog post, ma quattro correzioni in un’area così recente del CSS suggeriscono che il comportamento precedente era probabilmente divergente dalla spec in alcuni edge case.

I 5 fix per il layout block-in-inline e i 6 per zoom rendering riguardano scenari più circoscritti, ma possono emergere in layout complessi o app che usano lo zoom per l’accessibilità. Grid, flexbox, tables e multicolumn hanno ricevuto 4 fix complessivi.

Cosa controllare prima di procedere

Il breaking change più sottile è la rimozione di element-shared da random(). Se stai già usando random() con quella keyword in produzione o in un codebase che punta a Safari 26.5, il comportamento cambierà. La sostituzione non è automatica: element-scoped e element-shared non erano equivalenti, e il comportamento di fallback del browser senza la keyword è diverso da entrambi.

Per chi usa anchor positioning, vale un giro di test su Safari 26.5, soprattutto se il layout usa catene di elementi ancorati o si appoggia a fallback unitless zero. Le scroll-driven animations meritano lo stesso trattamento se erano state calibrate su versioni precedenti di Safari.

Safari si aggiorna automaticamente su iOS e iPadOS con l’aggiornamento del sistema operativo; su macOS l’aggiornamento avviene tramite le Impostazioni di sistema. Non c’è un modo per trattenere Safari su una versione precedente su dispositivi consumer. La Safari Technology Preview 242, rilasciata ad aprile, aveva già anticipato alcune direzioni di sviluppo di WebKit, anche se non le feature specifiche di questa release.

Il prossimo punto da seguire è come i principali browser si allineano sull’Origin API: al momento il supporto è ancora limitato e Safari 26.5 è una delle prime implementazioni in una release stabile.

Luca
Luca

Sviluppatore software, utente Apple dal 2012. Scrivo di news e strumenti per chi sviluppa su piattaforme Apple.

Chi sono →