11 Herramientas útiles para comprobar, limpiar y optimizar su archivo css

Reducir al mínimo el tamaño del archivo de la hoja de estilo CSS ha sido considerada por muchos como una buena manera de aumentar la velocidad de carga del sitio. De hecho, al reducir el archivo CSS por varios kilobytes, el servidor va a tomar un tiempo más corto para cargar y resultar en una página web más rápido.

En el caso de que sus artículos lleguen al portada de Digg, esto también podría ser uno de los pocos factores decisivos (hay muchos más) si el servidor se bloqueará o no.

Algunos de los métodos más comunes que se utilizan para minimizar / Optimizar una hoja de estilo CSS implica eliminar selectores no utilizados, los espacios en blanco no deseados, pestañas, comentarios y cambiar la declaración manuscrita de taquigrafía anotaciones.

Yo sé que algunos de ustedes aquí no son conocedores de la tecnología suficiente para editar su propio código CSS, así que aquí os proporcionaré algunas de las herramientas útiles que se pueden utilizar para optimizar el código CSS, incluso si tiene completamente sin conocimiento de CSS.

Consulte el código CSS

W3C CSS Validador

El validador CSS del W3C es una herramienta que se puede utilizar para validar su CSS. Usted puede descargar el validador de Java en su ordenador y utilizarlo fuera de línea, o utilice el formulario en línea para comprobar su código CSS.

Validador CSS Firefox Add-On

Para hacerlo más fácil para que usted pueda validar el código CSS, existe esta extensión para Firefox - Validador CSS - que se puede instalar en su navegador. Una vez instalado, puede fácil y rápidamente comprobar su código con un clic derecho del ratón.

CSSCheck

A pesar de que el código CSS se valida, esto no significa que esté libre de error. La validación sólo significa que cumple con los estándares CSS establecidos por el W3C. Si desea validar, así como mirar en algunos problemas de compatibilidad del navegador con la hoja de estilos, a continuación, CSSCheck es una buena herramienta para usted.

Analizador CSS

CSS Analyzer es una herramienta útil que le permite validar su hoja de estilo contra el estándar del W3C, realizar una prueba de color de contraste, y una prueba para asegurarse de que los tamaños de las mismas se especifican en unidades relativas de medición.

Vídeo: Creación y vinculación hoja de estilos CSS a un documento HTML

En caso de que se preguntan, la prueba de color de contraste es comprobar que las combinaciones de colores frontal y de fondo proporcionan suficiente contraste para que sean percibidas por personas con deficiencias de color, o cuando se ve en una pantalla en blanco y negro.

Limpiar su código CSS

Dust-Me selectores

Polvo-Me selectores es una extensión para Firefox que encuentra selectores CSS no utilizados en la página que está viendo. Al probar las páginas subsiguientes del mismo dominio, el resultado es cotejará con los datos anteriores y todos los selectores se encuentran tachados de la lista. Se puede utilizar para probar las páginas individuales o conseguirlo a la araña todo el sitio.

Al final, obtendrá un informe sobre los selectores que no se utilizan en cualquier parte del sitio. A continuación, puede eliminar los selectores de la hoja de estilos (código de menor tamaño de archivo más pequeño significa).

Redundancia CSS del inspector

Al igual que en Polvo-Me selectores, esta herramienta comprueba su sitio para selectores CSS sin usar y redundantes. La única cosa que es diferente es que es necesario introducir manualmente la dirección URI para cada página que desea probar.

Optimizar y comprimir el código CSS

Una vez que haya completado la comprobación de la validez de su CSS y limpiado el código innecesario, es el momento de optimizar el archivo CSS y reducirla al tamaño más pequeño posible.

CSS Tidy

CSS Tidy es un software de código abierto que se puede utilizar para optimizar y comprimir el archivo CSS. Está disponible en formato .exe (sólo Windows) y un formato de script php con cremallera (todas las plataformas, para los desarrolladores web). Lo CSS Tidy hace es eliminar todo el comentario, espacios en blanco innecesarios y cambiar algunos de los códigos de taquigrafía. Durante la compresión, se puede elegir entre la legibilidad del código o la compresión máxima. Dependiendo de la longitud de su código, se puede lograr fácilmente una relación de compresión de hasta el 30% o más.

Desde CSS Tidy es un proyecto de código abierto, ha habido varios sitios web que utilizan el código y lo convirtió en una herramienta en línea para la gente a usar. Éstos son algunos de ellos:

• CSS LIMPIEZA
• código Beautifier
• De CSS y optimizador de Portal CSS

Vídeo: Personalización de plantillas de Wordpress: Truco para editar CSS

Otros optimizadores CSS

FlumpCakes CSS Optimizer

Un simple optimizador que viene con varias opciones para que usted pueda elegir.

Vídeo: Estilos CSS guardados en tiempo real - Con google Chrome

Robson CSS Compresor

Si bien puede parecer lo mismo que los demás, he encontrado que la tasa de compresión para Robson CSS Compresor para ser el más alto entre todos ellos. A pesar de que viene con varias opciones para que pueda ajustar la configuración, dejando todas las opciones intactas (todas las opciones marcadas) siempre produce el mejor resultado.

Compresor CSS CSS Drive

El compresor CSS ofrecido por CSS Drive viene en dos modos que se pueden utilizar: normal y avanzado. En el modo normal, sólo tiene que seleccionar el nivel de compresión que desea (luz, Normal o Super Compacto) y el compresor CSS hará el resto. En el modo avanzado, se le da más opciones y una mayor voz en cómo quiere que su hoja de estilo para ser optimizado.

CSS Optimizer

El optimizador de CSS de mabblog.com es una aplicación de línea de comandos para Mac y Linux. Está dirigido a aquellos que se sienten más cómodos con el terminal en lugar de una interfaz en línea. También hay una sencilla versión en línea disponible para aquellos que quieren obtener rápidamente una vez y hecho con.

Con suerte las herramientas mencionadas aquí son suficientes para que usted pueda ajustar y optimizar su hoja de estilos CSS. Si ha utilizado otras herramientas que son más útiles que los mencionados anteriormente, compartirlas con nosotros en los comentarios.