Aísla las reglas usadas en la parte superior

Los desarrolladores front-end aíslan con él el CSS inicial cuando la parte visible de una página debe aparecer antes.

Aísla las reglas usadas en la parte superior. Tus datos permanecen en el dispositivo y el resultado es fácil de revisar y reutilizar.

Cómo usar

  1. Pega el HTML de la parte de la página visible en la parte superior.
  2. Añade una línea separadora formada por dos guiones.
  3. Pega la hoja de estilos completa que usa esa página debajo del separador.
  4. Ejecuta la extracción para obtener las reglas necesarias para el primer renderizado.

Ejemplo

Un desarrollador front-end está ajustando una página de inicio en la que el encabezado y el menú deben aparecer rápidamente. Pega el HTML del encabezado, añade los dos guiones y luego incluye la hoja de estilos completa. La salida ayuda a preparar un bloque de CSS crítico antes de seguir optimizando. Después prueba el resultado en una copia para detectar reglas que falten.

Entrada

<h1 class="title">Hello</h1>
--
.title { color: #333; }
p { margin: 0; }

Límites y formatos

Dónde se procesa

El HTML y el CSS que pegas permanecen en tu navegador. La extracción de reglas ocurre en tu dispositivo y no se envía nada fuera de la página. El resultado no se conserva después de que te vayas.

Preguntas frecuentes

¿Qué HTML debo proporcionar?

Proporciona el marcado de lo que los usuarios ven antes de desplazarse, como el encabezado, la navegación y el primer bloque de contenido. El CSS crítico depende de esa vista inicial. Una extracción más amplia suele producir reglas menos específicas.

¿Por qué faltan algunas reglas?

La herramienta lee el HTML y el CSS que pegas, pero no ejecuta el JavaScript de la página. Las clases añadidas después o los estilos calculados por el navegador pueden estar ausentes. Añádelos manualmente si el primer renderizado los necesita.

¿Puedo publicar directamente el CSS extraído?

Pruébalo primero en una copia. Comprueba que el diseño inicial permanezca intacto y que las fuentes sigan disponibles. El CSS crítico suele complementar la hoja de estilos principal en lugar de sustituirla en todas las situaciones.

Herramientas de la misma categoría