Annullare le distanze

Semplificare la creazione per il web.

Rachel Andrew

Quando parliamo con gli sviluppatori, individualmente o tramite sondaggi come lo State of CSS, sentiamo ripetutamente le stesse cose. Gli sviluppatori hanno difficoltà a creare siti web e applicazioni che funzionino bene su tutti i browser e a sapere quando è sicuro utilizzare nuove funzionalità entusiasmanti.

Spazio Flexbox

Ad esempio, la proprietà gap consente di creare spazi tra gli elementi grid o flex o tra le colonne di un contenitore multicol. Sebbene column-gap sia disponibile da tempo in multicolonna, la proprietà è apparsa 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 gap, insieme a row-gap e column-gap. Successivamente è stato specificato che funzionasse anche nel layout flessibile. Il cambio di nome significa che non abbiamo più proprietà che fanno la stessa cosa.

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

Firefox ha rilasciato la proprietà per i layout flessibili nell'ottobre 2018. Non è stato visualizzato in Chrome fino a luglio 2020, seguito da Safari ad aprile 2021. Ciò significava che c'era un intervallo di due anni e sei mesi prima di poter utilizzare in sicurezza gap. In realtà, per la maggior parte degli sviluppatori l'attesa è stata molto più lunga, poiché era necessario supportare 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 sulle funzionalità per rilevare il supporto dello spazio nel layout flessibile. Poiché la proprietà gap è supportata nella 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 inizia molto prima che la funzionalità sia disponibile in un browser stabile. Questo può creare confusione o, quantomeno, frustrazione per gli sviluppatori. Spesso si parla ovunque di nuove funzionalità brillanti, ma poi si scopre di non poterle utilizzare a causa della mancanza di supporto.

Perché ci sono lacune nell'assistenza?

Questo post non punta il dito contro un browser per la sua lentezza. Se esamini le diverse funzionalità delle piattaforme, scoprirai che i vari browser sono all'avanguardia per funzionalità diverse.

La maggior parte delle funzionalità verrà prototipata in un browser. Ad esempio, la specifica del layout a griglia è stata creata inizialmente da Microsoft e implementata in una forma iniziale in Internet Explorer 10. Un ingegnere di Mozilla ha lavorato molto per capire come si sarebbe dovuto comportare subgrid, quindi questa funzionalità è stata implementata per prima in Firefox. Safari è in prima linea per quanto riguarda alcune nuove ed entusiasmanti funzioni di colore.

Mentre un browser può assumere il ruolo di leader nella prototipazione, 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 una mancata adozione della funzionalità.

Tuttavia, quando si tratta di implementare una funzionalità, è necessario dare la priorità a questa funzionalità rispetto a tutte le altre possibili per quel browser. A volte, le cose vengono ritardate da altri lavori che devono essere eseguiti per migliorare il browser. Un ottimo esempio è il lavoro di RenderingNG in Chromium. Ciò ha aperto la strada all'implementazione della sottogriglia; tuttavia, il lungo intervallo di tempo tra la spedizione della sottogriglia di Firefox e Chromium è dovuto alla necessità di reimplementare prima il layout a griglia nel nuovo motore di rendering.

I problemi

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

Il secondo è un problema di messaggistica. Come possiamo rendere chiaro dove si trovano le lacune nell'assistenza? Come condividiamo le nuove funzionalità senza costringere tutti a fare ricerche approfondite su ogni aspetto per capire quanto è supportato?

Interoperabilità

I browser stanno già collaborando per risolvere il problema di interoperabilità. L'anno scorso Compat 2021 ha contribuito a colmare il divario di supporto per una serie di funzionalità, tra cui la proprietà gap nel layout flessibile. Quest'anno, l'iniziativa 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 è qualcosa che mi sta a cuore e che voglio affrontare quando parliamo di funzionalità qui 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 modi pratici per risolvere i problemi di assistenza.

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

Stiamo lavorando per concentrare i contenuti di questo sito su ciò che puoi utilizzare in sicurezza. Non ci siamo ancora, ma nei prossimi mesi inizierai a notare un cambiamento verso un approccio più pratico.

Inoltre, contribuiamo alla documentazione del web aperto supportando il progetto Open Web Docs. In questo modo, disponiamo di una documentazione di prima classe su MDN, oltre a dati di compatibilità del browser aggiornati. Utilizziamo poi questi dati su web.dev per mostrare il supporto delle funzionalità. Ecco il supporto attuale di gap nel layout flessibile.

Browser Support

Se vuoi saperne di più sulla visione di Chrome per il web e sulle sperimentazioni che stiamo conducendo nelle prove di origine e per 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 ti invitiamo a esplorarli e a fornire un feedback.

È davvero un momento entusiasmante per il web. Ci auguriamo di poterti fornire più rapidamente le funzionalità chiave e di essere chiari in merito alle lacune esistenti, rendendo lo sviluppo web più divertente e meno frustrante.

Foto di Cristofer Maximilian.