Annullare le distanze

Semplificare la creazione per il web.

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. Anche se column-gap è 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 è stata visualizzata in Chrome fino a luglio 2020, seguita da Safari ad aprile 2021. Ciò significa che c'è stato un intervallo di due anni e sei mesi prima che potessimo utilizzare gap in sicurezza. 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 possiamo utilizzare le query sui componenti per rilevare il supporto delle spaziature nel layout flessibile. Poiché la proprietà gap è supportata in griglia, @supports (gap:1em) restituirà true.

Un altro problema è che quando una nuova funzionalità viene implementata in un browser, le persone iniziano a parlarne e a 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. Se esamini le funzionalità delle varie piattaforme, scoprirai che browser diversi sono leader in funzionalità diverse.

La maggior parte delle funzionalità verrà creata in un unico browser. Ad esempio, la specifica del layout della griglia è stata creata per la prima volta 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. A volte, il rilascio di una funzionalità è in attesa di altri lavori da svolgere 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. 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 l'avanzamento 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 ti fornisca 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:

Ci stiamo adoperando per concentrare i contenuti di questo sito su ciò che puoi utilizzare in tutta 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. Utilizziamo poi questi dati qui su web.dev per mostrare il supporto delle funzionalità. Ecco l'attuale supporto di gap nel layout flessibile.

Supporto dei browser

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

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.