ForHosting KIT · Datos y archivos

Minificar CSS

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

● EstableGratis · en su navegador

Ejecutar — gratis Cómo funciona y API

Úselo desde WebAPIEmailApp prontoTelegram pronto

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.

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.

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.

Qué puede hacer con ella

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.

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.

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.

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

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

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

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

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

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

POSThttps://api.kit.forhosting.com/data/css-minify

¿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, y pronto desde nuestra app, el email y Telegram.

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 &#39;{"input":"…"}'

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({
    "input": "…"
  })
});
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[&#39;KIT_KEY']}"},
    json={
    "input": "…"
},
)
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" => &#39;{"input":"…"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"input":"…"}`)
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

{
  "input": "…"
}

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

Por solicitud$0.002

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.

Ver la documentación completa del KIT →

Ejecutar — gratis