Una guida al supporto CSS nei browser

Non vivremo mai in un mondo in cui tutti coloro che visualizzano i nostri siti hanno un browser e una versione del browser identici, così come non vivremo mai in un mondo in cui tutti hanno lo schermo e la risoluzione delle stesse dimensioni. Ciò significa che gestire vecchi browser o browser che non supportano qualcosa che vogliamo utilizzare fa parte del lavoro di uno sviluppatore web. Detto questo, le cose vanno molto meglio ora che in passato e in questo articolo darò un'occhiata ai diversi tipi di problemi di supporto del browser che potremmo incontrare. Ti mostrerò alcuni modi per affrontarli e guarderò anche le cose che potrebbero arrivare presto che possono aiutarti.

Perché abbiamo queste differenze?

Anche in un mondo in cui la maggior parte dei browser è basata su Chromium, questi browser non eseguono tutti la stessa versione di Chromium di Google Chrome. Ciò significa che un browser basato su Chromium come Vivaldi potrebbe essere alcune versioni dietro a Google Chrome.

E, naturalmente, gli utenti non aggiornano sempre rapidamente i propri browser, sebbene la situazione sia migliorata negli ultimi anni con la maggior parte dei browser che si aggiornano silenziosamente.

C'è anche il modo in cui le nuove funzionalità entrano nei browser in primo luogo. Non è un caso che le nuove funzionalità per CSS siano progettate dal CSS Working Group e una specifica completa tramandata ai fornitori di browser con un'istruzione per implementarla. Molto spesso è solo quando si verifica un'implementazione sperimentale che tutti i dettagli più fini della specifica possono essere elaborati. Pertanto, lo sviluppo delle funzionalità è un processo iterativo e richiede che i browser implementino queste specifiche durante lo sviluppo. Sebbene l'implementazione al giorno d'oggi avvenga più spesso dietro un flag nel browser o disponibile solo in una versione Nightly o in anteprima, una volta che un browser ha una funzionalità completa, è probabile che lo attivi per tutti anche se nessun altro browser ha ancora il supporto.

Tutto ciò significa che, per quanto ci possa piacere, non esisteremo mai in un mondo in cui le funzionalità sono magicamente disponibili su ogni desktop e telefono contemporaneamente. Se sei uno sviluppatore web professionista, il tuo compito è occuparti di questo fatto.

Bug contro mancanza di supporto

Ci sono tre problemi che dobbiamo affrontare per quanto riguarda il supporto del browser:

1. Nessun supporto di una funzione
   Il primo problema (e più facile da affrontare) è quando un browser non supporta affatto la funzione.
2. Gestire i "bug" del browser
   Il secondo è quando il browser afferma di supportare la funzionalità, ma lo fa in un modo diverso dal modo in cui altri browser supportano la funzionalità. Un tale problema è ciò che tendiamo a chiamare "bug del browser" perché il risultato finale è un comportamento incoerente.
3. Supporto parziale delle proprietà CSS
   Questo sta diventando più comune; una situazione in cui un browser supporta una funzionalità, ma solo in un contesto.

È utile capire con cosa hai a che fare quando vedi una differenza tra i browser, quindi diamo un'occhiata a ciascuno di questi problemi a turno.

1. Nessun supporto di una funzione

Se utilizzi una proprietà o un valore CSS che un browser non comprende, il browser lo ignorerà. Questo è lo stesso sia che tu utilizzi una funzionalità che non è supportata, sia che crei una funzionalità e provi a usarla. Se il browser non comprende quella riga di CSS, la salta semplicemente e passa alla prossima cosa che capisce.

Questo principio di progettazione dei CSS significa che puoi usare allegramente le nuove funzionalità, sapendo che non accadrà nulla di male a un browser che non ha supporto. Per alcuni CSS, usati esclusivamente come miglioramento, questo è tutto ciò che devi fare. Usa la funzione, assicurati che quando quella funzione non è disponibile l'esperienza sia ancora buona, e il gioco è fatto. Questo approccio è l'idea di base alla base del miglioramento progressivo, utilizzando questa caratteristica della piattaforma che consente l'uso sicuro di cose nuove nei browser che non le capiscono.

Se vuoi verificare se una funzione che stai utilizzando è supportata dai browser, puoi guardare il sito Web Can I Use. Un altro buon posto per cercare informazioni di supporto dettagliate è la pagina per ciascuna proprietà CSS su MDN. I dati di supporto del browser tendono ad essere molto dettagliati.

Nuovo CSS Comprende il vecchio CSS

