4 técnicas simples para depurar y arreglar rápidamente su código CSS en casi cualquier navegador

4 técnicas simples para depurar y arreglar rápidamente su código CSS en casi cualquier navegador

Ha diseñado el diseño perfecto para su nuevo y próximo sitio web. Pero ahora convertir todo ese hermoso archivo PSD de Photoshop en capas en un código perfecto de píxeles es la parte desafiante. No es un desafío porque no sepa codificar, sino más difícil porque diferentes navegadores renderizan su código de manera diferente, incluso cuando está utilizando un código CSS completamente válido para mostrar ese increíble código semántico HTML5 que ha escrito. Esto es aún más frustrante cuando la corrección de un error en un navegador ahora se convierte en un nuevo error en otro navegador. Incluso si eso no es un desafío, ahora imagine que se le asigna arreglar el código de otra persona que está en todo el lugar. A menudo, este último caso es el que te hace tirar del pelo y decir numerosos WTFs antes de comprender completamente lo que está sucediendo en su código, porque probablemente conoces toda tu hoja de estilo de memoria y este nuevo código no está cerca de ninguna convención de codificación. Sin embargo, el momento de depurar y ensuciar ese código CSS es mucho más simple y menos frustrante que antes, gracias a estas herramientas y técnicas muy simples.

1) Inspect Element Tool

Inspect element es, con diferencia, la mejor herramienta para comenzar a depurar cualquier CSS. Si está desarrollando sitios web, entonces necesita el conjunto correcto de herramientas de desarrollo web. Y afortunadamente, Inspect Element ahora está integrado de forma nativa con todos los navegadores web modernos como parte de sus herramientas de desarrollo. Esta herramienta le permite seleccionar el elemento específico de la página que desea corregir e inmediatamente ver qué reglas CSS se aplican a ese elemento que hace que el elemento seleccionado se muestre de esa manera. Todo lo que tiene que hacer es hacer clic con el botón derecho y seleccionar «Inspeccionar elemento» en el menú contextual.

Ahora tiene acceso visual completo a todas las reglas que se calculan para ese elemento. Si no ha seleccionado el elemento correcto, simplemente puede hacer clic en la fuente y señalar el elemento exacto que desea diagnosticar. Como puede ver en la captura de pantalla anterior, ahora puede modificar sus reglas CSS. Usando la casilla de verificación en el lado izquierdo de cada propiedad CSS, puede alternar esa propiedad, o incluso hacer clic en la propiedad y cambiar su valor, o incluso presionar la tecla enter y agregar nuevas reglas para su elemento. Aún más sorprendente es la facilidad con que es posible depurar un pase estado de un elemento, simplemente abriendo el menú desplegable junto al elemento seleccionado y elija :hover estado. Como puede ver en el panel derecho, esta increíble herramienta incluso le muestra el archivo de hoja de estilo y el número de línea de la regla CSS que se está ejecutando en esta página. Por otra parte, es más comprensible para entender por qué nuestro elemento tiene un 10px relleno superior e inferior en lugar de 5px, porque la regla en la línea 1026 de estilo.css de nuestra consulta de medios CSS sobrescribe la regla antigua en la línea 916 del mismo archivo. Incluso es posible ver el modelo de caja del elemento seleccionado con sus dimensiones actuales sin usar una regla o herramienta de medición de terceros. Tener esta gran cantidad de información ahora hace que nuestro trabajo de depuración sea mucho más fácil. Supongamos que el campo de formulario de correo electrónico de su hoja de estilo no es similar a otros elementos de entrada y se pregunta cómo podría resolver esto. Inspeccione ese elemento y descubra que, debido a que está utilizando los nuevos tipos de campos de entrada HTML5, el diseñador de temas no ha incluido ninguna regla CSS para input, por lo que agrega este selector a la hoja de estilos.

