Output will appear here...Un formateador CSS lee una hoja de estilo y la reescribe con espacios, sangrías y saltos de línea consistentes para que sea fácil de leer y mantener. Analiza el CSS en su estructura subyacente de reglas, selectores, declaraciones, reglas at y comentarios, luego imprime esa estructura nuevamente usando un diseño predecible: una declaración por línea, un espacio único después de cada dos puntos y cada bloque anidado sangrado un nivel más profundo que su padre. Las reglas de estilo siguen siendo idénticas, pero un archivo que llegó como una línea larga e ininterrumpida se convierte en algo que realmente puedes escanear y editar.
La misma herramienta funciona a la inversa como un minificador CSS. Minifying elimina cada espacio, pestaña, salto de línea y (opcionalmente) comenta que un navegador no necesita, colapsando la hoja de estilo al equivalente más pequeño byte por byte. Una hoja de estilo de 6 KB bien formateada a menudo cae por debajo de 4 KB una vez que se acaban los espacios en blanco, lo que significa menos bytes en la red y una primera pintura más rápida. Embellecer mientras escribes y depuras; Minifica la copia que envías a producción.
Este formateador comprende las partes de CSS que activan scripts ingenuos de búsqueda y reemplazo. Las reglas at anidadas como @media y @supports mantienen sus reglas internas sangradas correctamente, los bloques @keyframes con pasos porcentuales se conservan, las cadenas literales en el contenido y los valores de url() se dejan exactamente como están escritos y los comentarios se mantienen o eliminan a pedido. Todo se ejecuta completamente en su navegador, por lo que su hoja de estilo, incluidos los tokens de diseño propietarios o los nombres de clases internos, nunca se carga y la herramienta sigue funcionando después de que la página se ha cargado incluso sin conexión.
Pegue o escriba una hoja de estilo en el área de entrada. Minified, escrito a mano o exportado CSS, todo el trabajo, incluidos archivos con @media, @keyframes y comentarios.
Haga clic en Embellecer para volver a sangrar el CSS para leer o Minificar para eliminar espacios en blanco para el envío. Elija 2 espacios, 4 espacios o pestañas para embellecer el diseño.
El CSS formateado aparece a la derecha con una insignia de tamaño que muestra el cambio de byte. Cualquier aviso de análisis, como un aparato ortopédico no cerrado, se enumera como advertencia.
Copie la salida a su portapapeles o descárguela como un archivo.css, listo para colocarlo en su proyecto o proceso de compilación.
Una herramienta vuelve a sangrar CSS para leerlo y lo vuelve a desmontar para su envío, por lo que nunca necesitará dos utilidades separadas
Identifica correctamente las reglas dentro de @media, @supports y @keyframes en lugar de aplanarlas o destrozarlas
Deja intacto el contenido de las cadenas citadas y los valores de url(), por lo que los URI de datos y texto del contenido sobreviven al formato intacto
Formatee con dos espacios, cuatro espacios o pestañas para que coincidan con el estilo de su proyecto o la configuración del editor
Format, validate, and minify JSON data
Validate YAML syntax and convert to JSON format
Minify CSS to cut file size or beautify minified stylesheets for debugging
Format messy SQL into readable, indented queries or minify SQL to a single line
0 comments
No comments yet. Be the first to share your thoughts!