CSS
Métodos para depurar cascada, layout y rendering, aplicar feature queries con @supports y gestionar compatibilidad mediante progressive enhancement.
Depurar CSS consiste en seguir el proceso real: coincidencia del selector, cascada, valor calculado, sizing, layout, paint y entorno.
¿la regla coincide?
↓
¿la declaración es válida?
↓
¿gana la cascada?
↓
¿el valor se resuelve como esperas?
↓
¿el algoritmo de layout permite el resultado?En DevTools revisa:
El source del componente puede no coincidir con el DOM producido por el framework.
Una declaration puede perder por:
La regla tachada sí coincide; simplemente no gana.
Puede significar:
La pestaña computed muestra el valor calculado y permite rastrear su origen.
width: 50%;Puede aparecer todavía como porcentaje o resolverse según la herramienta y etapa. Compara también la geometría final.
Activa overlays de Grid, Flexbox, scroll containers y container queries. Permiten ver:
Aísla:
Después añade restricciones hasta reproducir el fallo.
Un caso mínimo distingue bug del navegador, regla de CSS y comportamiento del framework.
* {
outline: 1px solid rgb(255 0 0 / 0.15);
}Útil localmente para cajas. No lo dejes en producción ni confundas outline con dimensiones reales.
.debug {
background: rgb(255 0 0 / 0.08);
}Busca el elemento que supera el viewport:
[...document.querySelectorAll('*')].filter(
element => element.getBoundingClientRect().right > document.documentElement.clientWidth
);Después revisa:
No resuelvas todo con overflow-x: hidden.
.card-list {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.card-list {
display: grid;
}
}Feature queries comprueban si el navegador acepta una declaración, no si la implementación carece de bugs o cubre todo el caso.
@supports selector(:has(*)) {
.field:has(:invalid) { ... }
}@supports
(display: grid) and
(container-type: inline-size) {
/* ... */
}También existen or y not. Usa paréntesis claros.
.card {
background: #6b46c1;
}
@supports (background: oklch(50% 0.2 280)) {
.card {
background: oklch(55% 0.2 285);
}
}El fallback debe ser funcional, no una versión rota que solo sirve para navegadores antiguos ignorados.
En muchos casos basta declarar lo antiguo antes:
color: rgb(105 70 193);
color: oklch(55% 0.2 295);Utiliza @supports cuando necesitas cambiar un conjunto de reglas o evitar una interpretación parcial.
Baseline ayuda a saber cuándo una feature está disponible de forma interoperable en navegadores principales.
No responde por sí solo:
Combínalo con analytics, browserslist y pruebas.
Una configuración puede expresar el público objetivo para herramientas:
> 0.5%
last 2 versions
not deadNo copies una query sin conocer producto, países, dispositivos y políticas corporativas.
Añade prefijos necesarios según Browserslist. No polyfillea algoritmos de layout ni convierte una feature nueva en otra antigua.
display: grid;No se vuelve compatible con cualquier navegador únicamente por prefijos.
Un transformador puede convertir sintaxis, pero debe preservar comportamiento.
Distingue:
No toda feature puede transformarse de manera equivalente.
Herramientas pueden detectar:
Stylelint y reglas propias complementan revisión; no comprueban automáticamente el layout final.
Capturas automatizadas ayudan a detectar diferencias, pero necesitan:
Una captura correcta no demuestra teclado, reflow o semántica.
Incluye:
Un buen reporte incluye:
¿Por qué @supports (display: grid) no garantiza que un layout Grid específico esté libre de bugs?
Porque solo comprueba que el navegador reconoce la propiedad y el valor; no valida cada parte del algoritmo ni la combinación concreta del diseño.
Modelo mental completo de CSS conecta cascada, valores, layout, adaptación, movimiento y arquitectura.