Bookmarklets

CSS Class Inspector

bookmarklets Web Dev CSS

The CSS Class Inspector bookmarklet is a powerful tool for inspecting CSS classes and their computed styles on any webpage.

Interactive CSS Analysis

This bookmarklet provides real-time information about CSS classes as you hover over elements, showing you the applied styles and their computed values.

javascript:!function(){const t=document.createElement("div");t.style.cssText="\n        position: fixed;\n        background: rgba(0, 0, 0, 0.95);\n        color: white;\n        padding: 16px;\n        border-radius: 8px;\n        font-size: 14px;\n        z-index: 10000;\n        pointer-events: none;\n        display: none;\n        max-width: 400px;\n        box-shadow: 0 4px 20px rgba(0,0,0,0.4);\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    ",document.body.appendChild(t);function e(e){const n=e.target,o=n.className;if(!o)return;const i=o.split(" "),s={};i.forEach((t=>{s[t]=function(t,e){const n=window.getComputedStyle(t),o={},i=document.createElement(t.tagName);document.body.appendChild(i);const s=window.getComputedStyle(i);return document.body.removeChild(i),["display","position","flex","grid","margin","padding","width","height","color","background","border","font-size","font-weight","transform","animation","box-shadow","opacity","z-index","overflow"].forEach((t=>{const e=n.getPropertyValue(t);e!==s.getPropertyValue(t)&&(o[t]=e)})),o}(n)}));const r=i.filter((t=>Object.keys(s[t]).length>0));if(0===r.length)return;const d=`\n            <div style="margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;">\n                <div style="color: #66BB6A; font-weight: 500; margin-bottom: 4px;">\n                    Element: ${n.tagName.toLowerCase()}${n.id?`#${n.id}`:""}\n                </div>\n                <div style="color: #B0BEC5; font-size: 12px;">\n                    Hover over classes below to see their styles\n                </div>\n            </div>\n            ${r.map((t=>`\n                <div style="margin-bottom: 16px; cursor: pointer;" \n                     onmouseover="this.style.background='rgba(255,255,255,0.1)'" \n                     onmouseout="this.style.background='transparent'">\n                    <div style="color: #42A5F5; font-weight: 500; margin-bottom: 6px;">\n                        .${t}\n                    </div>\n                    <div style="color: #E0E0E0; font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; line-height: 1.5;">\n                        ${Object.entries(s[t]).map((([t,e])=>`<span style="color: #FFB74D;">${t}</span>: ${e};`)).join("<br>")}\n                    </div>\n                </div>\n            `)).join("")}\n        `;t.innerHTML=d,t.style.display="block";const l=n.getBoundingClientRect(),a=window.innerWidth,p=window.innerHeight;l.right+t.offsetWidth+20>a?(t.style.right=a-l.left+10+"px",t.style.left="auto"):(t.style.left=`${l.right+10}px`,t.style.right="auto"),l.top+t.offsetHeight+20>p?(t.style.bottom=p-l.top+10+"px",t.style.top="auto"):(t.style.top=`${l.top}px`,t.style.bottom="auto")}function n(){t.style.display="none"}window.stopInspector=function(){document.removeEventListener("mouseover",e),document.removeEventListener("mouseout",n),t.remove(),o.remove()},document.addEventListener("mouseover",e),document.addEventListener("mouseout",n);const o=document.createElement("div");o.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        padding: 16px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n        z-index: 10001;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    ",o.innerHTML='\n        <div style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;">\n            <div>\n                <div style="font-weight: 500; color: #333; margin-bottom: 4px;">CSS Class Inspector</div>\n                <div style="font-size: 12px; color: #666;">Hover over elements to inspect their classes</div>\n            </div>\n            <button onclick="this.parentElement.parentElement.remove()" \n                    style="background: none; border: none; font-size: 20px; cursor: pointer; color: #666; padding: 0 4px;">\n                ×\n            </button>\n        </div>\n        <div style="display: flex; align-items: center; gap: 8px; padding: 8px; background: #f5f5f5; border-radius: 4px;">\n            <input type="checkbox" checked \n                   onchange="this.isActive = this.checked"\n                   style="width: 16px; height: 16px;">\n            <label style="color: #333; font-size: 14px;">Enable Class Inspection</label>\n        </div>\n        <div style="margin-top: 12px; font-size: 12px; color: #666; line-height: 1.4;">\n            <div style="margin-bottom: 4px;">• Shows only styles that differ from default</div>\n            <div style="margin-bottom: 4px;">• Hover over classes to highlight their styles</div>\n            <div style="margin-bottom: 8px;">• Click the × to close this panel</div>\n            <button onclick="window.stopInspector()" \n                    style="width: 100%; padding: 8px; background: #ff4444; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500;">\n                Stop Inspector\n            </button>\n        </div>\n    ',document.body.appendChild(o)}();
Drag me to bookmark bar: 👉🏻 CSS Class Inspector

Why Use CSS Class Inspector?

The CSS Class Inspector bookmarklet is essential for web developers who need to understand how CSS classes are being applied to elements. It helps identify styles, debug CSS issues, and understand the cascade of styles on your page.