Extracting only the css used in a specific page
I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.
The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.
http://www.sitepoint.com/dustmeselectors/
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).
How can I extract only the used CSS on a given web page and have that combined into a separate style sheet?
(deleted my comment to RwwL answer to make it a thorough answer)
UnCSS, whether node.js or as a grunt or gulp task, is able to list used CSS rules by an array of pages in an array of Media Queries.
uncss: https://github.com/giakki/uncss
grunt-uncss: https://github.com/addyosmani/grunt-uncss
gulp-uncss: https://github.com/ben-eb/gulp-uncss
Multipage:
You can pass files
as an argument to any of the 3 plugins, like:
var files = ['my', 'array', 'of', 'HTML', 'files'],
options = { /* (…) */ };
uncss(files, options, function (error, output) {
console.log(output);
});
Avoid:
urls (Array):
array of URLs to load with Phantom (on top of the files already passed if any).
NOTE: this feature is deprecated, you can pass URLs directly as arguments.
Media Queries and responsive are taken into account:
media (Array):
By default UnCSS processes only stylesheets with media query "all", "screen", and those without one. Specify here which others to include.
You can add stylesheets, ignore some of them, add inline CSS and many other options like htmlroot
Remaining problems:
1/ Conditional classes if you use them for IE9-. They obviously won't be matched in a WebKit PhantomJS environment!
HTML:
<!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class -->
CSS:
.ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */
Should they be added by hand or script to the html
element in testing environment? (how it renders is of no importance)
Is there an option in uncss?
As long as you don't style with :not(.ie9)
(weird), it should be fine.
EDIT: you can use the ignore option with a pattern to force uncss to "provide a list of selectors that should not be removed by UnCSS". Won't be tested though.
2/ Scripts that will detect resolution (viewport width) and adapt content to it by removing/adding it or adding a class on a container. They will execute in PhantomJS in desktop resolution I guess and thus won't do their job so you'll need to modify calls to PhantomJS or something like that... Or dig into options or GitHub issues of the 3 projects (I didn't)
Other tools I heard of, not tested or barely or couldn't test, no idea about the MQ part:
- in grunt-uncss readme, the Coverage part
- ucss from Opera (there's already an ansswer here, couldn't make it work)
- Helium
- CSSESS
- mincss
Addy Osmani has countless presentations of 100+ slides presenting awesome tools like this one: https://speakerdeck.com/addyosmani/automating-front-end-workflow (you'll regret even more that days are made only of 24 hours and not 48 err wait 72 ^^)
Is there a way to check which CSS styles are being used or not used on a web page?
Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.
How to export only the used css from a site?
Its tricky because you can't know all of the javascript renderings on a page that would affect the css. I wrote my own plugin that i could run which would extract the visible css on the page and resort the css in order of cascading hierarchy. This is useful in that i can run it after any javascript action but it still requires investigation into the existing javascript. You are welcome to use it.http://stcreative.co.uk/tutorials/css_sorter/
Extract used CSS including JavaScript
The newest version of Google Chrome now has this feature built-in.
From the developer tools (press F12 to show them), there is now a new "Coverage" menu.
Simply start recording, reload the page, and then stop recording.
It will show JS/CSS coverage:
You can then click on an individual CSS files to see coverage details:
Related Topics
How Does Object-Fit Work with Canvas Element
Where Do CSS and JavaScript Files Go in a Maven Web App Project
How to Style the Number on a HTML List
Font-Weight CSS Transition in Chrome
Sass and Rounding Down Numbers. Can This Be Configured
Grid Styling - Overwrite Style of Ag-Grid
In Vue.Js Component, How to Use Props in CSS
Horizontally Scrollable List of Cards in Bootstrap
Which HTML5 Reset CSS Do You Use and Why
Issue When Centering Vertically with Flexbox When Heights Are Unknown
CSS - Style a Link Based on Its "Rel" Attribute
Are There Any Cons to Using Color Names in Place of Color Codes in CSS
Is There a CSS Media Query to Detect Windows
Internet Explorer "CSS Was Ignored Due to Mime Type Mismatch" on Local Files (No Server)