Formateador CSS

Haga que las hojas de estilo sean más fáciles de leer y revisar

Formateador CSS expande el CSS compacto en selectores, bloques de declaración, propiedades y valores legibles. Ayuda a depurar estilos copiados, revisar el CSS generado, inspeccionar la salida del marco o preparar ejemplos.

Embellecer el diseño de los cambios, no la semántica en cascada. El orden del selector, las declaraciones duplicadas, las propiedades personalizadas, los comentarios, las consultas de medios y el orden de las capas deben permanecer intactos porque esos detalles pueden afectar los estilos finales.

Cómo usar

1. Pegue su código CSS en el editor de entrada.
2. Haga clic en Embellecer CSS para redistribuir reglas y declaraciones.
3. Revise el resultado para ver el orden del selector, los comentarios y las reglas at conservados.
4. Utilice Copiar para el portapapeles, Descargar para un archivo o Limpiar para restablecer.

¿Qué es el embellecedor CSS?

Formateador CSS es una utilidad basada en navegador para facilitar el escaneo de hojas de estilo. Separa bloques de reglas y declaraciones para que pueda inspeccionar selectores, propiedades, valores y reglas sin leer un archivo denso de una sola línea.

El comportamiento de CSS depende del orden de la cascada, la especificidad, la herencia, las capas y la resolución de propiedades personalizadas. El formato no debe reordenar las reglas o declaraciones; verificar cambios importantes en la hoja de estilo en el navegador.

Notas de entrada

Pegue solo CSS, incluidas reglas como @media, @supports y @layer. Mantenga el orden del selector y de la declaración sin cambios al copiar el resultado nuevamente en un proyecto.

Ejemplo

El CSS denso se vuelve más fácil de escanear una vez que cada declaración se coloca en su propia línea:

--- Minified Input ---
body{margin:0;padding:0;font-size:16px;}.container{max-width:1200px;}

--- Beautified Output ---
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  max-width: 1200px;
}

Integración MCP

MCP (Model Context Protocol) permite que agentes de IA y aplicaciones descubran y ejecuten utilidades de Coding.Tools para flujos repetibles de conversión, formato, hash y generación.

Nombre de herramienta MCP: css-beautifier

Endpoint MCP: https://coding.tools/mcp

Llame primero a tools/list. Cada herramienta incluye inputSchema, outputSchema y examples para que un agente de IA o cliente pueda construir argumentos válidos sin adivinar.

Para tools/call, lea result.content[0].text para el valor visible y result.structuredContent para el análisis automático. Los fallos de herramienta devuelven isError: true; los fallos de protocolo devuelven un JSON-RPC error.

Ejemplo de solicitud tools/call:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"css-beautifier","arguments":{"input":".button{color:white;background:#3366cc;padding:8px 12px;}"}}}'

La mayoría de las herramientas de texto y datos aceptan una cadena input y options opcionales. Las herramientas de imagen que dependen de las API de imagen del navegador se listan para descubrimiento y devuelven un enlace a la interfaz web cuando necesitan capacidades del navegador.