Suport en navegadors antics

En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.

Prerequisits: Els conceptes bàsics d'HTML (consulta la Introducció a l'HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes).
Objectiu: Entendre com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.

El panorama de compatibilitat dels navegadors per al teu lloc web?

Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara Statcounter que poden proporcionar estadístiques filtrades segons la ubicació.

També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.

La compatibilitat de les funcions que empres

Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de grid-template-columns. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.

Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web Can I Use. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.

Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.

Compatibilitat no significa «veure's igual»

És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.

Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. El teu contingut té sentit si suprimeixes el full d’estil?

Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.

La creació d’alternatives d'emergència amb CSS

Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les tècniques heretades que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.

En l'exemple següent hem especificat que tres elements de flotació <div> es mostrin en fila. Qualsevol navegador que no admeti el disseny de graella CSS veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}
<div class="wrapper">
  <div class="item">Primer element</div>
  <div class="item">Segon element</div>
  <div class="item">Tercer element</div>
</div>

Nota: La propietat clear tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.

Mètodes de les solucions alternatives

Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.

Float i clear
Com s'ha mostrat abans, les propietats float i clear deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.
display: inline-block
Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té display: inline-block, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament inline-block s'ignora.
display: table
El mètode per a crear taules CSS que es descriu en la introducció d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.
Disseny en diverses columnes
Pots utilitzar multi-col com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat column-* i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.
Flexbox com a solució alternativa a la graella
Flexbox té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat flex aplicada als descendents.

Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.

En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
  width: 33.333%;
}
<div class="wrapper">
  <div class="item">Primer element</div>
  <div class="item">Segon element</div>
  <div class="item">Tercer element</div>
</div>

Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.

Consultar les propietats

Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.

Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (auto) si sabem que hi ha compatibilitat amb el disseny de graella.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
  width: 33.333%;
}

@supports (display: grid) {
  .item {
      width: auto;
  }
}
<div class="wrapper">
  <div class="item">Primer element</div>
  <div class="item">Segon element</div>
  <div class="item">Tercer element</div>
</div>

La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.

L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.

Les versions anteriors de Flexbox

En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix -ms- per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; aquesta guia útil t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.

La versió prefixada de graella de l’Internet Explorer 10 i 11

L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella moderna, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix -ms-, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.

La guia per a la Millora progressiva del disseny de graella et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.

Proves amb navegadors antics

Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de comprovació de compatibilitat entre navegadors.

També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una varietat de màquines virtuals de descàrrega gratuïta. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.

Resum

Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.

Consulta també

En aquest mòdul