Desarrollando sitios con la metodología de Mejora Progresiva

La Mejora Progresiva es una metodología de desarrollo web presentada por primera vez por Steve Champeon y Nick Fink en la conferencia SXSW Interactive 2003 y comentada en profundidad en el artículo Progressive Enhancement and the Future of Web Design. Se enmarca dentro y tiene como referente a las corrientes actuales de diseño que propugan la separación de contenido y presentación, el marcado semántico, los estándares web y la disponibilidad universal de los sitios para cualquier agente de usuario legacy, actual o futuro.

La otra principal forma de asegurar la compatibilidad de los desarrollos con dispositivos menos capacitados, la famosa ‘degradación grácil’ se considera en la práctica poco util, ya que se limita ‘a asegurar que nuestro desarrollo funcione en los navegadores de la generación anterior’, pero sin resolver en rigor el problema de distintas implementaciones de estándares, distintas capacidades de soporte CSS, etc…

A nivel general, la ‘mejora progresiva’ considera cuatro tipos distintos de navegadores:

• Navegadores que solo pueden aceptar HTML, sin soporte ninguno para hojas de estilo.
• Navegadores un soporte muy limitado de CSS1.
• Navegadores ‘medios’. Con soporte para CSS1.
• Navegadores ‘modernos’. Con un soporte adecuado de CSS2.

Existen navegadores (el más representativo NN 4.x) que soportan CSS en teoría, pero en la práctica presentan tantos errores en la implementación que necesitan un juego específico de reglas. Veremos más adelante como se podrán manejar estos casos especiales facilmente en la estructura que construiremos.

Nuestra aproximación consistirá en crear una base consistente en un documento marcado semánticamente y sin ningún tipo de información presentacional, y a continuación añadir esta información ‘por capas’, con la hoja de estilo apropiada para cada tipo de navegador. Como particularidad, no utilizaremos ninguna clase de script de detección sino que utilizaremos los bugs mejor conocidos de cada versión, aprovechando técnicas bien establecidas y entendidas.

Pasos a seguir para la aplicación de la Mejora Progresiva

Crearemos un documento con el contenido necesario y marcado de acuerdo a nuestros objetivos. Aseguremonos de no incluir ningún tipo de estilo, así como de utilizar los elementos HTML apropiados a cada pieza de contenido. Verifiquemos que los párrafos vayan como elementos < p >, las listas, según su tipo, vayan como < ul >, < ol > o < dl >.

Asegurémonos también de no incluir elementos como < br >,< b > ( utilizemos < strong >) o < i > (utilizemos < em >).

Cuando el documento esté correctamente marcado, aplicamos nuestra primera hoja de estilo (‘minima.css’) y la enlazamos via < link >. Esta hoja utilizará unos estilos básicos que cualquier navegador preparado para CSS podrá aplicar sin problemas. Además, en esta hoja podremos especificar reglas específicas para NN 4.x, utilizando para ello el hack llamado Fabrice’s Inversion o reglas que excluyan especificamente a NN 4.x, con el Caio’s Hacks.

Ahora recurriremos al High Pass Filter creado por Tantek Celik. Este filtro nos asegura que nuestra hoja de estilos solo sera enlazada por aquellos navegadores con un soporte sólido de CSS1 (concretamente, por todos aquellos que pasen con éxito la sección 7.1 de la CSS1 Test Suite Para aplicarlo enlazaremos desde nuestro documento a (via ) con una hoja de estilo llamada ‘filtro.css’ que contendrá sólo las siguientes dos lineas:

@import "null?"{";
@import "maxima.css";

Para no extender más de lo necesario, baste con dar por sabido que los navegadores que superen este test, importaran la hoja de estilo ‘maxima.css’, donde aplicaremos el grueso de nuestra información de estilos, con la seguridad de saber que el resto de navegadores no se verán afectados por una serie de reglas que no aplicarán o aplicarán incorrectamente.

Ahora es el momento de perfeccionar nuestras hojas de estilo, sea con hojas para otros medios (por ejemplo, impresora), sea con la aplicación de otros conocidos hacks.

Conclusiones

Creo que es un interesante método para asegurarnos un cierto rigor en el desarrollo de páginas y que proporciona una base sólida para la experimentación y la innovación dentro del respeto a los estándares y del ideal de un diseño universal que no excluya a ningún usuario con independencia de la tecnología que elija para el acceso a nuestros sitios.