Sugerencias de Herramientas para desarrolladores: Descubre problemas de CSS

Sofia Emelianova
Sofia Emelianova

¿Alguna vez aplicaste CSS a un elemento, pero no funcionó?

Con las Herramientas para desarrolladores de Chrome, puedes descubrir los problemas de CSS de un vistazo, depurarlos y probarlos.

Mira el video para aprender cómo el panel Elementos > Estilos destaca varios problemas de CSS:

  • Advertencia. Propiedad con sintaxis no válida

  • Casilla de verificación. Propiedad anulada

  • Casilla de verificación. Propiedad inactiva Información.Con una sugerencia.

  • Se heredó de parent

    • Casilla de verificación. Propiedad heredada
    • Casilla de verificación. Propiedad no heredada
  • Casilla de verificación. Propiedad de abreviatura expandible Expandir.

    • Casilla de verificación. Propiedad de formato largo anulada
    • Casilla de verificación. Propiedad de escritura manual activa

hoja de estilo del usuario-agente

  • Propiedad no editable
  • Propiedad anulada no editable

Más sugerencias de depuración:

  • Usa el filtro del panel Estilos para enfocarte en la propiedad que te interesa.
  • Usa el panel Cálculo para ver todos los ganadores de Cascade y sus valores calculados.
  • En el panel Cálculo, expande una propiedad y haz clic en un vínculo para encontrar su fuente en el panel Estilos.

Para obtener más información sobre todas las formas en que DevTools destaca los problemas de CSS, consulta Cómo encontrar CSS no válido, anulado, inactivo y otros.

Para mejorar tus conocimientos sobre CSS, consulta Aprende CSS.

Para aprender a crear sitios web que se vean bien y funcionen bien para todos, consulta Aprende sobre el diseño responsivo.