CSS hover inspector

Q: How do I pin the inspector?

Press Space while hovering an element. The panel stays on the page, you can drag it by its top bar, and you can pin more to compare.

The Floating Inspector shows the styles that matter for whatever is under your cursor, in a small panel beside it. Press Space to pin one in place and compare elements side by side.

What it shows

Turn on the Floating Inspector and a compact panel sits next to your cursor, updating as you move from element to element. Properties are grouped so you can scan them quickly:

Layout: width, height, display, gap, margin, padding and box sizing.
Appearance: border radius, background color and text color, each with a color swatch.
Text: the font that is actually rendering, font size, font weight, line height, letter spacing and text alignment.
Accessibility: for text, the contrast ratio against the background with an AA or AAA result.
Image: for images, the natural size, file size and format.

Default values such as zero margin or a transparent background are left out, so the panel only lists properties that are doing something.

How to use it

Start Screen Ruler by clicking its toolbar icon, pressing Alt + Shift + S (Option on a Mac), or right-clicking the page and choosing Screen Ruler.
Press 1, or click Inspector in the control bar.
Move your cursor over the page. The panel follows it and shows the styles of the element underneath.
Press Space to pin the current panel to the page.

Press 1 again to turn it off. Screen Ruler remembers the setting for next time.

Pinning and comparing

Pinning is what makes the Floating Inspector more than a tooltip. Each press of Space leaves a copy of the panel on the page, labelled with the element's tag, ID and classes, and you can pin as many as you like.

Compare side by side. Pin a primary and a secondary button and see exactly which values differ.
Find the source. Hover a pinned panel and the element it came from is highlighted on the page again.
Arrange them. Drag a pinned panel by its top bar to move it. Pinned panels stay attached to their spot on the page as you scroll.
Close them one at a time with the close button in the top bar, or all at once by turning the inspector off.

A pinned panel is a snapshot of the element at the moment you pinned it, which makes it useful for comparing an element before and after a change too.

How it fits with the side panel

The Floating Inspector is for reading, quickly, while you move around a page. When you need everything about one element, click it: the side panel shows the full box model, all the computed CSS and, depending on the element, sections for colors, typography, shadows and more. Many people keep both on, using the floating panel to find the element and the side panel to dig in.

Limits

The panel shows a curated set of properties, not every computed style. For transforms, shadows, filters or anything not listed above, select the element and read it in the side panel. File size for an image is only shown when the browser can report it.

When it is useful

Checking consistency across a set of cards, buttons or headings by pinning one of each.
Finding a font and size by hovering text, without opening anything. See also the font inspector.
Spot contrast problems as you move over text, with the ratio and result shown inline.

The Floating Inspector is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card required.

Common questions

How do I see CSS on hover in Chrome?

Chrome DevTools only updates its Styles pane when you click an element in the Elements panel. With Screen Ruler, press 1 to turn on the Floating Inspector and the main styles of whatever is under your cursor appear beside it as you move.

How do I pin the inspector?

Press Space while hovering an element. The panel stays on the page, you can drag it by its top bar, and you can pin more to compare.

Why are some properties missing from the panel?

Properties at their default values, such as zero padding or a transparent background, are hidden to keep the panel short. Select the element to see its full computed CSS in the side panel.

Is the Floating Inspector free?

It is part of the Inspect and Studio plans. Every install starts with a 7-day free trial with all features unlocked, so you can try it first.