input,input{ border: 1px solid #ccc;}

Google Chrome también tiene herramientas de desarrollo similares que habilitan las mismas funciones. Incluso es posible cambiar el modo de depuración a la resolución de pantalla de un dispositivo que le gustaría probar su diseño y averiguar cómo se comporta el CSS de media queries en esas condiciones.

Estas herramientas para desarrolladores tienen capacidades muy potentes, incluso más allá del desarrollo de CSS, como la inspección DOM, la creación de perfiles de JavaScript, la consola de JavaScript, las herramientas de monitoreo de recursos y todo otro conjunto de características que necesitan su propia sección de tutoriales más allá de este artículo. Como se puede ver en la imagen de arriba, en las herramientas para desarrolladores de Chrome, incluso es posible emular diferentes agentes de usuario del navegador, o incluso emular eventos táctiles como deslizar. Con estas herramientas, ni siquiera necesita depurar activamente su CSS en el navegador móvil de su teléfono inteligente, al menos hasta cierto punto.

Qué herramientas de desarrollador del navegador es la mejor es una pregunta que descubrirás experimentando. Al final del día, todo depende de lo que esté tratando de lograr y si ese conjunto de herramientas le permite llegar a su objetivo final. Yo personalmente uso todas estas herramientas a mi favor. Cada uno tiene algo que me gusta y me resulta útil cuando quiero depurar mi código. Por ejemplo, encuentro útil la pequeña representación de color cuadrado de los colores hexadecimales junto a las propiedades de color CSS, aunque puedo procesar el color RGB en mi cabeza y obtener una visualización aproximada del paladar de colores, estas pequeñas diferencias me hacen alternar entre estas herramientas de desarrollador.

Firebug

Firebug fue una de las primeras herramientas que proporcionó la función inspector. Es una de las herramientas de desarrollo web más populares, con casi 3 millones de usuarios diarios promedio. En el momento de escribir este artículo, las herramientas de depuración CSS de Firefox son lo suficientemente adecuadas para que no use Firebug, sin embargo, para la depuración de JavaScript en Firefox todavía uso Firebug.

Miedo de IE7? No lo seas más

Puede que te sorprenda, pero Internet Explorer incluso tiene la función Inspeccionar elemento (Ctrl+B) en sus herramientas para desarrolladores (F12). Aunque no es tan amigable como las herramientas para desarrolladores de otros navegadores, esta característica incorporada en Internet Explorer 9 es muy útil para probar sus diseños en el modo emulado IE7 e IE8. En los días en que ninguna de estas herramientas para desarrolladores estaba disponible para depurar navegadores IE antiguos, esta segunda técnica generalmente era muy útil.

2) Depurar en Estilo

Aunque Inspect Element es bueno, a veces no tiene acceso a esa herramienta, como los navegadores móviles, o desea ajustar el estilo de un par de elementos en la página en lugar de uno específico. Me encanta conocer los límites del elemento que estoy diseñando, por lo que sé si hay desbordamientos, problemas flotantes, etc. Por esa razón agrego un color de fondo brillante y notable al elemento activo que estoy diseñando y saco el color de fondo una vez que se realiza el estilo. A veces, voy y vengo ajustando estos elementos, así que simplemente muevo el código de depuración al final de mi hoja de estilo y lo comento, y lo descomento una vez que lo necesito de nuevo. De esta manera, puedo cambiar rápidamente el modo de depuración y ver cómo se coloca cada elemento en la pantalla.

Que resulta en …

Para este ejemplo, acabo de agregar código de depuración a los elementos del bloque de estructura principal de mi página. Ahora puedo decir dónde comienza cada publicación y cuánto espacio hay entre cada publicación o elemento de widget en mi barra lateral, y si quiero agregar un espacio entre la barra lateral y el contenido principal, puedo verlo visualmente en colores brillantes.

También es posible lo contrario, al definir una serie de reglas de depuración y agregar esa clase a cualquier elemento que queramos ver. Por ejemplo, arriba he definido una nueva clase llamada debug con el siguiente código.

.debug{ border:1px solid red; }

y siempre que quiera depurar cualquier elemento, simplemente agrego clase de depuración a ese elemento.

<div class="foo debug">Div element with foo and debug classes</div>

3) Depurar CSS usando JavaScript

Esta técnica es muy similar a la anterior, sin embargo, a veces, por algunas razones extrañas, sucede que la situación anterior no es factible. Este es un fragmento de código jQuery que nos ayuda al aplicar la clase de depuración al elemento foo, o incluso agregar CSS directamente al elemento bar en este caso.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

Esta situación puede ocurrir muy raramente, pero sé que he utilizado esta técnica en el pasado, por lo que es bueno saberlo.

4) Conozca la cascada

Algunos problemas de CSS son tan comunes como los flotadores de limpieza que caerá en esa trampa una vez, y la próxima vez que encuentre algo similar, sabrá qué causó el problema y cómo solucionarlo. En general, la mayoría de los problemas de CSS son fáciles de resolver si sabes cómo las reglas CSS se anulan entre sí. Por ejemplo, selectores más específicos anularán los más generales, o el selector de ID anula el selector de clase, o la declaración !important tiene prioridad sobre una declaración normal. Conocer la Cascada le ayudará a resolver el código de las Hojas de estilo en cascada más rápido.

Aquí hay un ejemplo directamente de la especificación W3C sobre cómo funciona la especificidad del selector.

Algunos ejemplos:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

En el ejemplo anterior, el color del elemento P sería verde. La declaración en el atributo «style» anulará la del elemento STYLE debido a la regla 3 en cascada, ya que tiene una especificidad más alta. Si cree que este ejemplo es difícil de entender, consulte este artículo sobre el orden de precedencia de CSS.

Notas finales

Lograr resultados perfectos en píxeles es difícil debido a las diferentes representaciones de diferentes navegadores. Algunos navegadores antiguos no admiten CSS3 o HTML5 completos, así que compruebe el proyecto comunitario HTML5Please para ver si la sintaxis que está intentando utilizar es compatible con la mayoría de los navegadores. Sin embargo, opcionalmente puede usar complementos o rellenos múltiples para proporcionar características faltantes para navegadores que no admiten la implementación completa de CSS3 o HTML5.

Deja una respuesta

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