Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Encuentre elementos obsoletos con resaltado de diagnóstico CSS

engo que admitir que soy un poco purista de códigos. En el fondo de mi corazón, me gustaría pensar que todos los desarrolladores que ayudan a este sitio darán la vuelta y producirán XHTML limpio y semántico al que aplicar su encantador y eficiente CSS. Pero ese no es siempre el caso. A veces las personas escriben código que no es semántico, ya sea que estén apurados o simplemente no lo sepan mejor. O, a veces, los diseñadores se encargan de rediseñar un sitio web que se construyó por primera vez durante el período neolítico.
De cualquier forma que lo corte, todavía hay un montón de código antiguo flotando por ahí, y puede ser un oso profundizar en todo ese HTML para encontrar los bits que podrían ser una buena actualización. Entonces, una vez más, ¡CSS viene al rescate! La técnica de la que hablo hoy a veces se llama "Diagnósticos CSS". Básicamente, solo está utilizando CSS para resaltar elementos y atributos específicos, específicamente, los que ni siquiera deberían estar allí en primer lugar.
Nuestro primer orden del día es decidir qué elementos le gustaría eliminar de su código. Podrías crear una lista de todas las etiquetas en desuso, pero la mayoría de los desarrolladores no usaron todas las etiquetas. Para nuestros propósitos, voy a buscar las etiquetas <font>, <center>, <s> (tachado), <u> (subrayado), <b> (negrita) y <i> (cursiva), que probablemente representan alrededor del 80% de las etiquetas en desuso que aún son comunes. Si quiero ver dónde se usan esas etiquetas en cualquier sitio web, todo lo que necesito hacer es aplicar un poco de CSS para que se destaquen:
fuente, centro, s, u, b, i {
 color: # 000;
 peso de fuente: negrita;
 color de fondo: # f99;
 borde: 3px sólido # c00; }
Y así, todas nuestras etiquetas obsoletas aparecen en negrita sobre un fondo rojo claro con un bonito y amplio borde rojo oscuro. Y suponiendo que ese no fuera su diseño de elección anterior (por favor, dígame que no fue su diseño de elección anterior), deberían destacarse en su sitio web como las grandes llagas rojas que son. :)
Y eso se encarga de nuestras etiquetas, pero ¿qué pasa con todos esos atributos obsoletos que podrían aplicarse a etiquetas perfectamente legítimas? Para eso, usaremos la magia de los selectores de atributos CSS (más sobre los que están aquí). Entonces, por ejemplo, si supiera que el desarrollador anterior del sitio que acabo de heredar le gustaba aplicar márgenes a sus etiquetas corporales usando “rightmargin”, “leftmargin”, etc., y también me encantaba esparcir “bgcolor” y Atributos de "fondo" como tantas semillas de manzana, podría escribir una regla como esta para eliminarlas:
cuerpo [margen inferior], cuerpo [margen izquierdo], 
cuerpo [margen derecho], cuerpo [margen superior],
* [fondo], * [bgcolor] {
 color: # 000;
 peso de fuente: negrita;
 color de fondo: # fc6;
 borde: 2px sólido # c60; }
Aquí estoy usando selectores de atributos para resaltar elementos con atributos particularmente desagradables. También estoy usando el selector universal (*) para encontrar todas las instancias de atributos que pueden aplicarse a múltiples tipos de elementos (como fondos). De esa manera, no tengo que escribir todas las combinaciones posibles de elementos y atributos bajo el sol. ¡Y así, podré cazar todo tipo de bits de código problemáticos! Puedes ver nuestros ejemplos de arriba en acción aquí.
Algunas palabras de precaución: cuando está haciendo este tipo de estilo, es importante aplicar estos estilos después de que se haya aplicado el resto de sus CSS. De esa manera, no sobrescribe accidentalmente partes de su CSS de diagnóstico con otras reglas más adelante. Para hacerlo, coloque sus reglas de diagnóstico en la parte inferior de sus archivos CSS, o cree un archivo completamente nuevo para sus reglas de diagnóstico y <enlace> después de su archivo CSS principal, o simplemente cópielas y péguelas en una etiqueta <style> si solo estás diagnosticando una o dos páginas.
Además, como se mencionó en el último artículo sobre los selectores de atributos, IE6 no los reconoce. Por supuesto, dado que estas son reglas puramente diagnósticas, eso no debería ser un gran problema ... solo asegúrese de ver su sitio web en un navegador moderno (Firefox, Opera, Safari, IE7 (si es necesario), etc.) al verificarlo por problemas Y realmente, si todavía está usando IE6 para todo su trabajo de diseño web, tiene problemas más grandes que resolver que solo una o dos etiquetas obsoletas aquí y allá. :)
Y, por último, este método de diagnóstico de compilación propia es excelente si sabe qué buscar, pero si prefiere una solución más única para todos sus problemas de diagnóstico, le sugiero que descargue una versión completa hoja de estilo de diagnóstico, como la que ofrece Neal Grosskopf aquí. Sin embargo, tenga en cuenta que su solución resaltará elementos y atributos que están técnicamente en desuso pero que todavía se usan comúnmente para buenos fines, como los atributos de "altura" y "ancho" en las imágenes. Puedo ser un purista de código, ¡pero todavía encuentro esos atributos muy útiles!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas