FXBuilds Salte al contenido principal ↓

Herramientas basadas en la web para optimizar, formatear y verificar CSS

Las hojas de estilo pueden ser grandes muy rápidamente, tanto en términos de longitud como de tamaño de archivo. Para asegurarse de que sus páginas web funcionen de manera correcta y rápida, aquí hay una compilación de Algunos de los mejores optimizadores/compresores CSS gratuitos, formatorios de código y servicios de validación . Compruébalos y elige los que funcionan mejor para usted.

Optimización y compresión

Optimizador CSS

CSS Optimizer ¿Es un optimizador en línea simple que procesa su CSS actual y sale de la versión comprimida? archivo o ingresar directamente sus estilos. Es una herramienta simple que es "plug-and-chug": no hay opciones, por lo que el procedimiento de optimización seguirá siendo el mismo para todas sus entradas (excelente si desea estandarizar la configuración de compresión).

You have the option of linking to the URL of your stylesheet, uploading a CSS file, or directly inputting your styles. It’s a simple tool that’s “plug-and-chug” – there are no options, so the optimization procedure will remain the same for all your inputs (great if you’d like to standardize compression settings).

CSSS CSS

CSS CSS Se basa en el popular CSS Minifier, CSSTidy . You can set your desired compression level (the trade-off to higher compression is more difficult readability) and customize compression options.

Imprime un informe de línea por línea después para mostrarle exactamente lo que ha cambiado. Consulte también CSS Formatter and Optimiser, que utiliza una versión más reciente de csStidy (1.3DEV).

CSS Drive Gallery- CSS COMPRESOR

CSS Drive de la unidad || 248 CSS compressor tiene dos modos, regular mode and Avanzado Modo (que tiene algunas opciones más que puede establecer). Puede eliminar los comentarios (opción de comentarios de desprendimiento) o especificar para despojar los comentarios que exceden un cierto límite de caracteres, reteniendo así los comentarios que son cortos.

El modo regular es perfecto para aquellos que no son quisquillosos, simplemente elija entre la luz, la compresión normal y el súper compacto y está listo para rockear.

Optimiz de css Optimizer || 258

Online CSS Optimizer is another simple CSS optimization tool based on the CSS optimizer command-line application for OS X and Linux. You have two ways to input your CSS: either via the text box provided on the page or directly linking to your stylesheet. Sometimes you’ll find that you need to reverse the compression – you can do so by using the Uncompress CSS application on the site.

Compresor CSS

Otra popular herramienta de compresión CSS basada en Web es la fuente de compresión abierta de Robson || 262 CSS Compressor , (check out the CSS Compressor PHP source code).

Hay muchas opciones de compresión que puede establecer que se ocupe de colores, mediciones (unidades), reglas y propiedades CSS. El compresor CSS también proporciona una utilidad Combine útil para combinar y comprimir hasta tres archivos CSS separados.

Formateo

Formatcss

Formatcss Le permite pegar su código CSS válido CSS, correctando y estandarizando su código fuente. Hay varias configuraciones y reglas disponibles que puede aplicar para lograr el tipo de formato que desea, incluido el pedido de su CSS alfabéticamente, la desapitamiento de su código y algunas opciones para tratar con estilos.

PrettyPrinter.de

PrettyPrinter.de no se limita a CSS, también formatea Php, Java, C ++, C, Perl y JavaScript, por lo que es una "tienda de una pareja" de un Total de las UNA TODO DEL TODO DEL TODO. Establecer que incluya "Reducir el espacio en blanco", "Eliminar líneas vacías" y agregar automáticamente nuevas líneas después de los soportes rizados.

It has a total of 13 different options you can set including “Reduce Whitespace”, “Remove empty lines”, and automatically adding new lines after curly brackets.

Tabifier

Tabifier es una herramienta web múltiple diseñada específicamente para estandarizar las medidas en el código fuente. Admite HTML, CSS y estilo C. Es una herramienta simple, excelente para formatear rápidamente sus sangrías.

Validación y verificación

El servicio de validación CSS W3C CSS || 283

Perhaps the most common web-based validation service for CSS is the W3C CSS Validation Service .

It’s very simple to use, just enter the URL of your stylesheet and it will output the status of your stylesheet and point out errors, warnings and other issues.

Juicy Studio: CSS Analyzer

Juicy Studio CSS DISPONDIZADOR Combina el servicio de validación W3C de W3C con cheques adicionales de color (útil para el control de la visión). de medición utilizada en su código fuente. Puede ingresar el CSS a través de la URL o copiar su código en el cuadro de texto proporcionado en la página. El resultado es un desglose muy detallado de los errores y la advertencia sobre su CSS, similar al servicio de validación CSS W3C.

CSS REDUNDANCY CHECKER

CSS REDUNDANCY CHECKER es una herramienta simple para ver si tiene estilos redundantes que pueden estar combinados.

Estilos innecesarios y es una buena manera de verificar su trabajo. Es un proceso de tres pasos: simplemente vincule a su hoja de estilo, coloque algunas páginas que usen la hoja de estilo y presionen el botón "Verificar". La salida es una lista detallada de sugerencias y lugares donde puede reducir el código combinando estilos redundantes.

Si ha utilizado alguna de las herramientas anteriores, Comparta sus experiencias (buenas y especialmente malas) con nosotros en los comentarios . Dado que estos están automatizados y tienen métodos de procesamiento estándar, tenga cuidado con la precaución y use su propio juicio cuando use las salidas: las cosas pueden romperse mal, así que lo hagan Pruebe a fondo los resultados ! Si le gustó esta publicación, estas otras publicaciones también pueden ser interesantes para usted:

Haga que la estimación de los costos de diseño web sea fácil

Los costos de diseño del sitio web pueden ser difíciles de obtener. ¡Obtenga una estimación instantánea para un diseño web personalizado con nuestra calculadora de costos de diseño de sitio web gratuito!

Intente nuestra calculadora de costos de diseño web gratuito
TO TOP