Seleccionar página

Me ocurrió una vez, y me llevó una tarde entera saber lo que estaba ocurriendo. Estaba en pleno desarrollo de un tema realizado en HTML5 y CSS3 para luego pasarlo a WordPress. Todo iba perfecto hasta que me dispuse a darle estilo a unos enlaces del footer. Cuando abría la página con el navegador no se ven los enlaces como yo esperaba.

El tamaño y la fuente no se modificaron como yo había creído. Al principio pensé que no había declarado bien los estilos, pero revisándolo me di cuenta que todo estaba correcto. Lo siguiente que hice fue inspeccionar dichos enlaces con Firebug desde mi navegador. Me encontré con algo nuevo llamado user-agent stylesheet y similar a esto:
user-agent stylesheet

Solución para corregir el user-agent stylesheet

Si veís en la parte derecha, hay elementos que no vienen definidos por una hoja de estilo concreta. En vez de ello pone user-agent stylesheet, que es la hoja de estilo predeterminada del navegador. Cada navegador aplica unos estilos propios a la mayoría de elementos de una página web y estos son aplicados antes de todas nuestras hojas de estilos. A veces la del navegador prevalece sobre las tuyas propias. Para evitar esto probé varias cosas. Las dos siguientes fueron las únicas que solucionaron mi problema:

  • Etiqueta !important: !important fuerza a hacer lo siguiente: incluso si el selector es menos específico y el nivel más bajo, ahora superará los selectores de mayor especificidad y se aplicarán sus atributos.
    La mayor parte del tiempo, !important debería evitarse porque la especificidad de los selectores se encarga de las prioridades, que es la idea de estilos en cascada. Sin embargo, hay algunas situaciones donde la especificidad no es tan lógica y tenemos que usar esta directiva. Aunque su uso debemos limitarlo a situaciones muy pero que muy concretas.
  • Uso de reseteadores de estilos: esta fue la opción que mejor resultado me produjo, y su uso es muy conveniente y recomiendo usarlo en cada proyecto que se realice para evitar problemas con el user-agent stylesheet. Los reset CSS son un conjunto de reglas CSS que resetean los estilos de los elementos CSS. Cada navegador tiene su propia hoja de estilo, que se utiliza para que los sitios web sin estilo parezcan más legibles. Por ejemplo, la mayoría de los navegadores por defecto tienen los enlaces azules y los enlaces visitados púrpura, aplican tamaños de fuente variables a H1, H2, H3 … y una cierta cantidad de relleno para casi todo. Obviamente esto crea una cierta cantidad de dolores de cabeza para los diseñadores de estilo CSS, que no pueden conseguir la manera de que sus sitios web tengan el mismo aspecto en todos los navegadores. La solución pasa por estos reset CSS, y algunos de los más famosos son:
    • Eric Meyer’s Reset CSS – Descarga el código aquí
    • Normalize Reset CSS – Descarga el código aquí
    • HTML5 Doctor Reset CSS – Descarga el código aquí
    • Yahoo! (YUI 3) Reset CSS – Descarga el código aquí

Implementar los reset CSS en tu web

Para activar los reset CSS en tu proyecto web solo tienes que guardar una hoja de estilo con las reglas del reseteador que más te convenza y llamarlo desde tus archivos html o php. Igual que lo harías con una hoja de estilo propia pero hay que tener cuidado con una cosa. A la hora de relacionar los ficheros CSS en el head de tu html, primero llama al reset y luego a tus hojas de estilo personales. Así de fácil ya podemos empezar a trabajar en un proyecto donde el user-agent stylesheet no nos moleste y nuestra web se pueda ver igual en todos los navegadores.

 

Título
User-agent stylesheet y como sobrescribirlo correctamente
Título
User-agent stylesheet y como sobrescribirlo correctamente
Descripción
No dejes que el navegador sobrescriba tus estilos. Aprende a sobrescribir el user-agent stylesheet de una manera fácil y sencilla en este pequeño tutorial.
Autor

Pin It on Pinterest

Share This