Questa pagina è stata tradotta dall'API Cloud Translation.

Annullare le distanze

Semplificare le attività di creazione per il web.

Rachel Andrew

Quando parliamo con gli sviluppatori, singolarmente o tramite sondaggi come lo State of CSS, sentiamo sempre le stesse cose. Gli sviluppatori hanno difficoltà a creare siti web e applicazioni che funzionino bene su tutti i browser e a capire quando è possibile utilizzare nuove funzionalità interessanti in tutta sicurezza.

Spaziatura flexbox

Come esempio di proprietà problematica, la proprietà gap consente di creare spazi tra gli elementi grid o flex o le colonne in un contenitore multicol. Sebbene column-gap sia disponibile in multicol da molto tempo, la proprietà è stata visualizzata per la prima volta nel layout a griglia come grid-gap, insieme a grid-column-gap e grid-row-gap.

Poco dopo l'introduzione del layout a griglia nei browser, la proprietà è stata rinominata in gap, insieme a row-gap e column-gap. È stato poi specificato che funziona anche con il layout flessibile. La ridenominazione significa che non abbiamo più proprietà che svolgono la stessa azione.

.box {
  display: flex;
  gap: 1em;
}

Firefox ha rilasciato la proprietà per i layout flessibili a ottobre 2018. Non è stato visualizzato in Chrome fino a luglio 2020, seguito da Safari ad aprile 2021. Ciò significa che c'era un intervallo di due anni e sei mesi prima di poter usare in sicurezza gap. In realtà, per la maggior parte degli sviluppatori l'attesa è stata molto più lunga, a causa della necessità di supportare le versioni del browser precedenti all'ultima. Il supporto di gap nel layout flessibile è stato reso più problematico dal fatto che non è possibile utilizzare query di funzionalità per rilevare supporto degli spazi vuoti nel layout flessibile. Poiché la proprietà gap è supportata in griglia, @supports (gap:1em) restituirà true.

Un ulteriore problema è che quando una nuova funzionalità arriva in un browser, le persone iniziano a parlarne e condividere demo. Spesso questo inizia molto prima che la funzionalità sia disponibile in un browser stabile. Ciò può creare confusione per gli sviluppatori o, per lo meno, essere frustrante. Spesso si parla di nuove funzionalità, ma poi scopri che non puoi usarle a causa della mancanza di supporto.

Perché ci sono lacune nell'assistenza?

Questo non è un post che incolpa un browser per la sua lentezza. Osservando le diverse funzionalità della piattaforma, scoprirai che browser diversi prendono il comando su funzionalità diverse.

La maggior parte delle funzionalità verrà creata in un unico browser. Ad esempio, la specifica del layout a griglia è stata creata da Microsoft e implementata in una forma iniziale in Internet Explorer 10. Un ingegnere di Mozilla ha fatto un sacco di lavoro per capire come dovrebbe comportarsi la griglia secondaria, quindi questa funzionalità è stata implementata per la prima volta in Firefox. Safari sta assumendo il ruolo di leader in alcune nuove funzionalità di colore.

Sebbene un browser possa assumere il ruolo principale nella creazione di prototipi, i rappresentanti di tutti i browser (e di altre organizzazioni) del gruppo di lavoro CSS discutono delle funzionalità CSS. È molto importante che una funzionalità possa essere implementata in tutti i browser e che non sia progettata in modo da renderne impossibile l'implementazione in un browser. Ciò comporterebbe una lacuna permanente nell'assistenza e la mancata adozione della funzionalità.

Tuttavia, quando si tratta di implementare una funzionalità, è necessario stabilire la priorità insieme a tutte le altre possibili funzionalità per quel browser. Inoltre, a volte sono legate ad altre attività che devono essere svolte per migliorare il browser. Un ottimo esempio è il lavoro di RenderingNG in Chromium. Questo ha spianato la strada per l'implementazione della sottogriglia; tuttavia, l'ampio intervallo di tempo tra la disponibilità della sottogriglia in Firefox e in Chromium è dovuto alla necessità di implementare prima il layout della griglia nel nuovo motore di rendering.

I problemi

Abbiamo due problemi qui. Il primo è il problema di interoperabilità, ovvero il fatto che può trascorrere molto tempo dal momento in cui una funzionalità viene implementata in un browser a quando diventa disponibile ovunque.

Il secondo è un problema di messaggistica. Come possiamo chiarire dove ci sono lacune nell'assistenza? Come possiamo condividere nuove funzionalità senza che tutti debbano effettuare ricerche approfondite su ogni elemento per capire quanto sia supportato?

Interoperabilità

I browser stanno già collaborando per risolvere il problema di interoperabilità. Lo scorso anno, Compat 2021 ha contribuito a colmare il divario di supporto per una serie di funzionalità, inclusa la proprietà gap nel layout flessibile. Quest'anno l'impegno di Interop 2022 si concentra su 15 funzionalità e alcune di queste sono già state implementate.

Puoi seguire i progressi nella dashboard di Interop 2022.

Messaggistica

Il secondo problema è un argomento che mi piacerebbe affrontare quando parliamo di funzionalità su web.dev e su developer.chrome.com. Voglio che lo stato delle funzionalità sia molto chiaro quando leggi i nostri contenuti e che forniamo metodi pratici per risolvere i problemi di assistenza.

Abbiamo lanciato una serie di corsi fondamentali e ne lanceremo altri in futuro. Questi corsi ti aiutano a imparare a sviluppare per il web moderno utilizzando le tecnologie di base della piattaforma web. Check-out:

Stiamo lavorando per concentrare i nostri contenuti su questo sito su quegli elementi che puoi utilizzare in sicurezza. Non siamo ancora del tutto pronti, ma nei prossimi mesi dovresti iniziare a notare un cambiamento verso la pratica.

Contribuiamo inoltre alla documentazione del web aperto supportando il progetto Open Web Docs. In questo modo, abbiamo a disposizione una documentazione di prima classe su MDN, oltre a dati aggiornati sulla compatibilità dei browser. Dopodiché, utilizziamo questi dati su web.dev per mostrare il supporto delle funzionalità. Ecco il supporto attuale di gap nel layout flessibile.

Supporto dei browser

Se vuoi saperne di più sulla visione di Chrome per il web e sulle funzionalità che stiamo sperimentando nelle prove di Origin e per gli sviluppatori, troverai sempre più contenuti sul nostro sito gemello developer.chrome.com. I contenuti potrebbero essere sperimentali o supportati solo in Chrome al momento, ma ci farebbe piacere che tu li esamini e ci invii un feedback.

È davvero un momento entusiasmante per il web. Ci auguriamo di poterti aiutare a usufruire più rapidamente delle funzionalità chiave e di essere chiari sulle lacune esistenti, rendendo lo sviluppo web più divertente e meno frustrante.

Foto di Cristofer Maximilian.