Herramienta de desarrollo / 16

Formateador y embellecedor de CSS

Da formato, aplica sangría y expande reglas CSS, listas de selectores y declaraciones de propiedades para obtener código legible.

Formateador y embellecedor de CSS: TOEA analiza reglas CSS, consultas @media y declaraciones, normalizando el espaciado de propiedades y la sangría de bloques. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas de desarrollo
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

Formateador y embellecedor de CSSProcesamiento local

Funciona por completo en tu navegador

Salida de CSS embellecido

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Leer la hoja de estilos de otra persona

Aplicar formato a un archivo minificado lo hace legible, pero no lo vuelve igual que el código fuente del que procede: los minificadores combinan reglas y reordenan declaraciones, así que es normal encontrar selectores agrupados y valores abreviados. Para descubrir qué regla aplica estilos a un elemento, las herramientas de desarrollo del navegador son más rápidas, y su panel Sources puede aplicar formato legible a un archivo minificado directamente. Aplicar formato a dos versiones de una hoja de estilos y compararlas en el comparador de diferencias muestra qué cambió en una actualización.

Qué no modifica el formato

El formateador aplica sangría y espacios; no ordena las propiedades, corrige nombres mal escritos, añade prefijos de proveedor ni elimina declaraciones duplicadas, por lo que colour: red permanece sin cambios. Las secuencias de espacios en blanco se reducen en todas partes, incluso dentro de cadenas entre comillas, así que revisa los valores de content que dependan de varios espacios. Cuando el archivo esté listo para publicar, vuelve a comprimirlo con el minificador CSS.

Cómo se usa

Pega código CSS en bruto o minificado.
Elige sangría de 2 o 4 espacios.
Haz clic en Format CSS y copia o descarga el resultado.

Privacidad y límites

Todo el formateo de CSS se ejecuta localmente en tu navegador.

Herramientas relacionadas

Preguntas frecuentes

¿Es compatible con consultas @media?

Sí, las reglas @ anidadas y las consultas @media se formatean con la sangría adecuada.

¿Modifica los códigos de color o los selectores?

No. El formateo ajusta espacios en blanco, sangría y estructura sin alterar los valores de las propiedades.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta