Formateadores de código

CSS Formatter

Formatea selectores, declaraciones, media queries, keyframes y propiedades personalizadas de CSS.

Pulsa Ctrl / ⌘ + Enter para ejecutar
Resultado de solo lectura

Formatea selectores, declaraciones, media queries, keyframes y propiedades personalizadas de CSS.

Qué hace esta herramienta

CSS Formatter comprende reglas, declaraciones y reglas a través del complemento de análisis PostCSS de Prettier. No maneja llaves con reemplazo simple de caracteres, por lo que puede distinguir entre cadenas, comentarios, calc() y valores de propiedades personalizados.

  • Admite CSS moderno común, consultas de medios y fotogramas clave.
  • Solo da formato al texto y no inyecta estilos en la página actual.
  • La sintaxis no válida mostrará un error del analizador.

Cómo utilizarla

  1. Pega el CSS.
  2. Seleccione el ancho de sangría.
  3. Haga clic en "Formatear CSS".
  4. Copie o descargue el archivo.css formateado.

Usos habituales

  • Limpia hojas de estilo de una sola línea o difíciles de leer.
  • Unifique el formato del fragmento de código del equipo.
  • Ayuda a observar consultas de medios anidadas y estructuras de animación.

Funciones de CSS Formatter

Analice y embellezca selectores, declaraciones, consultas de medios, fotogramas clave y propiedades personalizadas de CSS. Es adecuado para escenarios diarios de desarrollo, depuración, clasificación de datos y optimización de código. Los resultados del procesamiento se pueden ver, copiar o descargar directamente.

FAQ

¿Las propiedades personalizadas se dividirán incorrectamente?

El analizador comprende el contexto de la declaración CSS y maneja correctamente los valores comunes de propiedades personalizadas.

¿El formato cambiará el efecto del selector?

El objetivo es sólo cambiar el diseño; sin embargo, se recomienda conservar los archivos fuente y probar el proyecto antes de procesarlo con cualquier herramienta automatizada.

¿Se aplicará CSS a esta página?

No. Tanto la entrada como la salida permanecen en cuadros de texto.

Volver a Herramientas para desarrolladores