Embellece CSS en tu navegador
El Formateador de CSS convierte hojas de estilo minificadas o desordenadas en CSS limpio y bien indentado en tiempo real, directamente en tu navegador. Pega una hoja de estilo de producción comprimida o un enredo de reglas escritas a mano y el resultado formateado aparece al instante en el panel de la derecha, con una declaración por línea y un espaciado consistente.
Casos de uso comunes
Desminificar hojas de estilo
Ordenar reglas
Revisar y aprender
Cómo formatear CSS
Pega tu hoja de estilo
Escribe o pega CSS en el panel de Entrada, a la izquierda. También puedes Subir un archivo .css o hacer clic en Ejemplo para cargar una muestra.
Ve la salida al instante
La hoja de estilo formateada y resaltada aparece automáticamente en el panel derecho mientras escribes. Los números de línea y un contador de tamaño en vivo facilitan la navegación por archivos grandes.
Ajusta las opciones
Elige la sangría (2, 3, 4, 8 espacios o Tab) y define el ancho de línea para controlar dónde se ajustan las líneas largas. La salida se vuelve a formatear de inmediato.
Copia o descarga
Haz clic en Copiar para tomar el resultado o en Descargar para guardarlo como archivo .css. Usa Editar para retocar la salida a mano antes de exportarla.
Funciones y opciones
Opciones de formateo
El formateo de CSS de Prettier es en gran parte automático, con dos controles que adaptan la salida a tus preferencias. Cada cambio vuelve a formatear el resultado al instante.
| Opción | Valores | Qué controla |
|---|---|---|
| Sangría | 2 · 3 · 4 · 8 espacios · Tab | Ancho de la sangría y carácter usado para las reglas y declaraciones anidadas. |
| Ancho de línea | 80 · 100 · 120 | Longitud de línea objetivo antes de que se ajusten los valores largos y las listas de selectores. |
Qué se formatea
Selectores y declaraciones
Sangría consistente, una declaración por línea y un espaciado prolijo alrededor de los dos puntos y las llaves.
Media queries y at-rules
Las @media, @keyframes y otras at-rules anidadas se indentan y alinean correctamente.
Herramientas integradas
Formateo en tiempo real
La salida se actualiza mientras escribes, con resaltado de sintaxis y números de línea.
Subir y descargar
Carga un archivo .css local o exporta el resultado formateado con un clic.
Salida editable
Cambia el panel de resultado al modo de edición para hacer retoques manuales antes de copiar.
Preguntas frecuentes
¿Se sube mi CSS a un servidor?
No. Todo el formateo ocurre localmente en tu navegador. Tu hoja de estilo nunca se sube, registra ni almacena, así que es seguro formatear CSS propietario o sin publicar.
¿Qué motor de formateo usa?
Usa Prettier con su analizador PostCSS, el mismo formateador ampliamente utilizado para mantener las hojas de estilo consistentes en proyectos reales. La salida sigue un estilo confiable y convencional.
¿Funciona con media queries y keyframes?
Sí. Las at-rules anidadas como @media y @keyframes se indentan y alinean correctamente, junto con los selectores estándar y los bloques de declaraciones.
¿Puedo personalizar la salida?
Sí. Define el tamaño de la sangría y el ancho de línea desde la barra de herramientas para controlar la sangría y dónde se ajustan las líneas largas. La salida se vuelve a formatear de inmediato para que veas el cambio.
¿También minifica el CSS?
Esta herramienta es un embellecedor: expande e indenta el CSS para facilitar la lectura en lugar de comprimirlo. Para reducir una hoja de estilo para producción, usa un minificador de CSS dedicado.
¿Qué pasa si el CSS no es válido?
Si el analizador no puede entender la entrada, la herramienta muestra un mensaje de error que describe el problema en lugar de producir una salida rota. Corrige el problema indicado y el resultado formateado reaparece.
Aún no hay comentarios. ¡Sé el primero en comentar!