Concepto: cascada y herencia CSS. Estilos de usuario. Importancia !important. Ejemplos prácticos (CU01017D)

ESTILOS DE USUARIO CSS

A través de una opción de menú de algunos navegadores, se puede definir por ejemplo que el texto se debe mostrar de un tamaño determinado o de un color determinado. Cuando el usuario elige estas opciones normalmente anula aquello que ha sido definido por el autor de la página web, de modo que sus opciones prevalecen respecto a cualquier otro tipo de declaración. Esta situación no es habitual, de hecho quizás la mayoría de los usuarios la desconocen o no la usan. Su empleo quizás se limita a personas con problemas de vista para poner tamaños de fuente grandes o colores específicos que les faciliten la visión, o a usuarios avanzados que tienen un gran dominio de las opciones de configuración. A pesar de su relativo poco uso, como programadores web debemos tener constancia de ello porque es posible que tengamos que resolver problemas donde esta configuración afecte a la solución del problema.

Aprovechando que hablamos de opciones de configuración de los navegadores, citaremos también que algunos navegadores permiten configurar opciones relativas a los estilos por defecto. Ya hemos dicho que cuando un documento HTML carece de estilos aplicados, en realidad sí tiene lo que podríamos denominar estilos básicos o estilos por defecto que aplica el navegador. Por ejemplo, una navegador recién instalado puede tener un tamaño de fuente por defecto de 12 pixeles, pero en aquellos navegadores que lo permiten, este parámetro podría cambiarse y establecerse en 16 pixeles a través de las opciones de configuración del navegador. También algunos navegadores permiten configurar otros parámetros adicionales. Este es uno de los motivos por los que es recomendable no confiar en los estilos por defecto cuando se crean páginas web, sino especificar todos los parámetros desde nuestra hoja de estilos para asegurarnos de que se aplican exactamente las reglas CSS que nosotros deseamos.

ORIGEN, IMPORTANCIA Y ESPECIFICIDAD

Nos encontramos con que existen distintos tipos de CSS como el predefinido por el navegador, el definido por el autor de la página web (que puede ser externo, interno o en línea) ó el definido por el usuario en la configuración de su navegador. A su vez, las reglas pueden entrar en conflicto (que una regla diga una cosa y otra regla una cosa distinta) y no sólo a nivel navegador – autor – usuario, sino en lo que para nosotros es la definición CSS principal, la que escribimos cuando creamos una web. Por ejemplo en un archivo css externo podemos tener una regla body {color: red;} y otra regla p { color: blue;} y otra regla #destacado {color: yellow;}. Si en el documento HTML nos encontramos algo así como <p id=”destacado”> … </p> ¿Qué estilo aplica el navegador entre los tres posibles?

Todas estas situaciones se denominan situaciones de conflicto o colisión y CSS define una forma de resolución de conflictos o colisiones. A este mecanismo de resolución de conflictos se le denomina “cascada”. La cascada se basa en determinar todas las reglas que son de aplicación a un elemento y que entran en conflicto, en ordenar esas reglas en base a unos criterios y mostrar como resultado en el navegador la regla que haya quedado en primer lugar, a la que denominamos “regla ganadora”.

El mecanismo es similar a la asignación de “pesos” a cada regla CSS para lograr la ordenación. Supongamos que la regla body {color: red;} tiene peso 45 sobre 100 para ser aplicada a los párrafos que la regla p { color: blue;} tiene peso de 55 para ser aplicada a los párrafos y que la regla #destacado {color: yellow;} tiene peso 70 para ser aplicada a un párrafo con id = “destacado”. Cuando el navegador se encuentra un párrafo dentro del documento HTML ve las reglas que le son de aplicación y el peso de cada una, aplicando como regla ganadora la que mayor peso tenga.

¿Cómo se determinan los pesos y el orden que se asigna a las reglas, es decir, cómo se determina qué regla “gana” cuando hay varias reglas que entran en conflicto?

Las reglas de resolución de conflictos son complejas y no todos los navegadores responden de la misma manera. Por ello en cursos de aprendizaje de CSS no recomendamos un estudio en profundidad, sino conocer las reglas básicas y la filosofía del procedimiento de cascada.

El navegador sigue un proceso similar al siguiente para la resolución de colisiones de estilos:

1) Crea una lista con todas las reglas que son de aplicación directa o indirecta por herencia a un elemento concreto. Cuanto más directa o próxima esté la regla al elemento, antes se coloca. La proximidad viene dada por cuán próxima está la regla a una definición directa del elemento afectado. Por ejemplo si un elemento div con id=”menu1” tiene un párrafo con class=”items” entre #menu1 {…} y .items {…} la regla ganadora a la hora de aplicar estilo al párrafo es .items { … } porque es la que más directamente define el elemento. En este ejemplo menu1 define al elemento indirectamente a través del div, mientras que items define directamente la clase del párrafo y por ello resulta ganadora.

Otro ejemplo: para un párrafo dentro de un div, una regla que hereda de div está más próxima que una regla que hereda de body. Si existiera una regla directa relativa a los párrafos, esta iría en primer lugar antes que las demás debidas a herencia.

Si existe una sola regla directa relativa al elemento que se está evaluando, se aplica y termina el proceso de cascada.

2) Si existe más de una regla con igual nivel de proximidad, se dividen las reglas por origen en base a si se trata de estilos de usuario, predefinidos del navegador, estilos de autor, y en caso de estilos de autor si son css externo, interno o en línea. Se ordenan en base al origen. Básicamente se colocan primero las declaraciones en línea, luego las internas y luego las externas.

3) Se dividen las declaraciones de reglas en declaraciones importantes y declaraciones normales. Las declaraciones importantes son las que están escritas como: