Minificar CSS
Una regla comentada repartida en cinco líneas sale como una sola línea de 24 caracteres. Desaparecen espacios, comentarios, puntos y coma finales y ceros sobrantes, mientras el orden de sus reglas queda intacto. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- CSS minimizado
- /* tema */ body { color: red; margin: 0; }
- CSS minimizado
- body{color:red;margin:0}
Una hoja de estilo escrita para que la mantenga una persona y una hoja de estilo servida a un navegador cumplen funciones distintas, y la mayoría de los proyectos todavía usan un solo archivo intentando hacer ambas cosas.
Una hoja de estilos para personas y otra para el navegador
Una hoja de estilos escrita para que la mantengan personas y otra servida al navegador tienen trabajos distintos, y aun así la mayoría de los proyectos publica un único archivo que intenta hacer ambas cosas. La versión legible, con sangrías, un selector por línea y comentarios que explican un truco para un navegador antiguo, es justo lo que quiere quien desarrolla y justo lo que el navegador no necesita. Conserve esa versión en su proyecto y minifique solo la copia que se publica. Importa porque las hojas de estilos suelen bloquear la primera imagen de la página.
Más pequeña sin cambiar cómo se ve la página
La minificación tiene que respetar la cascada. Reordenar o fusionar reglas sin cuidado puede cambiar qué declaración gana cuando dos selectores chocan, porque la especificidad y el orden del código lo deciden desde las primeras versiones de CSS. Un minificador prudente quita solo lo que es seguro, como espacios, comentarios y ceros y unidades sobrantes, y deja en paz el orden de los selectores y la estructura de las reglas. Encaja como paso en un proceso de publicación o en sitios hechos con generadores estáticos, temas de gestores de contenido o herramientas de diseño ajenas a JavaScript.
Compactación segura, no reescritura agresiva
Minificar CSS tiene que respetar la cascada: reordenar o fusionar reglas sin cuidado puede cambiar qué declaración gana cuando dos selectores compiten, y las reglas de especificidad y orden de origen del CSS forman parte de la especificación desde las primeras versiones del lenguaje en la web.
Un minificador conservador elimina solo lo que es demostrablemente seguro eliminar (espacios, comentarios, ceros y unidades redundantes) sin tocar el orden de los selectores ni la estructura de las reglas, que es la diferencia entre un archivo más pequeño y una hoja de estilo que renderiza la página de forma distinta a la original.
Qué puede hacer con ella
Entrega de temas en un gestor de contenidos
Un gestor de contenidos minifica las hojas de estilo del tema antes de servirlas a los visitantes, reduciendo el peso que bloquea el render en cada carga de página.
Pipeline de despliegue en CI
Un pipeline de CI minifica cada archivo CSS modificado en una versión como paso de build, manteniendo los archivos fuente totalmente formateados para revisión de código.
Preguntas frecuentes
¿Minificar cambia cómo se ve mi página?
No, solo se eliminan espacios en blanco, comentarios y sintaxis demostrablemente redundante; el orden de selectores y la especificidad se conservan, así que el render se mantiene igual.
¿Soporta funciones modernas de CSS como las propiedades personalizadas?
Sí, las propiedades personalizadas, las media queries y otra sintaxis moderna estándar de CSS pasan intactas por la minificación.
¿Se guarda mi CSS de origen después de minificarlo?
No, tanto el CSS enviado como el minificado se eliminan después del período de retención y nunca se usan para entrenamiento.
¿Por qué una hoja de estilos más pequeña hace que la página aparezca antes?
Porque el navegador suele esperar a descargar y leer las hojas de estilos antes de dibujar la página. Cada byte innecesario retrasa esa primera imagen, así que una copia compacta permite que la página se muestre antes.
¿Qué elimina exactamente la minificación?
Solo lo que es seguro quitar: espacios y saltos de línea, comentarios, puntos y coma finales, y ceros y unidades redundantes. Nunca reordena selectores ni fusiona reglas, que es lo que mantiene intactos la cascada y el aspecto de la página.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/data/css-minify \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"css":"a { color : red ; }"}'const res = await fetch("https://api.kit.forhosting.com/data/css-minify", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"css": "a { color : red ; }"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/data/css-minify",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"css": "a { color : red ; }"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/data/css-minify", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"css":"a { color : red ; }"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"css":"a { color : red ; }"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/data/css-minify", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"css": "a { color : red ; }"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "data.css_minify",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_mb | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Este endpoint toma su CSS legible y devuelve el equivalente más pequeño posible, para que la solicitud que bloquea el render termine antes.
Por qué el tamaño de la hoja de estilo sigue importando
El CSS bloquea el render por defecto: un navegador generalmente no pinta una página hasta descargar y analizar las hojas de estilo de las que depende, lo que convierte cada byte innecesario en ese archivo en un impuesto directo sobre el tiempo hasta el primer pintado. El CSS formateado como código fuente (con indentación anidada, un selector por línea, comentarios documentando un parche para un navegador antiguo) es justo lo que un desarrollador quiere leer y justo lo que un navegador no necesita. data.css_minify deja la versión legible en su árbol de código y solo compacta la copia que realmente se sirve.
Qué devuelve el endpoint
Envíe POST a /data/css-minify con el código fuente de la hoja de estilo, y recibirá un task_id mientras la minificación corre en segundo plano. El CSS compactado, con los espacios en blanco colapsados, los comentarios eliminados y los puntos y coma finales y unidades redundantes recortados donde es seguro hacerlo, llega mediante una llamada de webhook firmada o queda disponible en un enlace firmado válido por 24 horas.
Cómo encaja en un pipeline de build
Los equipos que no quieren instalar ni mantener el plugin de CSS de un bundler, o que generan hojas de estilo fuera de una cadena típica de build en JavaScript (desde un generador de sitios estáticos, un tema de un gestor de contenidos, o un sistema de diseño exportado por una herramienta que no usa JS), pueden llamar a este endpoint como su paso de minificación. Como el precio es por solicitud sin cobro en tareas fallidas, y la tarea corre de forma asíncrona, un script de build puede lanzar en paralelo cada hoja de estilo del proyecto y recoger los resultados por webhook, tratando la minificación como una línea predecible más del proceso de despliegue en vez de una dependencia que hay que mantener parchada y configurada.
Casos de integración
Build de sitio estático sin bundler de JS
Un generador de sitios estáticos escrito fuera del ecosistema de JavaScript minifica su salida CSS a través de la API en vez de integrar un plugin específico de un bundler.
Paso de exportación de un sistema de diseño
Una herramienta de diseño exporta CSS generado y lo minifica mediante la API antes de publicar la hoja de estilo de la librería de componentes.
Preguntas técnicas
¿Cómo minifico CSS con la API?
Envíe su hoja de estilo por POST a /data/css-minify, guarde el task_id devuelto y reciba el CSS minificado por webhook o mediante un enlace firmado válido por 24 horas.
¿Es gratis la API para minificar CSS?
No, no hay plan gratuito ni prueba; cuesta $0.002 por solicitud, y una solicitud fallida nunca se cobra.
¿Puedo usar esto en vez de un plugin de bundler?
Sí, está pensado justamente para eso: proyectos sin cadena de build en JavaScript pueden llamar al endpoint directamente como su paso de minificación.
¿Puedo minificar muchas hojas de estilo por lote?
Sí, envíe una tarea asíncrona por archivo y reciba cada resultado por webhook, algo que encaja en un pipeline de CI que procesa muchos archivos a la vez.
¿Ya está disponible este endpoint?
Sí, data.css_minify está en producción y acepta solicitudes ahora mismo.