Formateador de CSS
Pega CSS para embellecerlo con una indentación limpia y coherente, ordenar alfabéticamente las propiedades de cada regla o minificarlo para producción. Admite media queries, anidamiento y comentarios.
Última actualización:
Todo funciona en tu navegador. Los archivos que abres se leen localmente y nunca se suben.
Cómo usar Formateador de CSS
- Pega tu CSS en el cuadro de entrada o abre un archivo .css. Prueba Ejemplo para ver una muestra.
- Elige la indentación (2 espacios, 4 espacios o tabulación) y opciones como ordenar las propiedades o poner cada selector en su propia línea.
- Pulsa Formatear CSS. El código formateado aparece a la derecha y se actualiza mientras escribes.
- Pulsa Minificar para eliminar comentarios y espacios en blanco; el ahorro de tamaño se muestra debajo del resultado.
- Copia o descarga el resultado como archivo .css.
Antes y después
Entrada minificada:
.nav a:hover,.nav a:focus{color:#2f6b4f;text-decoration:underline}@media (max-width:600px){.nav{display:none}}
Formateado con 2 espacios y selectores en líneas nuevas:
.nav a:hover,
.nav a:focus {
color: #2f6b4f;
text-decoration: underline;
}
@media (max-width:600px) {
.nav {
display: none;
}
}
Qué cambia el formateador y qué no toca nunca
| Se cambia | No se cambia nunca |
|---|---|
| Saltos de línea e indentación | El texto dentro de cadenas, como content: "a , b" |
Un espacio después de : y después de las comas en los valores | Valores url(…) sin comillas, incluidas las data URI |
Espacios alrededor de los combinadores >, + y ~ | Valores de propiedades personalizadas (--name: …), que se mantienen tal como están escritos |
Espaciado antes de !important | Los comentarios (en modo Formatear) y el orden de las reglas |
El modo Minificar elimina los comentarios, excepto los comentarios de licencia /*! … */, que se conservan por convención. También elimina los espacios alrededor de llaves, dos puntos, puntos y comas y comas, y el último punto y coma de cada regla. Los espacios dentro de calc() se conservan, porque calc(100% - 2rem) deja de funcionar sin ellos.
Cómo funciona la ordenación de propiedades
Con Ordenar propiedades activado, las declaraciones de cada regla se ponen en orden alfabético. Las propiedades personalizadas se quedan arriba en su orden original. Las versiones con prefijo de navegador, como -webkit-transition, se colocan justo antes de la propiedad estándar transition en lugar de agruparse arriba. Las propiedades repetidas que se usan como respaldo, por ejemplo display: -webkit-box seguida de display: flex, mantienen su orden para que el respaldo siga funcionando. Un comentario situado justo encima de una declaración se mueve con ella.
El orden alfabético facilita ver si una propiedad ya está definida y reduce los conflictos al fusionar cambios. Ten cuidado con una propiedad abreviada escrita después de una de sus propiedades detalladas (border-top y luego border): al ordenar se intercambian, y la que se aplica es la declaración posterior.
Preguntas frecuentes
¿Qué hace un formateador de CSS?
Reescribe el CSS con una declaración por línea y una indentación coherente dentro de cada regla y media query, para que la hoja de estilos sea fácil de leer y editar. No cambia lo que hace el CSS.
¿Puedo desminificar CSS?
Sí. Pega CSS minificado, por ejemplo de un sitio web en producción, y pulsa Formatear CSS. Cada regla y declaración vuelve a su propia línea. Los comentarios eliminados durante la minificación no se pueden recuperar.
¿Es seguro ordenar las propiedades CSS?
Normalmente sí. Ordenar solo reorganiza las declaraciones dentro de la misma regla. Puede cambiar el resultado cuando una propiedad abreviada va después de una propiedad detallada de la misma familia, por ejemplo border-top seguida de border, porque gana la declaración posterior. Al ordenar, las propiedades duplicadas, como los valores de respaldo, mantienen su orden original.
¿Cuánto se ahorra al minificar CSS?
Normalmente entre un 15 y un 30 por ciento en CSS escrito a mano, y más si tiene muchos comentarios. La herramienta muestra el tamaño exacto antes y después. Los servidores que usan compresión gzip o Brotli reducen aún más la diferencia, pero la minificación sigue ayudando.
¿Admite SCSS o Less?
El CSS normal, el anidamiento CSS y la mayoría del SCSS que usa reglas anidadas y variables se formatean bien porque la estructura es la misma. La sintaxis especial, como los mixins con argumentos, puede no formatearse a la perfección.
¿Se sube mi CSS?
No. El formateo se hace por completo en tu navegador, así que tu código nunca sale de tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.