Cómo depurar CSS con las herramientas de desarrollo de su navegador

CSS no es un lenguaje de programación. Sin embargo, dependiendo de a quién le preguntes, te dirá que escribir un buen CSS a veces puede ser tan desafiante como escribir en lenguajes de programación como Java o JavaScript.

En este artículo, quiero mostrarte algunos trucos sobre cómo puedes depurar problemas CSS para resolverlos. Como buen desarrollador web, debe estar familiarizado con las herramientas de desarrollador de navegadores (por ejemplo, de Google Chrome), por lo que las usaremos.

Modo de estructura metálica

¿Tiene problemas de diseño? Tal vez un aspecto más parecido a una estructura de alambre te ayude a entender mejor tu diseño. La siguiente regla CSS hará que cada elemento tenga un fondo negro, un color de texto verde y un borde rojo. Puede agregar la regla en su hoja de estilos o directamente en su navegador. Dependiendo de su caso de uso, incluso puede mejorar esta regla. ¡No olvides desactivar esto en producción!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

Calcula las propiedades de estilo

Algunas herramientas de desarrollo del navegador (p. ej. Herramientas para desarrolladores de Chrome) le ofrece una vista que muestra las propiedades de estilo que se aplican a un elemento en particular. Aquí, también puede ver para cada propiedad de estilo donde se ha establecido.

Probar consultas CSS directamente en su navegador

A menos que no esté insertando estilos, debe crear bloques de declaración CSS válidos. A veces, los selectores CSS pueden volverse complicados de leer y escribir. Una forma rápida de verificar si los selectores CSS funcionan correctamente es buscar directamente en las herramientas de desarrollo de su navegador. Puede buscar selectores de texto y CSS.

Alternar estados de elemento

Ciertos elementos, como los campos de entrada, tienen un estilo cuando están enfocados. Otros elementos, como los botones, reaccionan al pasar el ratón sobre ellos. La mayoría de las herramientas de desarrollo de navegadores le permiten alternar estados de elementos como enfoque o desplazamiento. Sin embargo, si un oyente DOM está escuchando este evento, alternar el estado de un elemento generalmente no lanzará un evento que sería registrado por este oyente.

Conclusión

Deja una respuesta

Tu dirección de correo electrónico no será publicada.