CSS Extractor - review usage of external, imported or embedded CSS stylesheets

Webpage extractionImage ExtractorLink Extractor► CSS / Stylesheet ExtractorInline CSS to ClassesKeyword Extractor
SERP specificSERP rank CheckerSERP rank DominationSERP rank Comparison
MiscMultiSearchDuplicate Content FinderConvert / Text Transform
Otherjquery.optionBox pluginA note about browsers
ArticlesScraper with PHP and jqueryHow to parse SERPs in jqueryHow to execute stored PHP
  Run CSS Extractor CSS Extractor FAQ

Extract any CSS or stylesheet; Localize CSS-classes not being used in your HTML.


This tool finds and parses external, internal (embedded) and imported CSS stylesheets for a webpage, and then maps the actual usage by the webpage/document of each styledefinition. Each of the webpage class and #id -references is detected and counted, and then compared to the found CSS stylesheets. By that you can more easily detect unused CSS-classes, duplicated id's and be aware of incorrect class-references.


∗CSS Extractor - Please copy URL directly from your browser
A fully qualified URL, eg www.example.com or subdomain.example.com/css-extraction.html#css-code
 
  

Recent Improvements

25.02.2012 - The CSS extractor now supports comma separated combined stylesheets, eg <link href="{/min/?f=}stylesheet1.css, stylesheet2.css, stylesheet3.css, ..">. Multiple combined stylesheets has been increasingly popular, such as by the Minify-project, some people use in WordPress.

11.06.2011 - New layout

CSS

Completely redesigned output layout

Now each found occurence of a CSS-reference has its own tabcontrol (basic jQuery ui tab-plugin) with two tabs in each set : The "old" CSS-class report, and a new tab containing the CSS sourcecode presented by Alex Gorbatchev's excellent Syntaxhighlighter

For the sourcecode-tab, compressed or minified CSS is wordbreaked for easier inspection.

Note : I'm currently developing a CSS-beautifier / prettyfier, that let you inspect minified CSS more humanly. This little script will be part of another tool i have been asked to create : An inline element 2 external stylesheet service. When this tools is ready the CSS-code tab will be expanded with "View prettyfied" / "View original" options..


10.06.2011 - Corrections

  • Empty or non-valid CSS-references is now marked with red color
  • Corrected bug regarding "complex" relative URL's, eg ../../stylesheet.css
  • Now automatic support for compressed (eg zipped) stylesheet-references
  • Now also the content for @imported stylesheets is shown in the "Show CSS" dropdown box
  • Corrected an error that could let a /* */ comment that included {..} be parsed as a CSS-class

© 4horizons.com · info@4horizons.com