Els navegadors web han existit sempre que els llocs web tinguin. De fet, els navegadors són un ingredient essencial en l'experiència o la gent que visualitza el vostre lloc, però no tots els navegadors es creen de la mateixa manera. És totalment possible (i realment probable) que els clients que consultin les vostres pàgines web en navegadors que siguin molt antics i que falten les funcions que es troben en els navegadors més moderns. Això pot suposar problemes importants a mesura que s'esforça per desenvolupar llocs web que aprofitin els últims avenços en disseny i desenvolupament de llocs web . Si algú arriba al vostre lloc usant un d'aquests navegadors antiquats i les vostres tècniques avançades més avançades no funcionen per a ells, podríeu oferir una mala experiència en general. La millora progressiva és una estratègia de maneig del disseny de pàgines web per a diferents navegadors, és a dir, aquells navegadors antics que no tenen suport modern.
La millora progressiva és una manera de dissenyar pàgines web perquè, com més característiques admeti un agent d'usuari, més característiques tindrà la pàgina web. És al contrari de l'estratègia de disseny coneguda com a degradació agraciada . Aquesta estratègia construeix primer les pàgines per als navegadors més moderns i, a continuació, garanteix que també funcionen raonablement amb navegadors menys funcionals, que l'experiència "es degrada amb gràcia". La millora progressiva comença primer amb els navegadors menys capaços i genera una experiència d'allà.
Com s'utilitza la millora progressiva
Quan creeu un disseny web amb una millora progressiva, el primer que farà és crear un disseny que funcioni pel menor denominador comú de navegadors web. En el seu nucli, la millora progressiva diu que el vostre contingut ha d'estar disponible per a tots els navegadors web, no només un subconjunt. És per això que comença donant suport a aquests navegadors antics, obsolets i menys capaços. Si creeu un lloc que funcioni bé per a ells, sabeu que heu creat una línia de base que hauria de proporcionar almenys una experiència útil per a tots els visitants.
Al començar amb els navegadors menys capaços en primer lloc, voldreu assegurar-vos que tot el vostre HTML ha de ser vàlid i semànticament correcte. Això ajudarà a garantir que la més àmplia varietat d'agents d'usuari pugui veure la pàgina i mostrar-la amb precisió.
Recordeu que els estils de disseny visual i el disseny general de la pàgina s'afegeixen mitjançant fulls d'estils externs . Aquí és on es produeix la millora progressiva. Utilitzeu el full d'estils per crear un disseny de lloc que funcioni per a tots els visitants. A continuació, podeu afegir estils addicionals per millorar la pàgina a mesura que els agents d'usuari guanyen funcionalitat. Tothom rep els estils de línia de base, però per als navegadors de notícies que puguin suportar els estils més moderns i més avançats, obtenen més. Vostè "progressiva millorar" la pàgina per als navegadors que poden donar suport a aquests estils.
Hi ha algunes maneres d'aplicar una millora progressiva. En primer lloc, haureu de considerar el que fa un navegador si no entén una línia de CSS: ho ignora. Això funciona realment a favor vostre. Si creeu un conjunt d'estils de referència que tots els navegadors entenen, podeu afegir estils addicionals per a nous navegadors. Si suporten els estils, els apliquen. Si no, els ignoraran i només usaran aquests estils de referència. Un exemple senzill de millora progressiva es pot veure en aquest CSS:
.main-content {
antecedents: # 999;
antecedents: rgba (153,153,153, .75);
}
Aquest estil primer estableix el fons d'un color grisenc. La segona regla utilitza valors de color RGBA per establir un nivell de transparència. Si un navegador admet RGBA, anul·larà el primer estil amb el segon. Si no ho fa, només s'aplicarà el primer. Heu establert un color de línia de base i, a continuació, afegiu estils addicionals per als navegadors més moderns.
Ús de consultes de funcions
Una altra manera d'aplicar la millora progressiva és utilitzar les anomenades "consultes de funcions". Són similars a les consultes dels mitjans , que són una peça essencial de dissenys web responsius . Mentre que els mitjans consulten text per a determinades mides de pantalla, les consultes de característiques es comprovaran per comprovar si una determinada funció és compatible o no. La sintaxi que utilitzaria és:
@supports (display: flex) ()Qualsevol estils que hàgiu afegit dins d'aquesta regla només funcionaria si aquest navegador admeti "flexió", que són els estils de Flexbox. Podeu establir un conjunt de normes per a tothom i, a continuació, utilitzar consultes de funcions per afegir addicionals només per a navegadors seleccionats.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 13/12/16.