CDRN

Formatear e indentar CSS

  • Panel
  • Documentación
  • API
formatea tus reglas CSS para hacerlas legibles y comprensibles, facilitando el desarrollo y el mantenimiento

¿Por qué utilizar una herramienta de formateo CSS?

El formateo del código CSS es esencial para que los desarrolladores mantengan un código limpio y legible. Esta herramienta simplifica el proceso permitiendo formatear de forma rápida y precisa el código CSS, facilitando así el mantenimiento y la colaboración en los proyectos.

Características de la herramienta de formateo CSS

Esta herramienta de formateo CSS le permite introducir código CSS y formatearlo para mejorar su legibilidad. Elimina los comentarios, los espacios y las tabulaciones innecesarios, y añade una indentación adecuada para las reglas y propiedades CSS.

Cómo utilizar la herramienta de formateo CSS

Para utilizar la herramienta de formateo CSS, siga estos sencillos pasos:

  1. Introduzca su código CSS en el campo previsto a tal efecto.
  2. Haga clic en el botón "Formatear". La herramienta formateará el código CSS para una mejor legibilidad.
  3. Copie el código CSS formateado para utilizarlo en sus proyectos.

Ejemplo de uso de la herramienta de formateo CSS

Este es un ejemplo de código CSS antes y después del formateo: 


Avant le formatage :
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

Après le formatage :
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Preguntas frecuentes

¿Qué diferencia hay entre un formateador CSS, un minificador y un beautifier?

Un formateador CSS (o beautifier) reescribe un fichero compacto en una versión indentada y legible. Un minificador hace lo contrario: elimina espacios, saltos de línea y comentarios para reducir el tamaño del fichero servido en producción. Nuestra herramienta se centra en el formateo: toma una hoja CSS minificada o mal indentada y la reformatea con una indentación coherente, propiedad a propiedad.

¿El formateo conserva los comentarios CSS?

Los comentarios /* ... */ se preservan tal cual por defecto. Los comentarios de licencia al inicio del fichero (/*! ... */) así como las anotaciones de utilidad (TODO, FIXME) permanecen intactos, en su propia línea. Si quiere eliminarlos para producir un fichero de producción, pase por un minificador dedicado.

¿Se gestionan los prefijos de proveedor (-webkit-, -moz-)?

Sí. Los prefijos de proveedor se tratan como propiedades ordinarias: se indentan y se alinean con el resto del bloque. El formateador no genera ni elimina prefijos: se limita a dar formato a lo que se le proporciona. Para añadir automáticamente los prefijos que falten, utilice Autoprefixer en su pipeline de build.

¿El formateador gestiona las media queries y las reglas anidadas?

Sí. Las @media, @supports, @keyframes y otras at-rules se indentan con sus reglas anidadas dentro de las llaves. El anidamiento CSS nativo (& en una regla padre) también se reconoce y se formatea correctamente, como los bloques SCSS o Less compatibles con la sintaxis CSS estándar.

¿Puedo formatear SCSS, Less o Stylus?

La herramienta se centra en el CSS estándar. Las sintaxis ampliadas (mixins SCSS, variables Less con @, sintaxis sin llaves de Stylus) no las entiende el parser y pueden producir un resultado degradado. Para esos lenguajes, utilice más bien sass --style=expanded, lessc o un formateador dedicado como Prettier con el plugin adecuado.

¿El formateador valida la sintaxis CSS?

El formateador realiza un análisis sintáctico mínimo: identifica los bloques, los selectores y las declaraciones. Señala los errores groseros (llave sin cerrar, punto y coma que falta al final de un bloque), pero no valida los nombres de propiedades ni los valores. Para una validación completa, utilice el servicio del W3C CSS Validator.

Ejemplo de solicitud

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Esquema de entrada

Campo Tipo Obligatorio Por defecto
input text ✓ –

Puntos de acceso

  • GET https://cdrn.fr/api/v1/tools - lista todas las herramientas disponibles
  • GET https://cdrn.fr/api/v1/tools/css-formatter - recupera el esquema de esta herramienta
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - ejecuta esta herramienta con un payload JSON