Da formato al CSS que mantienes con un estilo coherente: la misma sangría, espaciado y escritura en todas partes. Usa el mismo formateador que CSS Beautifier.
Qué hace
CSS Formatter da un estilo coherente al CSS escrito a mano: la misma sangría, una declaración por línea, espaciado uniforme alrededor de los dos puntos, las comas y las llaves, y la misma escritura para números, colores y comillas. Úsalo antes de una revisión o de un commit, para que el diff muestre lo que cambiaste y no cómo estaban dispuestas las líneas por casualidad.
CSS Beautifier usa este mismo formateador, así que la misma entrada da el mismo resultado en las dos páginas. Esta página es para el CSS que mantienes: lo que cada regla selecciona y define no cambia, tus comentarios y el orden de tus reglas se quedan, y nada se repara, se renombra ni se ordena.
Qué admite
- CSS estándar, incluidas at-rules como @media, @font-face, @keyframes, @layer y @page, y el anidamiento nativo de CSS que admiten los navegadores. Los comentarios se conservan.
- Sangría de 2 o 4 espacios, nunca tabuladores. Los saltos de línea del resultado son siempre del mismo tipo, sea cual sea el de tu texto.
- Lo que se uniformiza: los nombres de propiedades y los colores hexadecimales en minúsculas, comillas dobles en lugar de simples, espaciado uniforme tras los dos puntos y las comas y un punto y coma tras la última declaración de cada 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 escriben con una sola grafía, así que un número puede verse distinto después: 0.50px pasa a 0.5px, 10.0 pasa a 10, .5 pasa a 0.5 y 1E3 pasa a 1e3. Su valor no cambia.
- Los nombres se quedan como los escribiste: los nombres de clases y de elementos en los selectores conservan sus mayúsculas y minúsculas, y lo mismo ocurre con los nombres y los valores de las propiedades personalizadas.
- Una serie de líneas en blanco pasa a ser una sola línea en blanco, y las líneas en blanco que se mantienen siguen donde están.
- No se descarga nada: @import y url() se quedan como texto. Las propiedades y los valores no se comprueban con las especificaciones de CSS, así que una propiedad inventada se formatea como una real.
Conviene saber
- Estos casos se rechazan, sin resultado: un bloque, una cadena, un comentario, un paréntesis o un corchete sin cerrar; un }, ) o ] de más; y un url() sin comillas que contenga un espacio o unas comillas. El mensaje da la línea y la columna, y nada se repara. Un ) o ] literal dentro de un nombre o de una dirección hay que escribirlo como \) o \]. También se rechazan los paréntesis o corchetes anidados en más de 64 niveles.
- Sass, SCSS y Less no se admiten. Una $variable, @mixin, @include, una @variable: valor de Less, un comentario // o #{interpolacion} se rechaza, y una llamada a un mixin de Less como .rounded(); se rechaza como error de sintaxis. La herramienta nunca compila ni convierte nada, y no detecta todas las construcciones de Less: algunas parecen CSS normal y se formatean como tal.
- Un texto con solo un comentario se formatea. Un texto con solo líneas en blanco no tiene nada que formatear, así que recibes un aviso que pide contenido.
- Los archivos grandes pueden tardar en formatearse, y el CSS minificado se alarga al formatearlo. Si una ejecución se detiene en el límite de tiempo, o el resultado superaría el límite de tamaño, prueba con una entrada más pequeña.
- 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 o escribe tu CSS en el cuadro de entrada. No se ejecuta nada mientras escribes.
- Elige la sangría que usa tu proyecto, «2 espacios» o «4 espacios», y pulsa «Formatear».
- Compara el resultado con tu entrada. Una regla que no se puede leer como CSS estándar se rechaza con su línea y columna, para que la corrijas y vuelvas a ejecutar la herramienta.
- Pulsa «Copiar» para pegar el CSS formateado en tu proyecto, o «Descargar» para guardarlo como formatted.css.
Ejemplos
Llevar un archivo escrito a mano a un solo estilo
Pega el CSS de abajo y pulsa «Formatear» con «2 espacios» seleccionado. La sangría irregular y los espacios sobrantes desaparecen, COLOR pasa a color, los colores hexadecimales quedan en minúsculas, .5em 1.50em pasa a 0.5em 1.5em, las comillas simples pasan a comillas dobles y se añade el punto y coma que faltaba tras la última declaración. El nombre de clase .btn conserva sus mayúsculas y minúsculas, y la serie de líneas en blanco dentro de la primera regla pasa a ser una sola línea en blanco.
.btn {
COLOR:#FFF;
background : #0A66C2;
padding:.5em 1.50em;
font-family: 'Inter', sans-serif
}
.btn:hover{background:#084E96}
.btn {
color: #fff;
background: #0a66c2;
padding: 0.5em 1.5em;
font-family: "Inter", sans-serif;
}
.btn:hover {
background: #084e96;
}
Un paréntesis de cierre de más
Hay un paréntesis de más al final del calc(). La herramienta no adivina cuál era el correcto, así que lo rechaza y señala el que sobra.
.a{width:calc(100% - 2rem));}Este paréntesis de cierre ()) no tiene el paréntesis de apertura correspondiente. Elimínalo o añade el paréntesis de apertura al que pertenece. Para escribir un paréntesis literal en un nombre o una dirección, usa el escape \).
Línea 1, columna 27
Las propiedades personalizadas se quedan como se escribieron
El valor de una propiedad personalizada (un nombre que empieza por --) significa lo que decida el código que lo lee, así que la herramienta no lo reescribe: #FFF y 1.50rem se quedan como se escribieron, salvo los espacios que los rodean. Fuera de una propiedad personalizada, 1.0em pasa a 1em.
:root{--Brand-Color:#FFF;--Gap: 1.50rem }
.btn{color:var(--Brand-Color);padding:var(--Gap) 1.0em}:root {
--Brand-Color: #FFF;
--Gap: 1.50rem;
}
.btn {
color: var(--Brand-Color);
padding: var(--Gap) 1em;
}
Una llamada a un mixin de Less
Una llamada a un mixin es Less, no CSS: para CSS parece una declaración sin dos puntos. Less no se admite, así que la herramienta lo rechaza y señala la línea donde dejó de entender.
.btn{
.rounded();
color:red
}El CSS no es válido en este punto. Por ejemplo: una declaración sin dos puntos, una regla sin selector o un texto que no es CSS. El CSS nunca se corrige automáticamente, así que corrígelo y ejecuta la acción de nuevo. Esta herramienta formatea solo CSS estándar, así que la sintaxis de Sass, SCSS y Less también puede causarlo.
Línea 2, columna 3
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.