La mejora progresiva en CSS (“progressive enhancement”) es uno de los conceptos más importantes del diseño web y, a su vez, uno de los más desconocidos entre los desarrolladores. Su origen proviene de su concepto contrario: la degradación útil o “graceful degradation”.
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 en CSS toma ese concepto y lo aplica de forma inversa. En el diseño web, la mejora progresiva significa que, cuanto más avanzado sea el navegador con el que el usuario accede al sitio web, este dispondrá también de características más avanzadas.
¿Cómo funciona la mejora progresiva en CSS ?
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, este tipo de diseñadores prefiere sacrificar cualquier característica interesante de CSS para conseguirlo.
La mejora progresiva en CSS 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 CSS2 e incluso de CSS3, aunque solo 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 solo 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 solo 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 solo para los navegadores más modernos.
A continuación se muestra la mejora progresiva en CSS en la práctica mediante un ejemplo, donde el propósito es crear un menú de navegación que se vea 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 diferente aspecto en cada uno de los navegadores; con eso podemos ver que, incluso con unos estilos CSS tan básicos, se producen diferencias visuales entre los navegadores. El motivo es que navegadores como Internet Explorer 6 no son capaces de mostrar un borde punteado de 1px de anchura y lo sustituyen por un borde discontinuo.
El siguiente paso consiste en utilizar los selectores 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; }
Este código consigue que el primer elemento del menú de navegación se muestre con otro estilo y, cuando el usuario pase el ratón por encima de un elemento, este se mostrará destacado o resaltado. Cabe aclarar que el único navegador que sigue sin tener soporte sobre esta herramienta es Internet Explorer 6, ya que no es capaz de entender el selector de hijos.
¿Quieres aprender más acerca de CSS?
Ahora que sabes qué es la mejora progresiva en CSS y conoces las excepciones que tiene con ciertos navegadores antiguos, te recomendamos nuestro Full Stack Bootcamp en Desarrollo Web para que continúes aprendiendo sobre CSS y otras herramientas para convertirte en un diseñador experto. ¡Inscríbete ahora!
