Embellecedor de CSS
Re-indent and clean up minified or messy CSS — every selector on its own line, every declaration on its own line. — herramienta gratuita en línea.
Respuesta rápida: CSS Prettifier: Funciona en tu navegador, gratis, sin registro.
Última actualización
Preguntas frecuentes
- ¿Se conservarán los comentarios?
- Sí: se mantienen tanto los comentarios de bloque <code>/* block */</code> como los de estilo en línea <code>//</code> (aunque solo los comentarios de bloque son CSS válido; los comentarios en línea se conservan si aparecen como particularidad de la entrada de un preprocesador).
- ¿Cómo gestiona <code>@media</code> y otras reglas arroba?
- Las reglas arroba se anidan correctamente: las declaraciones internas llevan un nivel de sangría más que el cuerpo de la regla arroba. Entre varias reglas arroba del mismo nivel se mantiene una línea en blanco.
- ¿Puede dar formato a SCSS o Less?
- En la mayoría de los casos. El separador de tokens no interpreta toda la gramática de los preprocesadores (interpolación, mixins, <code>@if</code>), pero el SCSS sencillo suele conservarse bien tras el proceso. Para formatear preprocesadores con precisión, usa Prettier junto con el complemento de SCSS.
- ¿Combina o separa selectores?
- Los selectores separados por comas se colocan uno por línea para mantener las diferencias limpias. La semántica no cambia.
- ¿Puedo cambiar el tamaño de la sangría?
- Sí: arrastra el control deslizante de 0 a 8 espacios. El valor predeterminado es 2.
- ¿Se conservarán los nombres de propiedades poco habituales?
- Sí: los prefijos de proveedor (<code>-webkit-</code>, <code>-moz-</code>), las propiedades personalizadas de CSS (<code>--my-var</code>) y las propiedades desconocidas se conservan sin cambios.
- ¿Valida el CSS?
- No: el formateo es únicamente estructural. Pasa el resultado por el validador CSS del W3C si necesitas comprobar la conformidad con la especificación.
- ¿Se suben mis archivos?
- No: todas las transformaciones se realizan en tu navegador. Puedes pegar aquí incluso tokens de diseño confidenciales con seguridad.
- ¿Qué tamaño máximo puede tener un archivo para embellecerlo?
- Los archivos de hasta unos pocos megabytes se embellecen en bastante menos de un segundo. Por encima de ese tamaño, el rendimiento depende principalmente de la memoria del navegador.
- ¿Por qué la salida pierde a veces los puntos y coma?
- Siempre añadimos un punto y coma final al término de cada declaración; si no aparece, también faltaba el valor en la entrada. Compara ambos lados para localizar el elemento que realmente falta.