Instantly share code, notes, and snippets.

@scottjehl /criticalcss.js Secret
Last active Jan 11, 2018

Embed
What would you like to do?
critical CSS
/*
criticalCSS by @scottjehl. Run this on your CSS, get the styles that are applicable in the viewport (critical). The url arg should be any part of the URL of the stylesheets you'd like to parse. So, 'all.css' or '/css/' would both work.
*/
function criticalCSS( url ){
var sheets = document.styleSheets,
maxTop = window.innerHeight,
critical = [];
function aboveFold( rule ){
if( !rule.selectorText ){
return false;
}
var selectors = rule.selectorText.split(","),
criticalSelectors = [];
if( selectors.length ){
for( var l in selectors ){
var elem;
try {
// webkit is really strict about standard selectors getting passed-in
elem = document.querySelector( selectors[ l ] );
}
catch(e) {}
if( elem && elem.offsetTop <= maxTop ){
criticalSelectors.push( selectors[ l ] );
}
}
}
if( criticalSelectors.length ){
return criticalSelectors.join(",") + rule.cssText.match( /\{.+/ );
}
else {
return false;
}
}
for( var i in sheets ){
var sheet = sheets[ i ],
href = sheet.href,
rules = sheet.cssRules,
valid = true;
if( url && href && href.indexOf( url ) > -1 ){
for( var j in rules ){
var media = rules[ j ].media,
matchingRules = [];
if( media ){
var innerRules = rules[ j ].cssRules;
for( var k in innerRules ){
var critCSSText = aboveFold( innerRules[ k ] );
if( critCSSText ){
matchingRules.push( critCSSText );
}
}
if( matchingRules.length ){
matchingRules.unshift( "@media " + media.mediaText + "{" );
matchingRules.push( "}" );
}
}
else if( !media ){
var critCSSText = aboveFold( rules[ j ] );
if( critCSSText ){
matchingRules.push( critCSSText );
}
}
critical.push( matchingRules.join( "\n" ) );
}
}
}
return critical.join( "\n" );
}
// you could run this from the browser console to copy to your clipboard like this.
// I'm specifying that it only parse files whose URL contains "all.css"
copy( criticalCSS( "all.css" ) );
@alhoseany

This comment has been minimized.

alhoseany commented Jan 11, 2018

Hi,
Thank you for this great tool. The only problem I had with it, is that it does not copy the styles for pseudo-elements like :before and :after. also, it does not collect the styles using attributes selector like "[data-tve-custom-colour="38625233"]".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment