2.3. Mejora progresiva 4w3s2w

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 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 .

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 completo y correcto a toda la información de la página independientemente del tipo de navegador utilizado por el .
• 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 s 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.
• 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 s.(Actualmente estamos en la version 11.0)

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 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 (Actualmente estamos en las versiones Internet Explorer 11, Firefox 65, Safari 5.1.8, Opera 58 y Google Chrome 71.)

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 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 (Actualmente estamos en las versiones Internet Explorer 11, Firefox 65, Safari 5.1.8, Opera 58 y Google Chrome 71.).

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 s de Internet Explorer 6 sigan accediendo a todos los contenidos y que el resto de s 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 (Actualmente estamos en las versiones Internet Explorer 11, Firefox 65, Safari 5.1.8, Opera 58 y Google Chrome 71.).

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 (Actualmente estamos en las versiones Internet Explorer 11, Firefox 65, Safari 5.1.8, Opera 58 y Google Chrome 71.)

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 (Actualmente estamos en las versiones Internet Explorer 11, Firefox 65, Safari 5.1.8, Opera 58 y Google Chrome 71.).

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 s de versiones anteriores a Internet Explorer 11 visualizan un menú muy básico adecuado para un navegador obsoleto, pero que les permite el a todos los contenidos. Los s de Internet Explorer 11 visualizan un menú normal adecuado a las limitaciones de su navegador pero que también permite el a todos los contenidos. Por último, los s de los navegadores más avanzados (Opera y Safari) visualizan un menú avanzado que aprovecha todas las características disponibles en CSS.