Embellece CSS minificado en reglas legibles, una declaración por línea, sin cambiar lo que hace el CSS. Usa el mismo formateador que CSS Formatter.
Qué hace
CSS Beautifier convierte CSS minificado en un código que se puede leer. Una hoja de estilos comprimida en una sola línea, como sale de un paso de compilación o aparece en la pestaña Red (Network) de un navegador, se convierte en un bloque por regla, una declaración por línea y una sangría que sigue el anidamiento, de modo que puedes recorrerla, buscar en ella y revisarla.
Funciona exactamente igual que CSS Formatter, con el mismo motor y las mismas reglas. La herramienta cambia cómo se escribe el CSS, no lo que selecciona ni lo que define. Usa esta página cuando el problema sea un CSS difícil de leer, y CSS Formatter cuando ya sea legible y quieras un estilo coherente.
Qué admite
- CSS minificado, CSS en una sola línea y CSS con sangría irregular. Solo CSS estándar, incluidas at-rules como @media, @font-face, @keyframes, @layer y @page, y el anidamiento nativo de CSS que admiten los navegadores.
- El diseño se rehace desde cero y algunas grafías se uniformizan: colores hexadecimales y nombres de propiedades en minúsculas, comillas simples cambiadas por comillas dobles, el espaciado dentro de los valores y un punto y coma tras la última declaración de un bloque. Un valor con varias partes separadas por comas, como una lista de transiciones, puede quedar con una parte por línea.
- Los números se reescriben, así que el resultado puede no coincidir dígito a dígito con tu entrada: 0.50px pasa a 0.5px, 10.0 pasa a 10, .5 pasa a 0.5 y 1E3 pasa a 1e3. El valor sigue siendo el mismo; solo cambia cómo se escribe.
- Los nombres de clases y de elementos en los selectores conservan las mayúsculas y minúsculas que escribiste. Los comentarios se conservan.
- El valor de una propiedad personalizada (un nombre que empieza por --) se conserva exactamente como lo escribiste, salvo los espacios que lo rodean.
- No se descarga nada: @import y url() son solo texto, y la herramienta nunca carga una hoja de estilos ni una imagen.
- Las propiedades y los valores no se comprueban con las especificaciones de CSS. Una declaración como foo: bar se formatea como cualquier otra.
Conviene saber
- Embellecer cambia el aspecto del CSS, no lo que hace. Aquí no hay una acción de minificar CSS: esta herramienta va de lo compacto a lo legible.
- El CSS generado a partir de Sass, SCSS o Less ya es CSS normal y funciona aquí. Los archivos fuente en esos lenguajes, no: una $variable, @mixin, @include, un comentario // o #{interpolacion} se rechaza, y una llamada a un mixin de Less como .rounded(); también. Nada se compila ni se convierte, y parte del código Less que parece CSS normal se formatea como tal.
- El CSS nunca se repara. Un bloque, una cadena, un comentario, un paréntesis o un corchete sin cerrar, y un }, ) o ] de más, se rechazan con su línea y columna. Para escribir un ) o ] literal dentro de un nombre o de una dirección, escápalo como \) o \]. También se rechazan los paréntesis o corchetes anidados en más de 64 niveles.
- Un url() sin comillas no puede contener un espacio, unas comillas ni un paréntesis de apertura. Pon la dirección entre comillas, como en url("nombre del archivo.png").
- Una entrada hecha solo de líneas en blanco no tiene nada que embellecer y recibe un aviso que pide contenido. Un texto que solo contiene un comentario se formatea.
- El CSS minificado se alarga al formatearlo, porque cada declaración recibe su línea y su sangría. Un archivo minificado muy grande puede pasar del límite de tamaño del resultado, o tardar lo bastante para llegar al límite de tiempo, antes de llegar al límite de tamaño de la entrada. Si la sangría hiciera el resultado mucho mayor que el límite de tamaño, la herramienta se detiene antes de formatear: usa 2 espacios o menos anidamiento.
Cómo usarla
- Pega en el cuadro de entrada el CSS minificado de una salida de compilación o de la pestaña Red (Network) del navegador. No se ejecuta nada mientras escribes.
- Elige «2 espacios» o «4 espacios». En esta página el botón de acción se llama «Formatear», igual que en CSS Formatter, porque las dos herramientas comparten el mismo motor.
- Pulsa «Formatear» y lee el resultado junto a tu entrada. Si el CSS no se puede formatear, el mensaje explica el motivo y, cuando puede, el lugar.
- Pulsa «Copiar» para llevarte la versión legible, o «Descargar» para guardarla como formatted.css.
Ejemplos
Embellecer una hoja de estilos de una línea
Pega el CSS de abajo y pulsa «Formatear» con «2 espacios» seleccionado. Cada regla recibe su bloque y cada declaración su línea. La escritura también se uniformiza: 1.0em pasa a 1em, #DDD pasa a #ddd, .2 pasa a 0.2 y las comas dentro de rgba() reciben un espacio detrás.
.card{display:flex;padding:0.75em 1.0em;border:1px solid #DDD}.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.2)}.card {
display: flex;
padding: 0.75em 1em;
border: 1px solid #ddd;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
Una copia que quedó cortada
Falta la última llave de cierre, como cuando una copia se detiene a medias. La herramienta no adivina dónde debía terminar la regla, así que la rechaza y señala el bloque que nunca se cerró.
.card{padding:1em;color:redEste bloque nunca se cierra. Añade la llave de cierre correspondiente (}).
Línea 1, columna 1
Listas de selectores y media queries
Los selectores y las condiciones minificados también se despliegan. Cada selector de una lista separada por comas va en su propia línea, los combinadores > y + reciben un espacio a cada lado y la media query recupera su espaciado.
h1,h2,h3{margin:0 0 .5em}.nav>li+li{margin-left:1em}@media (min-width:600px) and (max-width:900px){.nav{display:none}}h1,
h2,
h3 {
margin: 0 0 0.5em;
}
.nav > li + li {
margin-left: 1em;
}
@media (min-width: 600px) and (max-width: 900px) {
.nav {
display: none;
}
}
Variables de Sass
Un nombre que empieza por $ es una variable de Sass, que no es CSS. La herramienta formatea solo CSS estándar y nunca compila ni convierte nada, así que lo rechaza y señala el primer marcador que encontró.
$brand: #333;
.btn{color:$brand}Esto parece sintaxis de Sass, SCSS o Less, como una $variable, un @mixin o @include, un @variable: valor, un comentario // de línea o una #{interpolación}, que esta herramienta no admite. Formatea solo CSS estándar y nunca compila ni convierte nada.
Línea 1, columna 1
Límites y privacidad
Límites de tamaño
- Entrada: hasta 2.000.000 bytes de texto en UTF-8 (unos 2 MB). Las letras acentuadas y los emojis ocupan más de un byte cada uno. Una entrada mayor se rechaza.
- Resultado: también hasta 2.000.000 bytes. Si el resultado completo fuera mayor, la herramienta muestra solo una vista previa incompleta de los primeros 100.000 bytes, y esa vista previa no se puede copiar ni descargar.
- Anidamiento: hasta 256 niveles de llaves, paréntesis y corchetes abiertos contados en conjunto dentro de otros. Un CSS más profundo se rechaza porque supera lo que procesa la herramienta.
- Paréntesis y corchetes: un límite independiente de 64 aperturas contadas en conjunto, dentro del límite de anidamiento combinado anterior. Un CSS más profundo se rechaza porque supera lo que procesa la herramienta.
- Tiempo: una ejecución que tarda más que su límite de tiempo se detiene. Prueba con una entrada más pequeña.
Tu privacidad
El texto que escribes o pegas, o abres desde un archivo local, se procesa localmente en tu navegador, en un Web Worker dedicado. Nunca se sube ni se envía al servidor (un archivo que abres se lee solo en tu navegador), y no se escribe en el almacenamiento, en cookies ni en la barra de direcciones.
«Copiar» pone el resultado en el portapapeles y «Descargar» lo guarda como archivo, pero solo cuando pulsas el botón. El archivo se crea en tu navegador, así que no se sube nada.
Para conocer todos los detalles, consulta la Política de privacidad
Herramientas y páginas relacionadas
Tu texto se queda en la página cuando cambias de herramienta en la misma pestaña, así que puedes probar el mismo texto en otra. Recargar o cerrar la pestaña lo termina.