Guía de uso
Esta herramienta sirve para formatear CSS minificado o escrito sin un estilo común: coloca cada declaración en su propia línea con dos espacios de sangría, separa las listas de selectores y ordena los espacios alrededor de los combinadores. Las consultas de medios se sangran como cualquier otro bloque. Las cadenas, los valores url() y los comentarios se respetan sin cambios, y todo ocurre en tu navegador.
Cómo formatear CSS paso a paso
- Pega el CSS en el campo de entrada: una sola regla o una hoja de estilos completa.
- Pulsa el botón de ejecutar o el atajo Ctrl + Enter para darle formato.
- Si aparece un error de llaves, ve a la línea indicada y corrige el desequilibrio.
- Copia la hoja ya formateada o guárdala como archivo de texto.
Antes y después
| Antes | Después |
|---|---|
.boton{color:#fff;background:#8f39e8} | Selector en su línea y cada propiedad debajo, sangrada y escrita como color: #fff; |
| Última declaración sin punto y coma | Se añade, para que una línea nueva no rompa la regla |
.boton:hover,.boton:focus{...} | Un selector por línea |
nav>a+a | nav > a + a |
@media (max-width:600px){...} | @media (max-width: 600px) { con las reglas internas un nivel más adentro |
| Dos reglas seguidas | Una línea en blanco entre ellas |
Lo que se respeta tal cual
Un formateador que modifica valores es un riesgo. Por eso estos casos pasan sin cambios:
- Cadenas con signos de puntuación, como
content: "Ver más →"ocontent: ";}". - Direcciones y data URI: el punto y coma de
url(data:image/png;base64,...)no se interpreta como el final de una declaración. - Abreviaturas como
font: 12px/1.5 sans-serif, cuya barra forma parte del valor. - Selectores con caracteres escapados, habituales en los frameworks de clases utilitarias:
.sm\:p-4o.w-1\/2. - Selectores de atributo como
[class~="activo"], donde la virgulilla es un operador y no un combinador. - Comentarios, marcas
!importanty el orden de las declaraciones.
Si aparece un error de llaves
La herramienta analiza el CSS en lugar de aplicar sustituciones a ciegas, así que se detiene cuando las llaves no cuadran y te dice dónde. Unexpected "}" on line 14. indica una llave de cierre que sobra. Missing "}" for the block opened on line 3. indica que el bloque que empieza en la línea 3 nunca se cierra; a menudo el fallo está en una consulta de medios o un bloque anidado dentro de él. Los navegadores suelen recuperarse de estos errores ignorando en silencio las reglas siguientes, y por eso una sola llave olvidada puede explicar por qué media hoja de estilos no se aplica.
Cuándo resulta útil
- Al revisar la hoja de estilos minificada de una plantilla o un plugin para saber qué selector tienes que sobrescribir.
- Al copiar reglas desde las herramientas para desarrolladores del navegador y querer leerlas con calma.
- Antes de una revisión de código, para unificar un archivo que han tocado varias personas.
- Para desenredar el bloque
<style>de una plantilla de correo HTML. - Como paso previo a anidar reglas con el conversor de CSS a SCSS.
Límites y privacidad
No ordena propiedades, no añade prefijos de navegador, no abrevia colores ni fusiona reglas duplicadas, y la sangría es siempre de dos espacios. La sintaxis exclusiva de SCSS, como los comentarios //, no es CSS válido; compílala antes con el conversor de SCSS a CSS. El código se procesa con JavaScript en tu navegador y no se envía al servidor; la página solo suma un contador de uso anónimo. Para el marcado de la página tienes la herramienta para formatear HTML.