How an AI agent uses CSS inspection

Hover any element and get its real, clean, copyable CSS — with the units the author actually wrote.

Updated 2026-10-09 · T3rnel Browser 1.3.0

What the agent can do

• Walks the real cascade through document.styleSheets rather than dumping getComputedStyle, which flattens %, em, rem and vh to pixels and breaks responsiveness the moment you paste it.
• Strips declarations overridden later in the cascade, drops browser defaults, collapses longhand to shorthand where safe, and deduplicates.
• Collects matching :hover, :focus, :active, ::before, ::after and ::placeholder rules, plus @media blocks and referenced @keyframes.
• Copies as plain CSS, Tailwind classes, a styled-components block for the tag the element really is, an Emotion css block, a CSS Modules class, an SCSS or Less block, or a JSX style object with the property names React expects.
• Reports a partial result honestly. A cross-origin stylesheet throws on cssRules; the output names the sheets it could not read instead of returning a rule count that looks complete and is not.

The tools

Calling it over MCP

{ "method": "tools/call", "params": { "name": "browser_css_scan", "arguments": {} } }

Connect a client first: add the MCP Session Bridge. The extension then exposes 97 tools against your signed-in tabs.

Questions

Which tools does CSS inspection use?

browser_css_scan, browser_css_copy, browser_css_edit, browser_css_extract, browser_css_unused.

Is CSS inspection free?

Yes. Every tool listed here works on the free tier.

Does the agent have to ask before using CSS inspection?

Each tool has a risk level: browser_css_scan is low; browser_css_copy is low; browser_css_edit is medium; browser_css_extract is low; browser_css_unused is low. The approval gate is off by default and can be armed in Settings.

Keep going

• All features
• Every MCP tool
• How the approval gate works
• FAQ