Dentro de CSS, existen algunos conceptos interesantes pero que pueden no tener demasiada relevancia práctica, pero sin duda, dan bastante contexto de como funciona un navegador, y son interesantes para comprender como funciona CSS.
Origen
Uno de esos conceptos es el denominado origen CSS. Generalmente, cuando hablamos de CSS, pensamos automáticamente en el diseño de una página web subida en Internet. Sin embargo, es algo un poco más complejo.
Existen 3 tipos de orígenes, ordenados de mayor a menor importancia:
- 1️⃣🟥 Autor: Mayor prioridad. Es el que conocemos la mayoría de forma implícita.
- 2️⃣🟧 Usuario: Es el CSS que puede crear un usuario en su navegador.
- 3️⃣🟨 Navegador: Son los estilos CSS que tiene y aplica un navegador por defecto.
Vamos a entender cada uno de estos casos:
Origen de autor
El origen de autor es el más conocido por todos. Se trata del código CSS que crea un desarrollador en una página o sitio web. La mayoría de los usuarios cuando piensa en CSS, piensan en este caso concreto. Sin embargo, existen más casos menos conocidos, como veremos a continuación.
Origen de usuario
El origen de usuario es menos conocido. Se trata del código CSS que puede crear un usuario en su navegador porque quiere establecer un estilo personal para invalidar alguna cosa que no le gusta o prefiere de otra forma, etc.
Un caso popular de este origen CSS es el de UserStyles, una web que permite establecer estilos personales en sitios webs concretos, para cambiar el estilo de ciertos detalles.
Origen de navegador
Por último, el origen de navegador también llamado origen de user agent son los estilos CSS que incorpora el navegador por defecto. Por ejemplo, si escribimos un <h1> en una página HTML que no tiene CSS, comprobaremos que aún así tiene algunos estilos por defecto: tamaños, márgenes, etc.
Esto ocurre con muchas etiquetas HTML y a menudo muchos desarrolladores utilizan un reset CSS para modificar dichos estilos, ya sea de forma intencionada (escribiéndolos manualmente o utilizando un reset.css específico) o muchas veces, sin saberlo, utilizando algún framework que tiene reset incluido (por ejemplo: tailwind CSS).
Importancia
Existe una casuística delicada, y es que en el caso de que una propiedad CSS de cada origen tuviera definido un !important, la prioridad anterior de la que hablamos se invierte, resultando que el CSS del navegador tendría prioridad sobre el CSS de usuario y de autor:
- 1️⃣🟥 Navegador (antes Autor)
- 2️⃣🟧 Usuario
- 3️⃣🟨 Autor (antes Navegador)
Si el navegador define alguna propiedad con un !important, aunque el usuario o el desarrollador de la página indique los estilos con !important, seguiría teniendo la prioridad el navegador.
Obviamente, esto no ocurre muy frecuentemente, pero se hace de esta forma para que los navegadores puedan aplicar estilos que sean imposible de modificar: normalmente con implicaciones de accesibilidad, modos de alto contraste, etc. que no se quiere que el usuario o desarrollador pueda modificarlos.
Prioridad
También hay que tener en cuenta que hay excepciones, como por ejemplo las animaciones CSS y las transiciones CSS. Este tipo de animaciones, cuando están activas, pasan a tener mayor prioridad que el resto de CSS, así que vamos a organizarlo y explicarlo.
La lista de prioridad completa y generalizada (teniendo en cuenta lo que comentamos antes del origen) sería la siguiente:
- 1️⃣ Animaciones CSS (
@keyframes) - 2️⃣ CSS del desarrollador con
!important - 3️⃣ CSS del usuario con
!important - 4️⃣ CSS del navegador con
important - 5️⃣ Transiciones CSS (
transition) - 6️⃣ CSS del desarrollador
- 7️⃣ CSS del usuario
- 8️⃣ CSS del navegador
Una animación cuando está activa, tiene prioridad incluso por los estilos a los que les indicas un !important. Por otro lado, si estás realizando una transición, también tiene prioridad por el resto del CSS, sin embargo, se puede sobreescribir si utilizar un !important.
