Formateador CSS

Limpie CSS desordenado o minificado con indentación y estructura consistentes.

Entrada
Salida
0 caracteres 0 líneas

Formateador CSS

Esta herramienta embellece el código CSS con indentación correcta y formato consistente.

La operación se ejecuta localmente en su navegador. Sus datos nunca se cargan ni almacenan en un servidor.

Cómo usar

  1. Pegue su código CSS en el editor de entrada.
  2. Haga clic en Embellecer CSS.
  3. El CSS embellecido aparece con indentación correcta.
  4. Use Copiar para el portapapeles, Descargar para un archivo, o Limpiar para reiniciar.

¿Qué es el embellecimiento CSS?

El embellecimiento CSS agrega indentación y hace el código legible.

El embellecimiento CSS es esencial para depurar y colaborar.

Notas de entrada

La herramienta acepta cualquier entrada CSS.

Ejemplo

El CSS minificado se vuelve legible después del embellecimiento:

--- 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.