-
=
- Inicio
- Blog
- Diseño web Herramientas basadas en la web para optimizar, formatear y verificar CSS
Herramientas basadas en la web para optimizar, formatear y verificar CSS
-
6 min. Leer
-
William CraigCEO y cofundador
- Presidente de WebFX. Bill tiene más de 25 años de experiencia en la industria de marketing en Internet especializados en SEO, UX, arquitectura de la información, automatización de marketing y más. Los antecedentes de William en informática y educación científica de Shippensburg y MIT proporcionaron la base para Revenuecloudfx y otros proyectos clave de investigación y desarrollo en WebFX.
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:
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for RevenueCloudFX and other key research and development projects at WebFX.
-
WebFX es una agencia de marketing de servicio completo con más de 1,100 revisiones de clientes y una calificación de 4.9 estrellas en el embrague. ¡Descubra cómo nuestro equipo de expertos y tecnología de aceleración de ingresos pueden generar resultados para usted! Aprenda más
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 gratuitoCalculadora de diseño web
Use nuestra herramienta gratuita para obtener una cotización gratuita e instantánea en 60 segundos. || ALVER Estrategias
View Web Design CalculatorProven Marketing Strategies
Facilitar los costos de diseño web fácil
Los costos de diseño del sitio web pueden ser difíciles de clavarse. ¡Obtenga una estimación instantánea para un diseño web personalizado con nuestra calculadora de costos de diseño de sitio web gratuito!
Pruebe nuestra calculadora de costos de diseño web gratuito