Clicky

Helium, analiza tu sitio y mira el CSS sin usar

Helium, muestra el CSS sin usar

Helium descubre el CSS sin usar a través de muchas páginas en un sitio web

La herramienta está basada en JavaScript y se ejecuta desde el navegador

Helium acepta una lista de URLs para diferentes secciones de un sitio, entonces carga y analiza cada página para crear una lista de todas las hojas de estilo. A continuación, visita cada página en la lista de URLs y comprueba si los selectores que se encuentran en las hojas de estilo se utilizan en las páginas. Por último, genera un informe que detalla cada hoja de estilo y los selectores encontrados que no han sido utilizados en cualquiera de las páginas dadas.

Nota: en realidad sólo debe ejecutar Helium a nivel local, en desarrollo, o con la versión privada accesible de tu sitio. Si lo ejecutas en tu sitio público cada visitante podrá ver el entorno de prueba.

POR FAVOR LEE ABAJO LA SECCIÓN 'COSAS IMPORTANTES'

Instalación

Descarga Helium, súbelo a tu sitio y añade un elemento de script en algún lugar que se cargue en cada página que se pondrá a prueba. Esto típicamente se hace en una sección de encabezado (head) o pie de página (footer). El elemento se ve así:

<script type="text/javascript" src="/path/to/helium.js"></script>

Nota: path/to/helium.js es necesario para reflejar la ruta donde se coloca el archivo javascript helium.js.

Helium se inicia mediante una llamada al método 'helium.init()'. Esto tiene que ser colocado en algún lugar de la página donde se llame después de que cargue la página. Un ejemplo de esto es:

<script type="text/javascript">
    window.addEventListener('load', function(){

        helium.init();

    }, false);
</script>

Nota: En función de la estrategia de carga javascript que emplee tu sitio, es posible que quieras colocar 'helium.init()' dentro de una zona en que se ejecute javascript después de cargar la página.

Uso

Una vez que Helium está activado, cuando se carga el sitio verás una caja con un área de texto con la entrada para tu lista de URLs.

Helium textarea

Después de pegar la lista de enlaces, haz clic en Start (abajo a la izquierda) para iniciar el proceso. Al hacer clic en "Reset to Beginning" se borra el área de texto y los datos almacenados.

La prueba procederá a cargar y procesar cada url que le diste. Cuando esté terminada, se te presentará una ventana de informe que enumera cada hoja de estilo que se ha detectado en la URL. Debajo de cada hoja de estilo, se mostrará una lista de los selectores CSS que fueron detectados que no están en uso en cualquier página.

Helium, resultado de la prueba

Los selectores son identificados por colores

Verde: selectores sin pareja.

Estas son las primarias que no fueron detectadas como en uso.

Negro: combinado de los selectores que se agrupan con los selectores no coincidentes.

Básicamente esto significa que varios selectores se definieron juntos como 'h1, h2,h3{}'. Todos los selectores son probados individualmente por lo que estos se muestran para que posteriormente sean más fáciles de encontrar en las hojas de estilo.

Rojo: selectores malformados.

Estos son muy raros. Esto significa que cuando el navegador trató de probar un selector, no pudo analizar la sintaxis de la forma en que fue escrita. Esto podría ser así ".classname# idname{}" o un "CSS hack" a menudo utilizado para Internet Explorer.

Azul: selector pseudo-clase.

Estos son selectores como ".div:hover" o "input:focus". Estos selectores requieren la interacción del usuario para activarse. En la actualidad, Helium no puede simular las interacciones necesarias para ver si éstos se encuentran o no. Es responsabilidad del desarrollador probarlo de forma manual.

Soporte del navegador

Cualquier navegador moderno que soporte LocalStorage y document.querySelector.

El desarrollador ha decidido que nunca adaptará Helium para soportar IE6 o 7.

COSAS IMPORTANTES

No hay hojas de estilo entre dominios: Helium tiene que cargar las hojas de estilo en tu sitio a través XHR con el fin de analizar los selectores a probar. Esto significa que todas las hojas de estilo de las URLs tienen que estar en el mismo dominio que las páginas que se están probando. Actualmente no hay un servidor back-end para solicitudes de proxy, pero esto podría ser una opción en el futuro.

No debe haber errores de javascript en tus páginas: Si Helium se ejecuta en una página que tiene uno o más errores de javascript, se pueden prevenir fácilmente que se ejecuten en la página Helium y otros scripts. Esto evitará que tus pruebas no funcionen mientras se rastrea. Verifica de antemano que todas las URL que estás probando no generan errores de javascript. Si no estás seguro, intenta ejecutar algunas pruebas de Helium y mira dónde se detiene la página. Echa un vistazo a tus consolas de error en dichas páginas.

No hay soporte sitemap XML: En este momento, la lista de URLs tiene que ir separada línea por línea. No se admiten actualmente los formatos CSV o XML sitemap, aunque los tendrá en una futura versión.

Para Firebug hay un plugin similar a Helium: CSS Usage

Jesus_Caceres