Man mano che vengono sviluppate nuove funzionalità CSS, viene prestata attenzione a come interagiscono con i CSS esistenti. Ad esempio, nella specifica Grid e Flexbox, è dettagliato in termini di come display: grid e display: flex gestiscono scenari come quando un elemento flottante diventa un elemento della griglia o un contenitore multicol viene trasformato in una griglia. Ciò significa che alcuni comportamenti vengono ignorati, aiutandoti a sovrascrivere semplicemente il CSS per il browser non supportato. Queste sostituzioni sono descritte in dettaglio nella pagina Miglioramento progressivo e Layout griglia su MDN.

Rilevamento del supporto con query di funzionalità

Il metodo sopra funziona solo se il CSS che devi usare non ha bisogno di altre proprietà per accompagnarlo. Potrebbe essere necessario aggiungere ulteriori proprietà al tuo CSS per i browser meno recenti che verrebbero quindi interpretati anche dai browser che supportano anche la funzione.

Un buon esempio di ciò può essere trovato quando si utilizza Grid Layout. Mentre un elemento mobile che diventa un elemento della griglia perde tutto il comportamento float, è probabile che se stai cercando di creare un fallback per un layout griglia con float, avrai aggiunto larghezze percentuali e possibilmente margini agli elementi.

 .grid > .item { width: 23%; margin: 0 1%; } 

Queste larghezze e margini si applicheranno ancora quando l'elemento mobile è un elemento della griglia. La larghezza diventa una percentuale della traccia della griglia anziché l'intera larghezza del contenitore; verrà quindi applicato qualsiasi margine e uno spazio che potresti aver specificato.

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

Per fortuna, c'è una funzionalità integrata nei CSS e implementata nei browser moderni che ci aiuta ad affrontare questa situazione. Le Feature Query ci consentono di chiedere direttamente al browser cosa supportano e quindi agire in base alla risposta. Proprio come una query multimediale, che verifica alcune proprietà del dispositivo o dello schermo, le query di funzionalità verificano il supporto di una proprietà e un valore CSS.

Prova per il supporto

Il test del supporto è il caso più semplice, utilizziamo @supports e quindi testiamo una proprietà e un valore CSS. Il contenuto all'interno della Feature Query verrà eseguito solo se il browser risponde con true, ovvero supporta la funzionalità.

Prova senza supporto

Puoi chiedere al browser se non supporta una funzione. In questo caso, il codice all'interno della Feature Query verrà eseguito solo se il browser indica che non ha supporto.

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

Prova per più cose

Se hai bisogno di più di una proprietà da supportare, usa and .

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

Se hai bisogno del supporto di una proprietà o di un'altra, usa or .

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

Scegliere una proprietà e un valore da testare

Non è necessario testare ogni proprietà che si desidera utilizzare, solo qualcosa che indicherebbe il supporto per le funzionalità che si prevede di utilizzare. Pertanto, se si desidera utilizzare Grid Layout, è possibile verificare la display: grid . In futuro (e una volta che il supporto della sottogriglia arriva nei browser), potrebbe essere necessario essere più specifici e testare la funzionalità della sottogriglia. In tal caso, dovresti testare grid-template-columns: subgrid per ottenere una risposta vera solo da quei browser che hanno implementato il supporto della sottogriglia.

Se ora torniamo al nostro esempio di fallback mobile, possiamo vedere come le query sulle funzionalità lo risolveranno per noi. Quello che dobbiamo fare è interrogare il browser per scoprire se supporta il layout della griglia. In tal caso, possiamo riportare la larghezza dell'elemento su auto e il margine su 0 .

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

Vedere le query e la griglia sulle funzionalità della penna di (Rachel Andrew) su CodePen.

Nota che mentre ho incluso tutto il codice della griglia all'interno della mia query di funzionalità, non è necessario. Se un browser non comprendesse le proprietà della griglia, le ignorerebbe in modo che possano essere tranquillamente al di fuori della query della funzionalità. Le cose che devono trovarsi all'interno di una query di funzionalità in questo esempio sono le proprietà margin e width, poiché sono necessarie per il vecchio codice del browser ma verrebbero applicate anche supportando i browser.

Abbraccia la cascata

Un modo molto semplice per offrire dei fallback è utilizzare il fatto che i browser ignorano i CSS che non capiscono e il fatto che dove tutto il resto ha la stessa specificità, l'ordine di origine viene preso in considerazione in base al quale CSS viene applicato a un elemento .

