CSS Extract: Used CSS by Element & Subtree
https://www.weedesign.de/ · Developer Tools
Media
5 items
Description
Get the used CSS of any element and its subtree, with every state, media query and font, exactly as authored. By weedesign.de Select any element in the DevTools Elements panel and get the used CSS of that element and its whole subtree, exactly as it is written in the stylesheets. The unused CSS is left out. What comes back is a self-contained block you can paste into another project, a CodePen, a CMS or an email template, without dragging the page's stylesheets along with it. WHAT MOST USED-CSS TOOLS LEAVE OUT Extracting only the rules that match right now, at this window size, in this state, gives you CSS that falls apart the moment someone hovers a button or resizes the window. This one keeps the rules that are inactive at the moment of extraction: the :hover and :disabled blocks, the @media queries that do not match your current viewport, the cascade layer order, and the @font-face and @keyframes definitions those rules point at. Deleting a rule you do not need takes a second. Tracking down one that never made it into the export takes a lot longer. WHAT YOU GET • Every rule that matches the element and its whole subtree, plus the inherited rules from its ancestors (fonts, colors, custom properties on :root) • Every state, active or not right now: :hover, :focus, :active, :checked, :disabled and the rest • Every @media and @supports block, matching the current viewport or not • Only the @font-face, @keyframes, @property and @counter-style definitions that are actually referenced • Values as the author wrote them. Hex colors stay hex, shorthands stay shorthands, calc() stays calc(), instead of being flattened into computed values • Cascade layers, including the @layer order statement, plus @container, @scope and nested CSS • Open shadow roots and constructed stylesheets (adoptedStyleSheets) • Elements inside iframes, and the <html> element for the whole page OUTPUT • Compact: one rule per line, a header per stylesheet, keyframes and font-faces at the end • Pretty: indented, in source order • Optionally trim selector lists down to the selectors that actually match • Optionally rewrite relative url() references to absolute ones • Copy CSS, download a .css file, copy the HTML, or download a self-contained .html page with the CSS embedded • Preview opens the element in a new window styled only by the extracted CSS, so you can check the used CSS is complete before you paste it anywhere COMPUTED STYLES MODE Browse the element tree, see the computed values that differ from the browser defaults, and export the computed styles of every element as CSS. Useful when a rule is coming from somewhere you cannot find. HOW IT WORKS • Two entry points: a CSS Extract pane in the Elements sidebar that follows your selection, and a full CSS Extract tab with an in-page element picker • Stylesheet text is read from the DevTools resource list, with fallbacks (fetch inside the page, fetch by the extension, live CSSOM), so cross-origin stylesheets work too • Waits for the page to finish loading, and extracts again on its own when stylesheets arrive late • A Details readout shows, per stylesheet, where its text came from and how many rules matched PRIVACY No permissions, no data collection, nothing leaves your browser. The extension only runs inside DevTools, on the page you are inspecting. Made by weedesign.de