Home > Features > Dev Depot: Helium Tests for Unused CSS • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Helium Tests for Unused CSS

Dev Depot: Helium Tests for Unused CSS

September 19, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

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

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.

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.


Visa Cracks Down on ‘Shell’ Billing Firms

There was a time not so long ago when website operators created billing companies in favorable jurisdictions, whose sole purpose was to bill customers for services provided by the operator and remit the... More »

Retailers Forecast Consumer Trends for 2017

With the New Year barreling down upon us, retailers already are anticipating product categories to grow, and what both vendors and consumers can expect in the coming year. Promotions for 2017 and the release... More »

Sex Toy Manufacturers Offer Predictions for 2017

In 2016, it was evident that the pleasure products sector of the adult industry was thriving when Forbes Magazine quoted CalExotics President Susan Colvin as saying that it now “stands as a $15 billion... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.


Everything To Do With Sex Show

Jan 27 - Jan 29
Halifax, Nova Scotia

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!