Valores computados y de dónde viene cada uno
El panel de computados como fuente de verdad, cómo rastrear el origen de un valor hasta su declaración, y las tres etapas de valor que explican por qué el número que ves no es el que escribiste.
El panel de estilos te dice qué reglas coinciden; el de computados te dice qué valor tiene realmente cada propiedad después de todo. Cuando los dos parecen contradecirse, no hay contradicción: hay una etapa del cálculo que no estás teniendo en cuenta. Entender esas etapas, y saber pedirle al inspector que te enseñe la cadena completa de un valor, convierte los bugs de tipo “esto debería ser rojo y es gris” en una consulta de diez segundos.
- Distinguir valor especificado, computado y usado, y saber cuál muestra el inspector.
- Rastrear el origen de un valor computado hasta la declaración que lo produjo.
- Resolver custom properties y ver el valor real detrás de un
var(). - Reconocer los tres casos en que el computado no coincide con ninguna declaración visible.
Tres valores, no uno
Una propiedad CSS pasa por varias etapas antes de convertirse en píxeles, y confundirlas es el origen de la mitad de las sorpresas.
El valor especificado es lo que escribiste: width: 50%, font-size: 1.5em, color: var(--texto).
El valor computado es el resultado de resolver todo lo que se puede resolver sin conocer el layout: se resuelven las palabras clave relativas, se convierten las unidades relativas a la tipografía en píxeles absolutos, se sustituyen las custom properties, se aplica la herencia. 1.5em sobre un padre de 16 píxeles computa a 24px. color: var(--texto) computa al color concreto.
El valor usado es el definitivo, después del layout: es donde width: 50% se convierte en 320px y donde height: auto se convierte en un número.
El panel de computados muestra normalmente el valor usado para las propiedades de geometría y el computado para el resto, y esa es exactamente la información que quieres: el número real. Por eso es la fuente de verdad cuando hay duda, y por eso el flujo correcto de diagnóstico es siempre mirar computados primero y estilos después.
Esta distinción explica también algo que desconcierta a mucha gente: si en el panel de estilos ves width: 50% y en computados ves 320px, no hay ningún conflicto. Es la misma declaración en dos etapas.
Rastrear el origen
La función más útil del panel de computados es la que menos se usa: desplegar una propiedad para ver todas las declaraciones que intentaron establecerla, ordenadas por victoria, con enlace al fichero y la línea de cada una.
Ante un margin-top que no debería estar ahí, desplegarlo lista todas las reglas que declararon margin-top en ese elemento, cuál ganó y de dónde viene. Un clic te lleva al fichero. Eso sustituye por completo a buscar margin-top en el proyecto, que es lo que hace la mayoría de la gente y que en un proyecto grande con CSS generado no lleva a ninguna parte.
Hay que tener en cuenta una casilla que suele estar desactivada: por defecto el panel oculta las propiedades que tienen su valor por defecto, y solo muestra las que alguien ha establecido. Al activar la opción de mostrarlas todas aparece el catálogo completo, que es lo que necesitas cuando sospechas de una propiedad que nadie ha tocado —un overflow, un min-width, un isolation— porque su valor inicial es precisamente el que causa el problema.
Resolver custom properties
Las custom properties introducen una indirección que el panel de estilos no resuelve por sí sola: ves color: var(--texto-tenue) y no sabes qué color es eso ni de dónde sale.
Hay tres formas de resolverlo y conviene conocer las tres porque responden a preguntas distintas.
El valor final: mirar color en computados. Te da el color real, sin decirte de dónde viene.
El valor de la variable: pasar el puntero sobre el var() en el panel de estilos muestra el valor resuelto en una ventana emergente. En los inspectores actuales, además, el nombre de la variable es un enlace que lleva a la regla donde se declaró.
La cadena completa: seleccionar el elemento y buscar la propiedad personalizada en computados. Las custom properties aparecen en la lista de computados como cualquier otra propiedad, con su valor resuelto en ese elemento. Eso es lo que necesitas cuando el token se redefine en varios niveles y quieres saber cuál gana en este elemento concreto, que no tiene por qué ser el mismo que gana en su hermano.
Y una comprobación rápida desde la consola, útil cuando quieres verificar varios elementos a la vez:
getComputedStyle(elemento).getPropertyValue('--texto-tenue').trim();Si --texto-tenue no está declarada en ningún ancestro, la declaración color: var(--texto-tenue) es inválida en tiempo de computación y color toma su valor heredado. En computados verás un color perfectamente válido que no corresponde a ninguna declaración de ese elemento. La pista es que el panel de estilos muestra la declaración tachada; la confirmación es que en computados el valor coincide con el del padre.
Los tres casos en que el computado no viene de ninguna declaración visible
Cuando el valor computado no corresponde a ninguna regla del panel de estilos, siempre es uno de estos tres. Vale la pena tenerlos memorizados porque cubren prácticamente todos los casos.
Herencia. El valor viene de un antepasado. Se confirma en la sección de propiedades heredadas del panel de estilos, o subiendo por el árbol y comparando computados. Ocurre con color, font, line-height, visibility, text-align, letter-spacing y las custom properties, entre otras.
El valor inicial. Nadie ha declarado nada y la propiedad tiene su valor por defecto, que a menudo no es el que la intuición sugiere. min-width de un elemento flexible es auto, no 0, y eso produce el bug más famoso de Flexbox. background-color es transparent, no blanco. position es static, lo que significa que top no hace nada.
La hoja de estilos del agente de usuario. El navegador tiene su propia hoja y sus reglas aparecen en el panel, normalmente al final y a menudo colapsadas o filtradas por defecto. Los márgenes de los encabezados, el display: block de un div, el font-family monoespaciada de pre, los estilos de los controles de formulario. Si algo tiene un margen que nadie ha puesto, mira ahí.
Las advertencias que el inspector te da gratis
Además de los valores, los inspectores modernos señalan activamente varias cosas que merecen atención inmediata.
Declaraciones sin efecto. Firefox marca las declaraciones inactivas con un icono y explica el motivo en una frase. Es la función de depuración de CSS con mejor relación entre esfuerzo y resultado que existe, y basta con abrir la página en Firefox cuando estás atascado, aunque desarrolles en otro navegador.
Contraste insuficiente. Al abrir el selector de color de una declaración de color de texto, el inspector muestra la relación de contraste con el fondo calculado y si cumple los umbrales. También hay una línea en el propio selector que indica hasta dónde puedes bajar la claridad sin incumplir.
Propiedades desconocidas. Una errata en el nombre de una propiedad no produce ningún error visible en la página; en el panel aparece con un icono de advertencia. Merece la pena mirar el panel de un componente nuevo aunque parezca que funciona, porque las erratas en propiedades poco frecuentes pasan desapercibidas durante meses.
Hay una estructura común a todos los bugs de CSS y verla explícitamente cambia la forma de trabajar. Un bug siempre significa que dos afirmaciones tuyas no pueden ser ciertas a la vez: “esta declaración se está aplicando” y “esta declaración produce este efecto”. El panel de computados existe para decidir cuál de las dos es falsa, y esa decisión parte el espacio de búsqueda en dos mitades que se investigan de formas completamente distintas. Si la declaración no se está aplicando, el problema es de cascada: selector, especificidad, capa, orden, validez, herencia; se resuelve en el panel de estilos y casi nunca requiere entender el layout. Si la declaración sí se aplica y aun así el resultado no es el esperado, el problema es de modelo: has escrito algo que significa una cosa distinta de la que creías en ese contexto —width en un elemento flexible, height en porcentaje sin altura de referencia, position: absolute respecto a un bloque contenedor que no es el que pensabas— y se resuelve entendiendo qué manda sobre esa caja. La razón por la que tanta gente pierde tiempo depurando CSS es que empieza a probar cambios antes de hacer esa partición, con lo que está buscando en las dos mitades a la vez y sin saber en cuál está. Hacer la pregunta primero cuesta diez segundos y elimina la mitad del espacio de búsqueda; es, literalmente, el paso uno del método y es el único que nunca se puede saltar.