Os exploradores web estiveron en torno a sitios web. En realidade, os navegadores son un ingrediente esencial na experiencia ou a xente que ve o teu sitio, pero non todos os navegadores creanse de forma igual. É absolutamente posible (e en realidade bastante probable) ter clientes que ven as súas páxinas web en navegadores que son moi vellos e faltan as características que se atopan nos navegadores máis modernos. Isto pode supoñer problemas importantes mentres se está traballando para desenvolver sitios web que aproveiten os últimos avances no deseño e desenvolvemento de sitios web . Se alguén chega ao seu sitio usando un destes navegadores antiquados e as súas últimas técnicas avanzadas non funcionan para eles, podería estar a entregar unha experiencia pobre en xeral. A mellora progresiva é unha estratexia de manexo do deseño da páxina web para diferentes navegadores, é dicir, aqueles navegadores antigos que non teñen soporte moderno.
A mellora progresiva é unha forma de deseñar páxinas web para que canto máis recursos admita un axente de usuario, máis características terá a páxina web. É o oposto á estratexia de deseño coñecida como degradación graciosa . Esta estratexia desenvolve primeiro as páxinas dos navegadores máis modernos e despois asegura que tamén funcionan razoablemente ben con navegadores menos funcionais, que a experiencia "degrada graciosamente". A mellora progresiva comeza primeiro cos navegadores menos capaces e constrúe unha experiencia desde alí.
Como usar o Progressive Enhancement
Cando se crea un deseño web mediante unha mellora progresiva, o primeiro que farás é crear un deseño que funcione para o menor denominador común de navegadores web. No seu núcleo, a mellora progresiva di que o seu contido debería estar dispoñible para todos os navegadores web, e non só un subconjunto. É por iso que comeza a apoiar estes navegadores antigos, anticuados e menos capaces. Se creas un sitio que funciona ben para eles, sabes que creaches unha base de referencia que debería ofrecer polo menos unha experiencia útil para todos os visitantes.
Ao comezar cos navegadores menos habilidos primeiro, quererá garantir que todo o seu HTML sexa válido e semánticamente correcto. Isto axudará a garantir que a maior variedade de axentes de usuário poida ver a páxina e amosar-la con precisión.
Lembre que os estilos de deseño visual e o deseño xeral da páxina engádense usando follas de estilo externas . Isto é realmente onde ocorre a mellora progresiva. Utiliza a folla de estilo para crear un deseño de sitio que funcione para todos os visitantes. A continuación, podes engadir estilos adicionais para mellorar a páxina a medida que os axentes de usuarios gañan funcionalidade. Todos reciben os estilos de base, pero para os navegadores de novas que poidan soportar os estilos máis avanzados e modernos, obtéñense máis. Mellora progresivamente a páxina para navegadores que poden soportar eses estilos.
Existen algunhas formas nas que se pode aplicar unha mellora progresiva. En primeiro lugar, debes considerar o que fai un navegador se non comprende unha liña de CSS: ignóraa. Isto realmente funciona ao teu favor. Se creas un conxunto de estilos de liña de base que todos os navegadores comprenden, podes engadir estilos adicionais para os novos navegadores. Se apoian os estilos, aplicalas. Se non, ignoraranos e só usarán os estilos de liña base. Un exemplo sinxelo de mellora progresiva pode verse neste CSS:
contido máximo {
fondo: # 999;
fondo: rgba (153,153,153, .75);
}
Este estilo establece primeiro o fondo dunha cor grisáceo. A segunda regra usa valores de cor RGBA para establecer un nivel de transparencia. Se un navegador admite RGBA, substituirá o primeiro estilo co segundo. Se non o fai, só se aplicará o primeiro. Configuraches unha cor de liña de base e engade estilos adicionais para navegadores máis modernos.
Usar consultas de funcións
Outra forma de aplicar a mellora progresiva é usar o que se coñece como "consultas de recursos". Son semellantes ás consultas multimedia , que son unha peza esencial de proxectos web responsivos . Mentres os medios consultan o texto para determinados tamaños de pantalla, as consultas de funcións comprobaran se se admite ou non unha determinada función. A sintaxe que usarías é:
@supports (display: flex) {}Calquera estilo que agregou dentro desta regra só funcionaría se ese navegador admitiu "flex", que é o estilo de Flexbox. Podería establecer un conxunto de regras para todos e despois usar consultas de recursos para engadir máis elementos para os navegadores seleccionados.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 13/12/16.