Cómo formatear CSS con indentación configurable

Qué puedes hacer con el formateador CSS

Este formateador sirve para dar una estructura más legible a una hoja de estilos CSS y mantener una indentación coherente. Puede resultar útil cuando recibes reglas comprimidas, revisas declaraciones en bloque o quieres preparar el contenido para una revisión manual. La herramienta permite elegir la indentación y trabajar en modo de embellecimiento o de minificación. No debe confundirse con un validador, compilador o comprobador de cumplimiento de estándares: su función es transformar la presentación del contenido CSS, no certificar que sea correcto ni que conserve todos sus efectos en cualquier situación.

Cómo formatear una hoja CSS paso a paso

1. Prepara el contenido CSS que quieras procesar. Introduce una cadena de texto; si la entrada está vacía o contiene únicamente espacios en blanco, el resultado será vacío y los tamaños de entrada y salida serán cero.

2. Selecciona la cantidad de espacios de indentación. Para una entrada no vacía, se aceptan valores entre 0 y 8, incluidos. Si el valor no se puede convertir a un número entero o queda fuera de ese intervalo, se utiliza 2. En una entrada formada solo por espacios, esta normalización no llega a aplicarse porque el proceso termina antes.

3. Elige el modo. Si no se proporciona un modo utilizable, se emplea el embellecimiento. El modo minify, escrito en minúsculas aunque se introduzca con otra combinación de mayúsculas, elimina los comentarios de bloque, compacta los espacios y quita los espacios que rodean llaves, puntos y coma y dos puntos. Los demás valores de modo que se normalicen correctamente utilizan el embellecimiento.

4. Ejecuta el procesamiento y revisa el resultado. Comprueba que las reglas, selectores y declaraciones que esperabas siguen presentes y que la disposición responde a tu objetivo. Para entradas no vacías, el contenido debe superar las comprobaciones de tipo y procesamiento; una entrada que no sea texto puede fallar. También puede fallar una entrada no vacía de más de 1.000.000 de bytes UTF-8.

Cómo interpretar el resultado y sus límites

Un resultado embellecido suele presentar las reglas con saltos de línea e indentación uniforme, mientras que minify busca una representación más compacta retirando los elementos de espacio y los comentarios de bloque descritos anteriormente. La elección del modo cambia la presentación del contenido; no demuestra por sí misma que una hoja CSS sea válida, compilable o semánticamente equivalente a la original.

Si el resultado está vacío, revisa primero si la entrada estaba vacía o contenía solo espacios. Si el proceso no termina correctamente con una entrada no vacía, comprueba el tipo de entrada, su tamaño y el modo elegido. El formateo de contenido no vacío también depende de que esté disponible el componente necesario para procesarlo. El entorno declara que no tiene acceso a la red, pero ese dato no permite concluir cómo se ejecuta la herramienta ni cómo se almacenan los datos.

Ejemplo práctico

Una persona recibe una regla CSS compactada y quiere revisarla con una estructura más legible antes de editarla.

Introduce .card{color:red;margin:0} como contenido, selecciona una indentación de 2 y ejecuta el modo de embellecimiento.

El resultado debe conservar contenido CSS y mostrar una disposición procesada; con embellecimiento, se espera una estructura con saltos de línea e indentación. También se devuelven los tamaños de entrada y salida.

Limitaciones

• El entorno declara que no tiene acceso a la red, pero este dato no determina si la herramienta se ejecuta en un navegador, en un servidor u otro entorno.
• No hay información suficiente para afirmar cómo se almacenan los datos ni para ofrecer garantías de privacidad, confidencialidad o conservación.
• El contenido no vacío depende de que el componente necesario para el formateo esté disponible, y el resultado no certifica validez CSS ni equivalencia semántica.

Errores frecuentes

• Si se introduce únicamente espacio en blanco y se espera que la indentación cambie algo, la causa es que esa entrada devuelve un resultado vacío antes de normalizar la indentación. Introduce CSS no vacío para aplicar la configuración.

Preguntas frecuentes

¿Qué indentación puedo usar al formatear CSS?

Para una entrada no vacía, selecciona un valor entre 0 y 8. Los valores no convertibles o fuera de ese intervalo se sustituyen por 2; una entrada solo con espacios termina antes de esa normalización.

¿Qué hace el modo minify?

Cuando la entrada no está vacía, el modo minify elimina comentarios de bloque, compacta espacios y retira espacios alrededor de llaves, puntos y coma y dos puntos. Si no se proporciona un modo utilizable, se usa el embellecimiento.

¿Qué ocurre si la entrada está vacía o es muy grande?

Una entrada vacía o formada solo por espacios devuelve un resultado vacío y tamaños cero. Una entrada no vacía de más de 1.000.000 de bytes UTF-8 puede fallar antes del formateo.

¿Por qué puede fallar el formateo de una entrada no vacía?

Si la entrada no vacía no es de tipo texto, puede fallar la comprobación de tipo. También puede producirse un fallo si el componente necesario para procesarla no está disponible.