Replace all CSS on a page with new inline CSS

TILsnippet

It can be useful when removing unused CSS to test out the new minimal CSS in browser console itself.

// Immediately focus on the webpage(e.g. click anywhere on the page) after running this code in console.
(function() {
  setTimeout(async()=>{
        [].slice.apply(document.styleSheets).forEach(function(sheet){sheet.disabled=true});
        var style = document.createElement('style');
        // Sometimes the CSS can have octal sequences in it which can't be put inside template literals
        // So just copy from clipboard.
        // Assumes that the minimal CSS is already in clipboard. It would ask for a permission first time
        style.textContent = await window.navigator.clipboard.readText()
        document.head.appendChild(style)
    }, 3000)
})();

I recommend Used CSS chrome extension to get the minimal CSS for any web page.

... Loading comments