A browser widget to extract Critical CSS and Full CSS from a page. Can be used via the browser console.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 16c5e08 Nov 13, 2018
Permalink
Failed to load latest commit information.
Gruntfile.js 1.0.0 Feb 19, 2018
README.md deprecated notice Nov 13, 2018
critical-css-widget.js core update May 22, 2018
critical-css-widget.min.js core update May 22, 2018
critical-css-widget.png Add files via upload Aug 16, 2018
externs.js 1.0.0 Feb 19, 2018
package.json 1.0.0 Feb 19, 2018

README.md

Critical CSS Widget [DEPRECATED]

This widget is deprecated and may not work in newer browsers. For an improved widget, see Style.Tools.

About

A simple browser widget to extract Critical CSS and Full CSS from a page that can be used via the browser console.

The widget is based on a concept by Paul Kinlan, head of Chrome webdeveloper relations team.

https://gist.github.com/PaulKinlan/6284142

The snippet uses a Chrome innovation called getMatchedCSSRules which is deprecated and will be removed in Chrome 63. The Critical CSS Widget is made cross browser using a polyfill for getMatchedCSSRules.

image

Usage

Copy & paste the widget javascript code directly in the browser console (F12) and use the following methods with an optional callback to extract critical CSS.

Extract Critical CSS

// file download
o10n.extract();

// callback
o10n.extract('critical',function(css) {
   console.log('Extracted critical CSS:',css);
});

Extract Full CSS

// file download
o10n.extract('full');

// callback
o10n.extract('full',function(css) {
   console.log('Extracted Full CSS:',css);
});

Copy & Paste Instant Extract

The following code will instantly start a Critical CSS download after pasting the code into the browser console.

(function(d,c,s) {s=d.createElement('script');s.async=true;s.onload=c;s.src='https://cdn.rawgit.com/o10n-x/critical-css-widget/master/critical-css-widget.min.js';d.head.appendChild(s);})(document,function() {
   // critical css file download
   o10n.extract();
});