01
Ubica el código de entrada
El ejemplo incluye una propiedad personalizada y @media. Los números del índice corresponden a la fuente, aunque la salida tenga otros saltos.
HTML / CSS Dev Tools
formateador CSSRevisa las reglas originales
Ejecuta Formatear, Minificar o Validar de forma explícita. Al cambiar la entrada, la copia y la descarga esperan un resultado nuevo.
formateador CSS
El CSS se procesa en esta pestaña; no se sube ni se guarda en un historial.
Navegación de reglas
Ejecuta una acción para ver selectores y reglas @.
Escribe CSS y elige una acción.
Una hoja comprimida puede ocultar una declaración repetida o el alcance de una media query. Para formatear CSS online, el formateador CSS agrega saltos e indentación sin cambiar el orden de selectores y propiedades, para que compares entrada y salida.
Puedes minificar CSS para entregar menos caracteres o usar el validador CSS estructural para localizar una llave sin cerrar. El formateador CSS siempre trabaja desde el código original, no desde la salida anterior.
Por qué el formateador CSS deja el origen a la vista
Lectura clara con posiciones que siguen siendo útiles.
Mantener el orden de la cascada
El formateador CSS conserva comentarios y declaraciones duplicadas al dar formato. No ordena propiedades: así puedes comprobar qué declaración posterior prevalece.
Volver a cada regla del original
El índice de selectores y reglas @ muestra la línea de la entrada. Al seleccionar una, el cursor salta allí; los errores también indican columna.
Usa las líneas originales para revisar
02
Elige la acción adecuada
La sangría inicial es de dos espacios; puedes usar cuatro o tabulaciones. Minificar y Validar vuelven a leer el original, nunca la salida previa.
03
Exporta únicamente lo vigente
Editar el código o la sangría desactiva Copiar y Descargar hasta repetir la operación. Ctrl/Cmd+Intro ejecuta Formatear.
Leer, reducir y encontrar reglas
Formato legible
El embellecedor CSS distribuye bloques anidados sin mover comentarios ni ordenar propiedades repetidas.
Minificación prudente
Quita espacios prescindibles y comentarios ordinarios. No fusiona reglas ni acorta colores o unidades.
Índice de selectores
Lista selectores y reglas @ con líneas de la fuente. Muestra 50 entradas cada vez sin recortar el archivo exportado.
Alcance de la comprobación
- Sin garantía entre navegadores
- La revisión estructural no confirma que cada selector o propiedad funcione en todos los navegadores que debes soportar.
- Solo CSS estándar
- El formateador CSS no interpreta variables ni mixins de SCSS o Less. Compila esos archivos antes de pegarlos aquí.
- Sin cambios semánticos automáticos
- El formato conserva comentarios y orden; la minificación quita comentarios ordinarios y espacios pero no ordena, fusiona ni elimina duplicados.
- Sin contexto del proyecto
- No se descarga una URL ni se guarda historial. Sin tu HTML y las demás hojas, la herramienta no puede representar el resultado real de la página.
Preguntas sobre el formateador CSS
¿Cambian mis estilos al formatear?
El orden de reglas y declaraciones permanece; aun así, comprueba el resultado en tu página real, donde intervienen HTML y otras hojas.
¿Cuánto se ahorra al minificar?
Depende de cuántos espacios y comentarios tenga el original. El panel muestra bytes UTF-8 antes y después para esta entrada concreta.
¿Funciona con SCSS o Less?
No. Este parser espera CSS estándar; compila primero las variables, mixins y demás sintaxis de preprocesador.
¿Respeta las media queries y variables CSS?
Puede organizar las @ reglas y propiedades personalizadas que el parser acepte. La compatibilidad de cada función con un navegador requiere otra prueba.
¿Cómo dejo entendible e indentado un archivo CSS?
Pega su contenido y ejecuta Formatear. Elige dos espacios, cuatro o tabulaciones; para automatizar archivos del proyecto usa un formateador en tu editor.
¿Te queda una duda?
Revisa ahora tu hoja de estilos
Vuelve al formateador CSS, localiza las reglas originales y descarga solo una salida reciente.
Formatear y minificar no sustituyen el CSS original.