Frequently Asked Questions

Can't find an answer? Contact us


Service Features

What are the checkboxes below the download button for?

Those elements are the css selectors. The ones that aren't checked are not used and won't be present in the new CSS file when you click download. If you want to keep a selector that's unchecked, just click it and it'll be available in the CSS file.

Why are some selectors incorrectly marked as unused?

This can happen when our crawler was unable to explore some of your pages. You can enable authenticated crawling to crawl more pages or add a list of pages to explore if you believe they were not discovered. You may also manually mark the selectors you want to keep and then click download.

How does the Javascript analysis work?

In order to check if some rules are used in the Javascript scripts, all the Javascript files are fetched. CSS classes and identifiers are searched for by scanning Javascript strings. When a match is found, the rule is marked as used. Some Javascript is also evaluated using the PhantomJS browser. This way we are able to discover DOM elements created by Javascript.

Are CSS media queries (responsive design) supported?

All media queries in your CSS files are included in the exploration and will be optimized. Flexible designs, like bootstrap framework, are supported.

Are the html style elements explored?

The styles defined in the html style element won't be cleaned. We encourage you to put those styles in separate CSS files if you want to removed the unused rules. However, if you import css files in a style element, they will be cleaned.

We don't explore style elements for a few very good reasons:

  • Our tool explores an entire site, and finds rules which are not used at all in the entire site. If we included style elements, we would need to generate a separate result for every single HTML page, which quickly gets unmanageable on a reasonable-sized site.
  • According to w3Schools, "The most common way to add CSS, is to keep the styles in separate CSS files". This isn't a feature that would be beneficial to many of our users, so we put our energy into more useful features instead.
  • Keeping CSS separate to HTML files is better practice, since it is generally more efficient for browsers to download the CSS file once, and use the same file for all pages. The only caveat to this is when you have the critical path CSS for a landing page in a style element. We are looking to support critical path CSS in the future but don't have anything available at the moment.

Are inline styles explored (the style attribute on HTML elements)?

We do not explore style attributes. Because the style attribute is applied directly to an HTML element, it is always used and we could never mark it as unused.

How do I install the optimized CSS files on my site?

Our service cannot install the optimized CSS files for you, and this process will vary between different sites. We're looking to create guides for some of the most common technologies to help our users.

The general process though is to find where your CSS files are located on your server, make a backup of them just in case, then replace them with the files you have downloaded from UnusedCSS.

How can I concatenate all my CSS files?

We currently do not provide a tool to automatically concatenate all CSS files. However simply copying and pasting the content of each CSS file into a single new file should work in most cases. The CSS definition may be sensitive to the order the CSS are included in your HTML and you should follow the same order when concatenating files. More information is a available here: Concatenate multiple CSS files into one.

I have cleaned my site but I still see unused CSS using tool X. Why?

The results you get using the Chrome tool (or another tool) are different because the techniques used for the clean up are different.

  • Our tool looks at all the pages of your site instead of just one. It is important to take all pages into account because some elements may appear on just one page.
  • We will explore Javascript files and make sure that the classes are not used in the scripts. If that step is skipped, the design may break when there are user interactions with dynamic page elements.

Is it possible to download all the css files at once?

We currently do not have a download all button.


Site exploration (crawling)

How can I control the crawling process?

There are multiple options to control the crawling of your site.

  • You can create a page with a list of links you absolutely want to crawl and point our tool to this page. The links of the page will be crawled first and then the rest of the site will be explored using breadth first exploration.
  • You can also create a blacklist for pages you don't want to crawl. If you have lots of pages with the same structure, you can blacklist most of them to keep under the page count while exploring all page structures.
  • Links that are outside of the sub-domain provided (ie. sub-domain.example.com) will not be explored.
  • Finally you can provide a list of pages that will be used to start the exploration in the site settings page (Advanced options).

Can I remove the unused CSS selectors on just one page?

Yes you can do that. Once you have an account, you can change the site exploration settings. There's a checkbox if you want to clean just one page.

Is it possible to use this tool on an intranet website?

It is not possible to use our service on intranet websites. The site has to be accessible from the internet.

Can I explore pages behind a login form?

Our service allows you to provide a username and password. They are inserted in your login form to begin the authenticated exploration. It will enable our crawler to explore pages that require authentication.

How are the pages explored?

The tool will first collect the links available on the first page you provide. Then it will open each of the links it found on the first page before following any additional links. This is formally known as a breadth first search.

Can the crawler submit forms, how are links discovered?

The crawler will only explore pages available in links (HREF attribute of A elements) and will not do any HTTP POST requests or submit forms (except for your login form if you have enabled that option). You may however customize the crawling process in the site settings by providing a list of pages to explore.

Some CSS files are sent only on mobile devices?

If you have a special set of CSS files that are just sent when you browse using a mobile device, you may want to customize the crawler user agent. By default the crawler identifies itself as a desktop browser. You can change the user agent to an arbitrary string like "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_4 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B350 Safari/8536.25".

Can I use this service with my WordPress website?

Yes, our service is compatible with WordPress websites. Some users have reported that deactivating the plugin iThemes Security (formerly Better WP Security) during the exploration process yields better results. You may also want to temporarily deactivate any CSS compression plugins.


Account management

How do I get an account?

To create an account:

  • go to the home page
  • type the address of the site you want to check in the form
  • click detect unused css rules
  • on the new page, at the bottom of the page, type your email address and submit

We will then crawl your website. Within an hour, you will get an email to say the crawling has finished. Then you will be able to view the clean CSS file.

What are the payment options?

All payments are processed by our payments provider Braintree (a PayPal company). We accept all major credit cards, debit cards and PayPal.


Definitions

What is a CSS selector?

A CSS selectors determine which style rules apply to the elements of your html document. For example, in h1 em { color: blue }, h1 em is the selector.

There is a great list of example CSS selectors at w3schools.

What's a CSS rule?

A CSS rule is a selector and a declaration. The declaration specifies any number of style effects to apply to an element. For example, in i { color: blue; }, i is the selector and { color: blue; } is the declaration.