Examinar CSS comprimido
Despliega un fragmento para distinguir selectores, propiedades y valores antes de cambiar una declaración. Conserva las fuentes para recuperar archivos y comentarios de compilación originales.
Formateador y minificador CSS
Reindenta una hoja de estilos CSS para facilitar su lectura o minifícala para obtener un código más compacto, directamente en tu navegador.
- Portapapeles
- Exportar
Datos no enviados
No se pudo procesar esta entrada. Revisa la sintaxis y las limitaciones indicadas más abajo.
CSS procesado
¿Te ha resultado útil esta herramienta?
¿Cómo funciona esta herramienta?
Haz más legible una hoja CSS o genera una versión compacta de un fragmento. Ambas acciones analizan la sintaxis en lugar de eliminar espacios y comentarios a ciegas. Una cadena con puntos y coma, una URL o una expresión calc() deben seguir siendo valores CSS coherentes. Los resultados se muestran como texto: no se aplican reglas a esta página ni se descargan recursos de url() o @import para procesarlos.
El formateo usa una presentación CSS estructurada con sangría de dos espacios. Reescribe los bloques, listas de declaraciones y reglas anidadas reconocidas para facilitar la lectura. No renombra clases, identificadores ni propiedades personalizadas para reducir el documento.
El modo compacto genera la salida desde el árbol sintáctico CSS. Elimina separadores innecesarios, pero conserva los que exige la gramática, incluidos espacios alrededor de operadores en calc(). Una cadena no se divide en declaraciones solo porque contenga : o ; entre comillas.
La versión compacta elimina comentarios ordinarios. Conserva al principio los comentarios que empiezan por ! o contienen @license o @preserve. Revisa los comentarios con instrucciones para tu sistema de compilación: la herramienta no interpreta todas las convenciones de bundlers y preprocesadores.
Analizar sintaxis no certifica propiedades ni representación visual. Una propiedad desconocida, un valor incompatible o una regla sin efecto pueden seguir siendo sintácticamente legibles. El formulario está destinado a CSS; no compila Sass/SCSS ni Less. No comprueba selectores contra tu DOM ni calcula los estilos aplicados.
Cómo utilizar esta herramienta
Proporciona el CSS fuente
Pega reglas o importa un archivo .css. Quita las etiquetas <style> de un fragmento HTML: el formulario espera la hoja, no una página completa.
Elige la presentación
Formatea para revisar o usa la salida compacta para reducir texto. Si falla, comprueba cadenas, paréntesis, comentarios y llaves.
Revisa declaraciones importantes
Comprueba URL, expresiones calculadas y comentarios conservados antes de copiar o descargar. Una nueva entrada oculta el resultado previo; restablecer limpia ambos campos.
Casos de uso
Compartir un ejemplo de diseño
Presenta reglas legibles en una revisión o incidencia. El CSS formateado no incluye los elementos HTML necesarios para reproducir el comportamiento.
Preparar un fragmento compacto
Reduce los espacios de presentación de reglas estabilizadas. No elimina reglas sin usar ni sustituye la compresión de red.
Ejemplos
Desplegar una regla simple
El selector a y el color conservan su función. El formateo coloca la declaración en una línea propia con sangría de dos espacios.
Entrada
a { color: red; }Resultado
a {
color: red;
}
Compactar sin romper cadenas ni calc()
El texto a; b: { } permanece como una sola cadena. La resta en calc(100% - 2px) conserva los separadores necesarios alrededor del operador.
Entrada
a { content: "a; b: { }"; width: calc(100% - 2px); }Resultado
a{content:"a; b: { }";width:calc(100% - 2px)}Consejos y buenas prácticas
- Comprueba el aspecto en tu aplicación. La herramienta desconoce estilos competidores, dimensiones de la página y la cascada resultante.
- Las URL relativas conservan su texto, pero el recurso referenciado depende del lugar donde instales la hoja.
- Compila SCSS o Less con tu cadena habitual antes de enviar aquí el CSS generado.
- Conserva fuentes y mapas por separado. El formulario produce texto CSS sin reconstruir mapas de origen del proyecto.
Fuentes y referencias
- CSS Syntax Module Level 3 — Editor’s Draft (se abre en una pestaña nueva), W3C CSS Working GroupPágina en inglés
Preguntas frecuentes
¿Por qué quedan espacios en la versión compacta?
Algunos espacios separan tokens necesarios para la gramática CSS. Quitarlos en calc(100% - 2px) puede invalidar la expresión. Compactar no significa eliminar todos los espacios.
¿Qué comentarios conserva el modo compacto?
Mantiene al principio los comentarios marcados con !, @license o @preserve. Elimina los demás. Revisa las directivas particulares de tu sistema de compilación.
¿Puedo formatear Sass o Less directamente?
El contrato de esta herramienta es CSS. No resuelve variables de preprocesador ni ejecuta sus funciones. Compila el origen con el software adecuado antes de generar CSS compacto.
¿Una hoja aceptada funciona en todos los navegadores?
No. Una sintaxis legible no garantiza compatibilidad de propiedades ni efecto en un DOM concreto. Prueba los navegadores objetivo y los distintos estados de tu interfaz.
Herramientas relacionadas
Continúa con estas herramientas
Herramientas similares o complementarias a esta.
Herramientas similares
Formatea HTML o elimina comentarios ordinarios localmente, conservando espacios del texto y contenido de scripts al quitar comentarios.
DesarrolloUsar esta herramienta
Formatea JavaScript, TypeScript o JSX para facilitar su lectura sin ejecutar código. Procesamiento local en tu navegador.
DesarrolloUsar esta herramienta
Codifica o decodifica entidades HTML habituales para convertir caracteres especiales de un texto.
DesarrolloUsar esta herramienta