Bookmarklets

Unused CSS Detector

bookmarklets Web Dev Performance

The Unused CSS Detector bookmarklet is a powerful tool for identifying unused CSS rules on any webpage, helping you optimize your stylesheets and improve page performance.

CSS Optimization Made Easy

This bookmarklet analyzes all CSS rules and identifies those that aren't being used by any elements on the page, helping you clean up your stylesheets.

javascript:!function(){const t=document.querySelectorAll('style, link[rel="stylesheet"]'),e=[],n=(new Set,document.getElementsByTagName("*"));t.forEach((t=>{let o;if("STYLE"===t.tagName)o=Array.from(t.sheet?.cssRules||[]);else try{o=Array.from(t.sheet?.cssRules||[])}catch(t){return}o.forEach((o=>{o instanceof CSSStyleRule&&!function(t){for(const e of n)try{if(e.matches(t.selectorText))return!0}catch(t){}return!1}(o)&&e.push({selector:o.selectorText,styles:o.style.cssText,source:"STYLE"===t.tagName?"Internal Stylesheet":t.href})}))}));const o=document.createElement("div");o.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        width: 600px;\n        max-height: 80vh;\n        padding: 20px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10000;\n        overflow-y: auto;\n    ",o.innerHTML=`\n        <div style="margin-bottom: 15px;">\n            <strong>Unused CSS Detector</strong>\n            <button onclick="this.parentElement.parentElement.remove()" style="float:right;margin-left:10px;">×</button>\n        </div>\n        <div style="margin-bottom: 20px;">\n            <strong>Total Unused Rules Found: ${e.length}</strong>\n        </div>\n        <div style="margin-bottom: 20px;">\n            ${e.map((t=>`\n                <div style="margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">\n                    <div style="margin-bottom: 5px;">\n                        <strong>Selector:</strong> ${t.selector}\n                    </div>\n                    <div style="margin-bottom: 5px;">\n                        <strong>Styles:</strong> ${t.styles}\n                    </div>\n                    <div style="font-size: 0.9em; color: #666;">\n                        <strong>Source:</strong> ${t.source}\n                    </div>\n                </div>\n            `)).join("")}\n        </div>\n        ${0===e.length?'\n            <div style="color: #4CAF50;">\n                No unused CSS rules found on this page.\n            </div>\n        ':""}\n    `,document.body.appendChild(o)}();
Drag me to bookmark bar: 👉🏻 Unused CSS Detector

Why Use Unused CSS Detector?

The Unused CSS Detector bookmarklet is essential for web developers who want to optimize their pages by removing unused CSS. It helps reduce file sizes, improve load times, and maintain cleaner stylesheets by identifying and removing dead code.