Per prima cosa scrivi il tuo CSS per i browser che non supportano la funzione. Quindi verifica il supporto della proprietà che desideri utilizzare, se il browser conferma che ha il supporto, sovrascrivi il codice di fallback con il tuo nuovo codice.

Questa è più o meno la stessa procedura che potresti utilizzare quando usi le query multimediali per il design reattivo, seguendo un approccio mobile-first. In questo approccio, inizi con il layout per schermi più piccoli, quindi aggiungi o sovrascrivi elementi per quelli più grandi mentre sali attraverso i punti di interruzione.

Posso utilizzare le query sulle funzionalità CSS? Dati sul supporto per le query di funzionalità CSS nei principali browser da caniuse.com.

Il modo di lavorare sopra significa che non devi preoccuparti dei browser che non supportano le query di funzionalità. Come puoi vedere da Posso usare , le query di funzionalità hanno un supporto davvero eccezionale. I browser straordinari che non li supportano sono qualsiasi versione di Internet Explorer.

È probabile, tuttavia, che anche la nuova funzionalità che desideri utilizzare non sia supportata in IE. Quindi, al momento, inizi quasi sempre scrivendo CSS per browser senza supporto, quindi esegui il test con una Feature Query. Questa query di funzionalità dovrebbe verificare il supporto.

1. I browser che supportano le query di funzionalità restituiranno true se dispongono del supporto e quindi verrà utilizzato il codice all'interno della query, sovrascrivendo il codice per i browser meno recenti.
2. Se il browser supporta le query delle funzionalità ma non la funzionalità in fase di test, verrà restituito false. Il codice all'interno della query della funzionalità verrà ignorato.
3. Se il browser non supporta le query di funzionalità, tutto ciò che si trova all'interno del blocco di query di funzionalità verrà ignorato, il che significa che un browser come IE11 utilizzerà il vecchio codice del browser, che molto probabilmente è esattamente quello che desideri!

2. Gestire i "bug" del browser

Il secondo problema di supporto del browser sta fortunatamente diventando meno comune. Se leggi "What We Wished For" (pubblicato alla fine dello scorso anno), puoi fare un piccolo tour in alcuni dei più sconcertanti bug del browser del passato. Detto questo, qualsiasi software è soggetto a bug, i browser non fanno eccezione. E, se aggiungiamo a ciò il fatto che, a causa della natura circolare dell'implementazione delle specifiche, a volte un browser ha implementato qualcosa e quindi le specifiche sono cambiate, quindi ora è necessario emettere un aggiornamento. Fino alla spedizione dell'aggiornamento, potremmo trovarci in una situazione in cui i browser fanno qualcosa di diverso l'uno dall'altro.

Le query sulle funzionalità non possono aiutarci se il browser segnala il supporto di qualcosa che lo supporta male. Non esiste una modalità in base alla quale il browser può dire " Sì, ma probabilmente non ti piacerà ". Quando si presenta un vero bug di interoperabilità, è in queste situazioni che potrebbe essere necessario essere un po' più creativi.

Se pensi di vedere un bug, la prima cosa da fare è confermarlo. A volte, quando pensiamo di vedere comportamenti buggy e browser che fanno cose diverse, la colpa è nostra. Forse abbiamo utilizzato una sintassi non valida o stiamo cercando di applicare uno stile HTML non corretto. In questi casi, il browser proverà a fare qualcosa; tuttavia, poiché non stai utilizzando le lingue come sono state progettate, ogni browser potrebbe farcela in modo diverso. Un rapido controllo che HTML e CSS siano validi è un ottimo primo passo.

A quel punto, probabilmente farei una rapida ricerca e vedrei se il mio problema era già ampiamente compreso. Ci sono alcuni repository di problemi noti, ad esempio Flexbugs e Gridbugs. Tuttavia, anche solo poche parole chiave ben scelte possono far apparire post o articoli di Stack Overflow che trattano l'argomento e potrebbero offrirti una soluzione alternativa.

Ma diciamo che non sai davvero cosa sta causando il bug, il che rende piuttosto difficile cercare una soluzione. Quindi, il passaggio successivo consiste nel creare un test case ridotto del tuo problema, ovvero eliminando qualsiasi cosa irrilevante per aiutarti a identificare esattamente ciò che attiva il bug. Se pensi di avere un bug CSS, puoi rimuovere qualsiasi JavaScript o ricreare lo stesso stile al di fuori di un framework? Uso spesso CodePen per mettere insieme un test case ridotto di qualcosa che sto vedendo; questo ha l'ulteriore vantaggio di darmi il codice in un modo che posso facilmente condividere con qualcun altro se ho bisogno di chiederlo.

