Find unused CSS - Help

Service Features

What is the list of checkboxes below the download button?

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 hit download. If you want to keep a selector that's unchecked, just click it and it'll be available in the CSS file.

Some selectors are marked as unused but I know there're used!

Just below the download button, there's a list of all the file's selectors. You can mark the selectors you want to keep and then click download. You may also want to enable the authentication in the settings in order to check your site's private pages.

Can I download all files at once (zip archive)?

This feature is not yet available but I'm thinking about it.

How is the javascript analysis working?

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 in the files using regexps. When a match is found, the rule is marked as used.

Are the CSS media queries supported?

Yes the media queries parts of the CSS definitions are included in the exploration and will be optimized.

Are the html style elements explored?

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

Site exploration (crawling)

How can I control the crawling process?

There are a bunch of things you can do 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. That option is available on your site settings.

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.

How can I explore more page?

You may explore a custom list of pages. In order to that do, you need to create a page with links to all the pages you want to crawl and point the tool to this 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. It will enable our crawler to explore pages that require authentication.

How are the pages explored?

The tool will first collect the links (l1, l2... ln) available on the page you provide. Then it will open the page l1 and collect all the links of that page. Then it will do the same for l2 and all the other links available. It's a breadth first search.

Can the crawler submit forms?

The crawler will only explore pages available in links and will not do any HTTP POST requests or submit forms (except for your login for if you have enabled the option). You may however create a custom page with links to all the pages behind forms to force the crawler to explore them.

Account management

How do I get an account?

To create an account you have to:
- 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

After around 1 hour or less, you will get an email. Then you will be able to view and download the clean CSS file.

How can I remove my account?

You may remove your account at any time using the "Delete my account" link on the settings page.

Definitions

What's 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.

You can read more about selectors here

What's a CSS rule?

A CSS rule is a selector and a declaration. The declaration specifies a bunch of style effects. For example, in "i { color: blue; }", "i" is the selector and "{ color: blue; }" is the declaration.

What is a one level deep exploration?

It means that we will check the page you specify plus all the pages that have a link on this page. The whole site won't be explored but it is generally enough to get the unused css selectors. Additionally, you can customize the selectors you don't want before downloading the file.