La cascada es el mecanismo que controla el resultado final de como visualizaremos una etiqueta html cuando a esta se le apliquen distintas instrucciones CSS.
¿Te has fijado alguna vez que el navegador tiene estilos CSS que se aplican por defecto?
Por ejemplo si no indicamos lo contrario visualizamos una tipografía concreta, los textos son negros, los h1,h2,h3… h6 tienen un tamaño relativo distinto y están en negrita, … y podríamos ir leyendo la hoja de estilos por defecto del navegador.
Todo esto son declaraciones CSS descriptivas que «aparecen de la nada«.
¿Como es posible que si ahora indicamos que un texto ya no es negro la página web pasa a verse distinta?
¿A quién debe obedecer el compilador web?
Todo esto es posible gracias al concepto de cascada. Un mismo elemento puede estar sujeto a varias hojas de estilos CSS y existen unas normas que indican de forma inequívoca cual de todas las instrucciones es la que debe afectar a un determinado elemento html.
Resumen de contenidos de esta publicación
Existen 3 reglas básicos que en conjunto conforman el conjunto de normas de cascada que permiten determinar para cada elemento que declaración CSS tiene prioridad.
Importancia
Existen 3 categorías de hojas de estilos que pueden afectar a una etiqueta html:
- Las instrucciones declaradas de forma nativa en la hoja CSS del navegador.
- Las instrucciones declaradas en el navegador del usuario web. (Por ejemplo una persona con problemas de visión puede forzar que los textos tengan un tamaño de fuente a una escala mayor)
- Las instrucciones declaradas por el autor de la página web.
¿Aplicando el sentido común que instrucciones deberían tener prioridad?[qode_advanced_pricing_table title_tag=»p» pricing_items=»%5B%7B%22item_title%22%3A%22Navegador%22%2C%22item_price%22%3A%221%22%7D%2C%7B%22item_title%22%3A%22Navegador%20con%20instrucci%C3%B3n%20!important%22%2C%22item_price%22%3A%222%22%7D%2C%7B%22item_title%22%3A%22Usuario%22%2C%22item_price%22%3A%223%22%7D%2C%7B%22item_title%22%3A%22Autor%22%2C%22item_price%22%3A%224%22%7D%2C%7B%22item_title%22%3A%22Autor%20con%20instrucci%C3%B3n%20!important%22%2C%22item_price%22%3A%225%22%7D%2C%7B%22item_title%22%3A%22Usuario%20con%20instrucci%C3%B3n%20!important%22%2C%22item_price%22%3A%226%22%7D%5D» table_title=»Hoja de estilos (navegador, usuario o autor de la web)» column_title=»Prioridad» currency=» «]Una forma fácil de recordar es pensar que quién tiene menos prioridad es el propio navegador y que quién tiene más prioridad es el usuario.
La página queda en una posición media.[vc_custom_heading text=»!important» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]!important debe usarse con moderación.
Es más… es mejor que no lo uses. Suele denotar un maquetador mediocre. O como mínimo, úsalo únicamente si no tienes más remedio.
Cuando el navegador lee !important otorga la máxima prioridad independientemente de otros estilos. Yo lo uso cuando quiero personalizar algún estilo en wordpress y no me queda más remedio porqué no soy quién a escrito la plantilla web.
Debes considerar también que un !important de orden superior tiene prioridad a uno de orden inferior.
Y que dados dos !important de igual orden tiene prioridad el último.
La tabla anterior te puede ayudar.
Especificidad
La especifidad es el conjunto de reglas que indican el peso de un selector CSS.
Para que sea fácil de entender imaginemos que cada tipo de selector tiene una puntuación.
El selector que suma más puntos es el que gana y el que por tanto terminaremos visualizando en la página web.
Lo mejor es ver un ejemplo.
En las imágenes se observa el código html y el css de nuestro ejemplo.
Fijémonos que por ejemplo la segunda etiqueta li de nuestra lista no ordenada podría ser a priori lila, azul, amarillo, o verde.
¿Como sabe el navegador de que color debe pintar?
En primer lugar rastrea el documento en búsqueda de todas las instrucciones CSS que afectan una por una a todas y cada una de las etiquetas html del documento.
A continuación sigue una heurística que consiste en otorgar una puntuación a todos los posibles selectores que afectan a cada etiqueta html.
El selector que obtiene mayor peso es el que termina mandando.
Imaginemos que queremos dotar de estilos CSS a los elementos li del código html del ejemplo.
Podríamos llamar a los elementos li, de muchas formas. Tengamos en cuenta los que aparecen en la tabla. Uno por fila.
Si tenemos en cuenta las siguientes puntuaciones
- A: 1 si existe style (en línea)
- B: Número de IDs
- C: Número de clases y pseudoclases
- D: Número de elementos y pseudoelementos
La tabla se rellenaría según la imagen.
Si tenemos en cuenta que la columna A > B > C > DEl resultado final coincide exactamente con el obtenido si guardamos el documento HTML y lo abrimos con un navegador.
Orden de aparición
A igualdad de especificidad entre selectores manda el último.
El motivo es que sobrescribe al anterior.Y hasta aquí el concepto de cascada.
Una norma muy útil que nos ayuda a entender porqué vemos una web como la web cuando distintas instrucciones CSS colisionan.
Y no menos importante, un concepto que nos ayuda a entender aquello de «hojas de estilo en cascada«.
Nos leemos mañana, como siempre, con un nuevo contenido en el web.
Deja una respuesta