Il più delle volte, una volta isolato il problema, è possibile escogitare un modo alternativo per ottenere il risultato desiderato. Scoprirai che qualcun altro ha escogitato una soluzione astuta, oppure puoi postare da qualche parte per chiedere suggerimenti.

Detto questo, se pensi di avere un bug del browser e non riesci a trovare nessun altro che parli dello stesso problema, è possibile che tu abbia trovato qualcosa di nuovo che dovrebbe essere segnalato. Con tutti i nuovi CSS che sono arrivati ​​di recente, a volte possono verificarsi problemi quando le persone iniziano a usare le cose in combinazione con altre parti di CSS.

Dai un'occhiata a questo post di Lea Verou sulla segnalazione di tali problemi, "Aiuta la community! Segnala bug del browser!”. L'articolo contiene anche ottimi suggerimenti per creare un test case ridotto.

3. Supporto parziale delle proprietà CSS

Il terzo tipo di problema è diventato più comune a causa del modo in cui sono progettate le moderne specifiche CSS. Se pensiamo a Grid Layout e Flexbox, queste specifiche utilizzano entrambe le proprietà e i valori in Box Alignment Level 3, per eseguire l'allineamento. Pertanto, proprietà come align-items , justify-content e column-gap sono specificate per essere utilizzate sia in Grid che in Flexbox, nonché in altri metodi di layout.

Al momento della scrittura, tuttavia, le proprietà del gap funzionano in Grid Layout in tutti i browser che supportano la griglia e il column-gap funziona in Multicol; tuttavia, solo Firefox ha implementato queste proprietà per Flexbox.

Se dovessi usare i margini per creare un fallback per Flexbox, quindi testare lo spazio tra le column-gap e rimuovere i margini, le mie caselle non avranno spazio tra di loro nei browser che supportano lo spazio tra le column-gap in Grid o multicolo, quindi la mia spaziatura di fallback sarà RIMOSSO.

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

Questa è una limitazione attuale delle query di funzionalità. Non abbiamo un modo per testare il supporto di una funzionalità in un'altra funzionalità. Nella situazione precedente, quello che voglio chiedere al browser è: "Hai supporto per il gap di colonna in Flexbox?" In questo modo, posso ottenere una risposta negativa in modo da poter utilizzare il mio fallback.

Esiste un problema simile con le proprietà di frammentazione CSS break-before , break-after e break-inside . Poiché questi hanno un supporto migliore quando la pagina viene stampata, i browser spesso richiedono il supporto. Tuttavia, se stai testando il supporto in multicol, ottieni quelli che sembrano essere falsi positivi. Ho sollevato un problema al CSS Working Group per questo problema, tuttavia, non è un problema semplice da risolvere. Se hai dei pensieri, aggiungili lì.

Test per il supporto del selettore

Attualmente, le query di funzionalità possono testare solo le proprietà e i valori CSS. Un'altra cosa che vorremmo testare è il supporto dei selettori più recenti, come quelli nel livello 4 della specifica dei selettori. C'è una nota esplicativa e anche un'implementazione dietro un flag in Firefox Nightly di una nuova funzionalità per le query di funzionalità che raggiungerà questo obiettivo.

Se visiti about:config in Firefox e abiliti il ​​flag layout.css.supports-selector.enabled , puoi verificare se sono supportati vari selettori. La sintassi è attualmente molto semplice, ad esempio per testare il selettore : :has :

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

Questa è una specifica in fase di sviluppo, tuttavia, puoi vedere come vengono aggiunte funzionalità per aiutarci a gestire i problemi sempre presenti del supporto del browser mentre parliamo.

Ulteriori letture

Può sembrare frustrante quando si desidera utilizzare una funzione e scoprire che non è supportata da uno dei principali browser o se le cose sembrano comportarsi in modi diversi. Ho raccolto alcune ulteriori letture pratiche che potrebbero aiutare.

• "Utilizzo della griglia CSS: supporto di browser senza griglia" Opzioni per la gestione dei browser meno recenti e della griglia CSS
• Pagina di riferimento MDN "Query sulle funzionalità" per le query sulle funzionalità
• "CSS Grid And Progressive Enhancement" Guida MDN al miglioramento progressivo della griglia
• Guida MDN "Compatibilità con le versioni precedenti di Flexbox" al supporto di Flexbox, inclusi i dettagli delle precedenti implementazioni con prefisso
• "Prima la libreria di modelli" Come gestire il codice di fallback utilizzando una libreria di modelli