Semplificare la creazione per il web.
Quando parliamo con gli sviluppatori, individualmente o tramite sondaggi come lo stato del CSS, sentiamo ripetutamente le stesse cose. Gli sviluppatori hanno difficoltà a creare siti web e applicazioni che funzionino bene su tutti i browser e hanno difficoltà a sapere quando le nuove ed entusiasmanti funzionalità sono sicure da usare.
Intervallo Flexbox
Ad esempio, la proprietà gap consente di separare gli elementi griglia o flessibili oppure le colonne di un contenitore multicol. Anche se abbiamo column-gap in multicol da molto tempo, la proprietà è apparsa per la prima volta nel layout a griglia come grid-gap, insieme a grid-column-gap e grid-row-gap.
Subito dopo che il layout a griglia è arrivato nei browser, la proprietà è stata rinominata gap, insieme a row-gap e column-gap. Successivamente è stato specificato che funziona anche nel layout flessibile. Questa rinominazione significa che non disponiamo di più proprietà che fanno la stessa cosa.
.box {
display: flex;
gap: 1em;
}
Firefox ha distribuito la proprietà per i layout flessibili a ottobre 2018. Non è apparso 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 usare in sicurezza gap. In realtà, per la maggior parte degli sviluppatori l'attesa è stata molto più lunga, data la necessità di supportare versioni del browser precedenti alla più recente. Il supporto di gap nel layout flessibile è stato reso più problematico dal fatto che non è possibile utilizzare le query sulle funzionalità per rilevare il supporto dei gap nel layout flessibile. Poiché la proprietà gap è supportata nella griglia, @supports (gap:1em) restituirà true.
Un ulteriore problema è che quando una nuova funzionalità arriva in un browser, le persone iniziano a parlarne e a condividere le demo. Questo spesso inizia molto prima che la funzionalità sia presente in qualsiasi browser stabile. Questo può essere fonte di confusione per gli sviluppatori o quanto meno frustrante. Ripetutamente, si parla ovunque di nuove e straordinarie funzionalità, dopodiché scopri che non puoi effettivamente utilizzarle per mancanza di supporto.
Perché ci sono lacune nell'assistenza?
Questo non è un post che punta il dito contro un browser perché è lento. Osservando le diverse funzionalità della piattaforma, scoprirai che i vari browser prendono l'iniziativa in diverse funzionalità.
La maggior parte delle funzionalità verrà prototipata in un solo browser. Ad esempio, la specifica del layout a griglia è stata inizialmente creata da Microsoft e implementata nella sua forma iniziale in Internet Explorer 10. Un ingegnere di Mozilla ha lavorato molto per capire come si comportava la subgrid, pertanto questa funzionalità è arrivata prima in Firefox. Abbiamo visto Safari prendere il comando di alcune nuove ed entusiasmanti funzioni di colore.
Sebbene un browser possa assumere la guida della prototipazione, i rappresentanti di tutti i browser (e di altre organizzazioni) del CSS Working Group discutono delle funzionalità CSS. È molto importante che una funzionalità possa essere implementata in tutti i browser e che non sia progettata in modo da impedirne l'implementazione in un solo browser. Ciò porterebbe a una mancanza permanente di supporto e alla mancata adozione della funzionalità.
Tuttavia, quando si tratta di implementare una funzionalità, questa deve avere la priorità rispetto a tutte le altre funzionalità possibili per quel browser. Inoltre, a volte ciò accade dietro altre operazioni da eseguire per migliorare il browser. Un ottimo esempio è il lavoro RenderingNG in Chromium. Questo ha spianato la strada all'implementazione della sottogriglia. Tuttavia, il lungo divario tra la sottogriglia di spedizione di Firefox e Chromium è dovuto alla necessità di reimplementare prima il layout a griglia nel nuovo motore di rendering.
I problemi
Abbiamo due problemi. Il primo è il problema dell'interoperabilità, il fatto che può richiedere molto tempo dal momento in cui una funzionalità arriva in un browser a quando è disponibile ovunque.
Il secondo è il problema dei messaggi. Come possiamo chiarire quali sono le lacune nell'assistenza? Come condividiamo le nuove funzionalità senza costringere tutti a effettuare ricerche approfondite per capire se sono supportate?
Interoperabilità
I browser stanno già lavorando insieme per risolvere il problema di interoperabilità. L'anno scorso Compat 2021 ha contribuito a colmare il divario in termini di supporto per una serie di funzionalità, tra cui la proprietà mancante nel layout flessibile. Quest'anno l'iniziativa Interop 2022 si è concentrata su 15 funzionalità, di cui si è già mossa l'altra.
Puoi seguire i progressi nella dashboard di Interop 2022.
Messaggi
Il secondo problema è un aspetto che vorrei risolvere quando parliamo delle funzionalità qui su web.dev e su developer.chrome.com. Voglio che lo stato delle funzionalità sia molto chiaro quando leggete i nostri contenuti e che possiamo fornire dei metodi pratici per gestire i problemi di assistenza.
Abbiamo avviato una serie di corsi fondamentali e ne saranno aggiunti altri in futuro. Questi corsi ti aiutano a imparare a creare soluzioni per il web moderno, utilizzando le tecnologie di base delle piattaforme web. Check-out:
Stiamo lavorando per concentrare i nostri contenuti di questo sito su aspetti che puoi utilizzare in sicurezza. Non siamo ancora del tutto; tuttavia, nei prossimi mesi dovresti notare un leggero cambiamento verso l'approccio pratico.
Inoltre, contribuiamo ad aprire la documentazione sul web supportando il progetto Open Web Docs. Ciò garantisce di disporre di una documentazione di prima qualità su MDN, oltre a dati sulla compatibilità del browser aggiornati. Utilizziamo questi dati qui su web.dev per mostrare il supporto delle funzionalità. Ecco il supporto attuale di gap nel layout flessibile.
Supporto dei browser
- 84
- 84
- 63
- 14.1
Se vuoi saperne di più sulla vision di Chrome per il web, sugli argomenti che stiamo sperimentando nelle prove di Origin e per gli sviluppatori, troverai sempre più questi contenuti sul nostro sito associato, developer.chrome.com. I contenuti potrebbero essere sperimentali o supportati solo in Chrome al momento, ma ci piacerebbe che esplorassi e offrissi il tuo feedback.
È davvero un momento entusiasmante per il web in questo momento. Ci auguriamo di poterti aiutare a fornire più rapidamente le funzionalità principali e di chiarire le lacune esistenti, rendendo lo sviluppo web più divertente e meno frustrante.
Foto di Cristofer Maximilian.