Whether your website is a work in progress or fresh from the designer, it is likely to contain unused coding, which can be difficult to manually identify and track down. Helium (www.github.com/geuis/helium-css), a JavaScript based tool for discovering unused CSS across many pages on a website, runs from within the user’s web browser and makes it easy to develop more accurate, less cluttered CSS code; free from unsightly digital debris that often surrounds “let’s try this and see what happens” coding practices.
According to its publisher, Helium accepts a list of URLs for different sections of a website and then loads and parses each page to build up a list of all required style sheets. Helium then visits each of the pages in the URL list to check if the selectors found in the CSS style sheets are actually used on the pages referencing those style sheets.
Helium, a JavaScript based tool for discovering unused CSS across many pages on a website, runs from within the user’s web browser and makes it easy to develop more accurate, less cluttered CSS code.
Next, Helium generates a report that details the results of each style sheet analysis and which of the selectors were not found to be used on any of the scanned web pages, allowing those selectors to be pruned from the site’s coding.
The publisher notes that it is important to only run Helium on a local, development, or otherwise privately accessible version of your website, because if you run this on your public site, all of its visitors will be able to see the Helium test environment.
Setting the script up is easy and takes only a few minutes.
Helium’s publisher advises adding the script element somewhere on your site that is loaded into every page slated to be tested, such as an included header or footer section, and then initializing it via the provided “helium.init()” coding, which is placed where it will be called after the tested page loads.
Upload the helium.js file and you are ready to go.
The next time your site loads, there will be a box with an HTML textarea where the URL list is input in a line separated format. Click the “start” button to begin the process and each URL will be analyzed, with a report presented when the testing is completed.
This report lists each style sheet URL that was detected, and then under each sheet, the report lists the CSS selectors that were not detected as being used on any page.
These selectors are color-coded, with green showing unmatched selectors that were not detected as being used, along with black text for matched selectors that are grouped with non-matched selectors and red malformed selectors.
Pseudo-class selectors such as “.div:hover” or “input:focus” are indicated in blue and must be manually tested as these selectors require user interaction to activate, preventing Helium from simulating the interactions to test their availability.
Helium reportedly works with any modern web browser that supports Local- Storage and document.querySelector functions; although the publisher is adamant about ignoring support for troublesome Internet Explorer variants and warns of several important issues.
For example, there is no support for cross-domain style sheets, since Helium has to first load your site’s style sheets via an XHR process before parsing the selectors to test. This process restricts tested style sheet URLs to those on the same domain as the pages being tested; and while there is currently no backend server setup to proxy test requests, the publisher stated that this might be an option for the future.
Other future possibilities (but current roadblocks) include a lack of XML support and intolerance of any JavaScript errors on tested pages.
If you are looking for ways to optimize the efficiency and load times of your website, then clearing out the clutter of unused coding is a good place to start — and Helium will give you a free way to begin. Check it out and see if it works for you.
