La mejora progresiva ("progressive enhancement") es uno de los conceptos más importantes del diseño web y a la vez uno de los más desconocidos. Su origen proviene de su concepto contrario, la degradación útil o "graceful degradation".
La degradación útil es un concepto propuesto hace décadas por el psicólogo inglés David Courtenay Marr. Aplicada al diseño web, la degradación útil significa que un sitio web sigue funcionando correctamente cuando el usuario accede con un navegador limitado o antiguo en el que no funcionan las características más avanzadas.
La mejora progresiva toma ese concepto y lo aplica de forma inversa. En el diseño web, la mejora progresiva significa que el sitio web dispone de características más avanzadas cuanto más avanzado sea el navegador con el que accede el usuario.
Muchos diseñadores web y muchos de sus clientes están obsesionados con que sus diseños se vean exactamente igual en cualquier versión de cualquier navegador. Aunque resulta prácticamente imposible conseguirlo, este tipo de diseñadores prefiere sacrificar cualquier característica interesante de CSS de manera que las páginas se vean igual en cualquier navegador.
La mejora progresiva propone que el diseño web se realice de la siguiente manera:
- En primer lugar, el diseño web debe permitir el acceso completo y correcto a toda la información de la página independientemente del tipo de navegador utilizado por el usuario.
- Después de cumplir el requisito anterior, se deben utilizar las características más modernas de CSS 2 e incluso de CSS 3, aunque sólo los usuarios con navegadores más modernos sean capaces de disfrutarlas.
La técnica de la mejora progresiva es mucho mejor que las soluciones alternativas que utilizan algunos diseñadores, como por ejemplo:
- Utilizar sólo las características de CSS que soporte correctamente el navegador obsoleto Internet Explorer 6, porque un gran número de usuarios siguen utilizándolo.
- Utilizar sólo las características de CSS que soporten correctamente navegadores limitados como Internet Explorer 7, ya que es el navegador más utilizado por los usuarios.
- Olvidarse completamente de navegadores limitados como Internet Explorer 6 y 7, diseñando los sitios web sólo para los navegadores más modernos.
A continuación se muestra la mejora progresiva en la práctica mediante un ejemplo publicado en el artículo Progressive Enhancement with CSS 3: A better experience for modern browsers.
El propósito del ejemplo es crear un menú de navegación que se ve más bonito cuanto más moderno sea tu navegador. Como es habitual, el código HTML del menú se basa en una lista de tipo <ul>:
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>El primer paso consiste en aplicar los estilos CSS básicos que interpretan correctamente todas las versiones de todos los navegadores. Aunque estos estilos hacen que el menú tenga un aspecto muy básico, permiten el acceso correcto a todos los contenidos.
ul {
background-color: blue;
border-bottom: 1px dotted #999;
list-style: none;
margin: 15px;
width: 150px;
padding-left: 0;
}
li {
background-color: #FFF;
border: 1px dotted #999;
border-bottom-width: 0;
font: 1.2em/1.333 Verdana, Arial, sans-serif;
}
li a {
color: #000;
display: block;
height: 100%;
padding: 0.25em 0;
text-align: center;
text-decoration: none;
}
li a:hover { background-color: #EFEFEF; }Las reglas CSS anteriores hacen que el menú de navegación tenga el siguiente aspecto en cada navegador:
Figura 2.3 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9
Como se ve en la imagen anterior, incluso con unos estilos CSS tan básicos se producen diferencias visuales entre los navegadores. El motivo es que Internet Explorer 6 no es capaz de mostrar un borde punteado de 1px de anchura y lo sustituye por un borde discontinuo.
El siguiente paso consiste en utilizar el selector de hijos (uno de los selectores avanzados de CSS) para añadir nuevos estilos:
body > ul { border-width: 0; }
ul > li {
border: 1px solid #FFF;
border-width: 1px 0 0 0;
}
li > a {
background-color: #666;
color: white;
font-weight: bold;
}
li:first-child a { color: yellow; }
li > a:hover{ background-color: #999; }Ahora el primer elemento del menú de navegación se muestra con otro estilo y cuando el usuario pasa su ratón por encima de un elemento se muestra destacado:
Figura 2.4 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9
El navegador Internet Explorer 6 se queda atrás y sigue mostrando el menú con el mismo aspecto, ya que no es capaz de entender el selector de hijos. La mejora progresiva permite que los usuarios de Internet Explorer 6 sigan accediendo a todos los contenidos y que el resto de usuarios vean un menú más avanzado.
A continuación se modifica la opacidad de los elementos del menú, de forma que el elemento seleccionado se vea más claramente:
li { opacity: 0.9; }
li:hover{ opacity: 1; }En esta ocasión, el navegador que se queda atrás es Internet Explorer 7, ya que no incluye soporte para esa propiedad de CSS. En el resto de navegadores se muestra correctamente el efecto:
Figura 2.5 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9
Otra posible mejora del menú consiste en añadir una sombra al texto del elemento seleccionado mediante la propiedad text-shadow de CSS:
li a:hover { text-shadow: 2px 2px 4px #333; }Solamente los navegadores Safari y Opera soportan la propiedad text-shadow, por lo que el navegador Firefox se queda atrás y no muestra esta mejora:
Figura 2.6 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9
Por último, utilizando los selectores de CSS 3 se va a alternar el color de fondo de los elementos del menú para mejorar su visualización:
li:nth-child(2n+1) a {
background-color: #333;
}
li:nth-child(n) a:hover {
background-color: #AAA;
color: #000;
}
li:first-child > a:hover{ color: yellow; }Solamente los navegadores Opera y Safari incluyen todos los selectores de CSS 3, por lo que el resultado final del menú en cada navegador es el que muestra la siguiente imagen:
Figura 2.7 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9
Como se ha visto en este ejemplo, la mejora progresiva permite aprovechar todas las posibilidades de CSS sin perjudicar a los navegadores obsoletos o limitados. Los usuarios de Internet Explorer 6 visualizan un menú muy básico adecuado para un navegador obsoleto, pero que les permite el acceso a todos los contenidos. Los usuarios de Internet Explorer 7 visualizan un menú normal adecuado a las limitaciones de su navegador pero que también permite el acceso a todos los contenidos. Por último, los usuarios de los navegadores más avanzados (Opera y Safari) visualizan un menú avanzado que aprovecha todas las características disponibles en CSS.