Formateador CSS
Formatea, embellece o minifica código CSS online ajustando la sangría y limpiando comentarios o espacios.
Ejecutar herramienta
Este formateador de hojas de estilo reorganiza código CSS para mejorar su legibilidad o reducir su tamaño antes de integrarlo en un proyecto web. Puedes pegar reglas desordenadas, bloques compactos o fragmentos minificados en el área de texto para estructurarlos de forma clara.
La herramienta ofrece dos modos de procesamiento: embellecer (beautify) y minificar (minify). En el modo de embellecimiento, añade saltos de línea y aplica una sangría configurable entre 0 y 8 espacios, facilitando la lectura de selectores y declaraciones. Si eliges minificar, elimina comentarios en bloque, suprime espacios redundantes y compacta llaves, dos puntos y puntos y comas para comprimir el texto.
El procesador admite bloques de texto de hasta 1000000 de bytes en codificación UTF-8. Si envías un texto vacío o compuesto únicamente por espacios, obtienes una salida vacía con tamaño cero. Comprueba la sintaxis de tus selectores antes de formatear para mantener la estructura visual adecuada en tus proyectos.
Instrucciones
- Pega o escribe tu código CSS en el campo de entrada principal.
- Elige el modo de procesamiento: embellecer para estructurar el código con saltos de línea, o minificar para compactarlo.
- Indica el número de espacios de sangría deseado entre 0 y 8 cuando uses el modo de embellecimiento.
- Ejecuta el formateo para obtener el CSS procesado en el panel de resultados.
Ejemplos
- CSS desordenado: 'body{margin:0;padding:10px;color:#333;}' con sangría de 2 espacios en modo embellecer genera un bloque estructurado con llaves alineadas y propiedades sangradas.
- CSS comentado: '/* Encabezado */ header { display: flex; gap: 1rem; }' en modo minificar elimina el comentario y devuelve 'header{display:flex;gap:1rem;}'.
Preguntas frecuentes
¿Qué ocurre si el valor de sangría está fuera del rango admitido?
Si introduces un valor inferior a 0 o superior a 8 espacios, la herramienta aplica automáticamente el valor predeterminado de 2 espacios al embellecer.
¿Qué diferencia existe entre el modo de embellecer y el de minificar?
El modo de embellecimiento añade saltos de línea y sangrías para facilitar la lectura del código. El modo de minificación suprime comentarios en bloque y espacios innecesarios para compactar el archivo.
¿Qué tamaño máximo de código CSS se puede procesar?
El límite de entrada es de 1 000 000 de bytes en codificación UTF-8 para código con contenido. Si el texto supera este tamaño, el sistema no procesa la solicitud.
¿El formateador valida si las propiedades CSS son válidas según los estándares?
No. La herramienta reorganiza y compacta el espaciado del texto, pero no actúa como validador de sintaxis ni comprueba la compatibilidad de reglas de estilo.