CSS Beautifier y formateador online
Formatee, desminifique y organice instantáneamente hojas de estilo CSS comprimidas o desordenadas en tiempo real. Nuestro formateador CSS de máquina de estado sangra con precisión consultas anidadas @media, @keyframes, variables CSS (--var), URL https:// y URI de datos SVG online, e incluye un minificador de CSS con un solo clic. cuando esté listo para enviar a producción.
Cómo embellecer y eliminar CSS online
- Pegue su CSS: Pegue su
.min.csscomprimido o su hoja de estilo desordenada en el editor Input CSS a la izquierda, o haga clic en Load Sample para probar consultas, variables y URL anidadas de@media. - Elija un ajuste preestablecido o personalice la configuración: Elija 2 Espacios, 4 Espacios, Limpiar y ordenar A–Z o Minificar (.min.css) desde la barra de ajustes preestablecidos rápidos, o ajuste la sangría, la ubicación de los tirantes, la división del selector y la compresión de color a la derecha.
- Inspeccionar estadísticas en vivo: Observe cómo los contadores Input, Output, Rules y Lines se actualizan inmediatamente a medida que escribe o alterna opciones.
- Copiar o descargar: Haga clic en Copiar al clipboard o Descargue .css para guardar su hoja de estilo formateada como
styles.beautified.css(ostyles.min.cssen modo Minify).
Opciones de optimización y formato CSS explicadas
| Opción | Qué hace | antes | después |
|---|---|---|---|
| Desminificar y sangrar | Expande reglas de una sola línea y bloques @media / @keyframes anidados con 2, 4 u 8 espacios o tabulaciones. |
@media(ancho máximo:768px){.box{ancho:100%}} |
@media (ancho máximo: 768 px) { |
| Un selector por línea | Divide las listas de selectores separadas por comas en líneas individuales mientras ignora las comas dentro de :is() o :not(). |
.btn, .card, .modal {...} |
.btn, |
| Comprimir valores de color | Convierte rgb() y códigos hexadecimales de 6 dígitos en códigos hexadecimales de 3 dígitos dentro de cualquier valor de declaración y al mismo tiempo conserva los tokens circundantes. |
Borde : rgb sólido de 1 px (255, 0, 0); |
Borde : 1px sólido #f00; |
| Ordenar propiedades (A–Z) | Alfabetiza las declaraciones dentro de cada bloque para estandarizar las revisiones de código y revelar propiedades duplicadas. | Índice z: 5; pantalla: flexible; alinear elementos: centro; |
alinear elementos: centro; |
¿Por qué utilizar una máquina de estados CSS Beautifier?
Muchos formateadores CSS online simples dividen el código en cada dos puntos (:), punto y coma (;) o llave (}). Ese enfoque falla tan pronto como su hoja de estilo incluye características CSS modernas como:
- Reglas anidadas y anidamiento CSS nativo:
@mediaLas consultas,@supportsLas consultas de funciones, las animaciones@keyframes, los bloques@layery los selectores secundarios anidados requieren un seguimiento de sangría de varios niveles. - URL externas y URI de datos SVG online: Propiedades como
fondo: url("https://...")ourl("data:image/svg+xml;utf8,contienen dos puntos y punto y coma que nunca deben dividirse como delimitadores de propiedades CSS.") - Cadenas de contenido de pseudoelemento: Declaraciones como
content: "Item: 1; Status: OK"mantiene intactos sus caracteres internos exactos y espacios en blanco. - W3C-Acortamiento preciso del color: Los colores con nombre solo se acortan cuando el equivalente hexadecimal es estrictamente más corto e idéntico en la especificación CSS (por ejemplo,
white→#fffyblack→#000, dejandogreencomogreenya que#008000es más largo y#0f0es en realidadlime).
Preguntas frecuentes
¿Cómo puedo desminificar un archivo .min.css online?
Pegue su código comprimido .min.css en el cuadro Input CSS a la izquierda. La herramienta analiza automáticamente selectores, declaraciones, consultas @media y @keyframes en CSS multilínea con sangría limpia en tiempo real.
¿Este CSS beautifier admite consultas @media, @keyframes y data: URI?
Sí. A diferencia de los formateadores simples basados en división, esta herramienta utiliza un analizador CSS de máquina de estado que conserva los bloques anidados (@media, @supports, @keyframes, @layer y anidamiento CSS nativo), así como los dos puntos y el punto y coma dentro. url("https://..."), data:image/svg+xml URI y cadenas content entre comillas.
¿Es seguro ordenar las propiedades CSS alfabéticamente?
La clasificación alfabética facilita el escaneo de reglas grandes y ayuda a detectar declaraciones duplicadas. Sin embargo, si una regla se basa en una propiedad abreviada seguida de una anulación más específica (o viceversa, como fondo-color frente a fondo), cambiar el orden de la declaración puede alterar qué propiedad gana. Habilite la clasificación cuando sus reglas no dependan del orden de anulación abreviada.
¿Puedo también minimizar CSS con esta herramienta?
Sí. Haga clic en el botón Minify CSS (o seleccione Minify (Single-Line .min.css) en el panel de configuración) para eliminar comentarios, espacios en blanco y puntos y coma finales y comprimir valores de color en una hoja de estilo de producción compacta.
¿Mi código CSS se carga en algún servidor?
No. Todo el formateo y minificación de CSS se ejecuta 100% localmente en tu navegador mediante JavaScript. Tus hojas de estilo nunca salen de tu computadora.