Formateador CSS
Una declaración por línea, o todo el archivo en una.
Los ejemplos sustituyen temporalmente la entrada y los ajustes. Puedes recuperar tu trabajo anterior.
0 caracteres
Resultado
Pega o escribe arriba para ver el resultado aquí.
Tus archivos se quedan en tu dispositivo
Esta herramienta se ejecuta por completo en tu navegador. Lo que pegas se procesa en tu dispositivo y nunca se envía a un servidor, así que puedes usarla con tokens, claves y textos sin publicar.
Ejemplo
Ejemplo práctico — Formateador CSS
Introduce las líneas en orden y usa los ajustes indicados. Compara el resultado con las líneas de salida.
| Elemento | Valor |
|---|---|
| Entrada 1 | a{color:red;margin:0} |
| Qué hacer | Maquetarlo |
| Sangría | 2 espacios |
| Salida 1 | a { |
| Salida 2 | color: red; |
| Salida 3 | margin: 0; |
| Salida 4 | } |
Las dos declaraciones CSS quedan en líneas separadas con sangría de dos espacios. Los valores red y 0 no cambian.
Cómo funciona
- Pega el CSS.
- Al maquetar, cada selector y cada declaración van en su propia línea, con una línea en blanco entre reglas.
- Al comprimir desaparecen los comentarios y todos los espacios que no hacen nada.
- Copia o descarga el resultado.
Preguntas frecuentes
- ¿Y una llave dentro de una cadena o de un url()?
- Se deja en paz. Las cadenas y los comentarios se leen como piezas enteras antes de partir nada por las llaves, así que content: "}" se formatea bien en lugar de partir la regla por la mitad.
- ¿La minificación conserva el espacio de .a .b?
- Sí. Ese espacio es el combinador de descendencia y significa algo; los espacios alrededor de dos puntos o de una llave no. Solo se van los que no significan nada.
- ¿Reordena o acorta mis propiedades?
- No. Nada se fusiona, se acorta ni se mueve: #ffffff sigue siendo #ffffff. Esto maqueta lo que escribiste; no lo reescribe.
- ¿Se envía algo a un servidor?
- No. Funciona en tu navegador, así que lo que pegues se queda en tu ordenador.
Herramientas relacionadas
‹› Formateador HTML Sangrado para leerlo, o comprimido para publicarlo. • Minificador JavaScript Más pequeño, y demostrablemente el mismo código. ◐ Comprobador de contraste Si alguien puede leerlo de verdad. ◒ Conversor de color HEX, RGB, HSL y CMYK, más la relación de contraste que decide la legibilidad.