Saltar al contenido
TextArray
Totalmente local

Formateador CSS

Embellezca CSS minimizado o desordenado en reglas limpias, con sangría y legibles.

Entrada
Salida

Formateador CSS

Pegue CSS minimizado o enredado a mano y este formateador lo expandirá en una hoja de estilo limpia y legible: una declaración por línea, el selector y su llave de apertura en una línea, la llave de cierre sola y una línea en blanco entre las reglas de nivel superior. Los bloques anidados como @media, @supports y los selectores anidados tienen una sangría un nivel más profunda, por lo que la estructura de la hoja es obvia de un vistazo.

La herramienta lee su CSS carácter por carácter en lugar de dividirlo con patrones ingenuos, por lo que nunca se interrumpe en contenido complicado. Las cadenas mantienen su contenido exacto, por lo que content: "a{b}" sobrevive con las llaves dentro. Los cuerpos de url() se copian palabra por palabra, por lo que un URI de datos con sus propios punto y coma y dos puntos (url(data:image/png;base64,...)) se deja completamente solo. Los comentarios permanecen palabra por palabra en su propia línea en la sangría actual.

Tres opciones sintonizan la salida. La sangría cambia entre dos espacios, cuatro espacios o una tabulación. Un selector por línea coloca cada selector de una lista de comas en su propia fila, lo que resulta útil para reglas agrupadas largas y diferencias más limpias. La línea en blanco entre reglas se puede desactivar cuando desee que la hoja sea más compacta. El recuento en vivo cuenta las reglas, declaraciones y líneas de salida a medida que escribe, con el recuento de reglas resaltado.

Esta es la contraparte de un minificador de CSS: utilícelo para volver a editar un archivo de producción comprimido, para reformatear código inconsistente de varios autores o simplemente para leer una hoja de estilo que no escribió. Todo se ejecuta completamente en su navegador: su CSS nunca se carga en ninguna parte.

Preguntas frecuentes

¿Cambia mis valores CSS o nombres de propiedades?
No. Solo agrega y normaliza espacios en blanco y saltos de línea. Los selectores, propiedades, valores, colores, unidades, cuerpos de URL() y comentarios se conservan exactamente como están escritos.
¿Las llaves dentro de cadenas o url() romperán el formato?
No. Un escáner de caracteres rastrea la cadena, el comentario y el estado de la URL(), por lo que el contenido: "a{b}" y la URL(data:...;base64,...) se copian palabra por palabra y nunca se tratan como estructura.
¿Qué hace "Un selector por línea"?
Coloca cada selector de una lista separada por comas en su propia línea, por lo que h1, h2, h3 se convierten en tres filas encima de la llave de apertura. Las comas dentro de :is() o los selectores de atributos nunca se dividen.
¿Puede arreglar CSS no válido?
Formatea con el mejor esfuerzo y nunca produce errores en entradas rotas, pero no valida ni repara su CSS. Las llaves que faltan o los caracteres perdidos se presentan tan bien como lo permite su estructura.
¿Mi CSS está subido a alguna parte?
No. El formato se ejecuta completamente en su navegador y su CSS nunca sale de su dispositivo.