Elements Panel

The "Elements" tab in the Edit panel lets you inspect elements in all panes at once and edit their content, style and attributes. It also gives you quick information on their dimensions, font and colors.

Inspect element

Inspecting elements in Polypane is made as easy as possible, and there's multiple ways to inspect elements:

• Hold ⌥ and hover over + click the element you want to inspect.
• Click the inspect element button in the elements panel.
• Click the inspect element button in the Address bar.
• Press ⇧ ⌘ C
• Right-click an element and select "inspect element" in the context menu.

Any element you hover on will be highlighted in all panes, drawing areas for the content, padding, border and margin, as well as guides for the sides of the element. It will also show you a tooltip with information like element dimensions, color and font info, and accessibility information.

When you click an element it will be inspected in the Elements panel. To stop inspecting without selecting an element, press esc. For more on the contents of the element tooltip, read about Polypane peek.

Dom Tree view

At the top of the navigator is the document source tree view ("DOM tree"). Hover over these to highlight the element in all panes and click them to inspect them. The selected element will automatically be made visible in the tree (and be available as $0 in the Console panel).

In the treeview elements that are hidden are dimmed. Double click an attribute in the tree view to copy its value.

As you inspect elements on the page, the elements will also be highlighted in the DOM tree view.

Drag the bottom or right side (depending on where the panel is) of the DOM Tree to resize it.

Flex and Grid layout overlays

Elements that have a grid or flex display value will have a badge next to them. Clicking the badge will show an overlay in all panes that shows the grid or flex layout. Click the badge again to hide the overlay.

Container overlays

Container elements are given a "container" badge. Clicking the badge will show an overlay in all panes that shows the container. Click the badge again to hide the overlay.

Hover the badge to get information about the container like the name, type and current dimensions.

Navigator

Right below the dom tree is the navigator. This will show you information about the currently selected element.

Element info

Hover over the element (<h3> in the above screenshot) to highlight it in all panes. Click a class or ID to copy it as CSS.

The icons to the right of the element name let you, from left to right:

• Reload the element styles,
• Toggle the visibility of the element,
• Toggle layout debugging of the element,
• Create an Element screenshot of it in the selected pane,
• Toggle the element state,
• Copy a unique CSS or Xpath selector to clipboard,
• Inspect the element in the Chromium devtools.

If the element has children those are shown below it. Hover them to highlight in the panes, and click on any to drill down and inspect them.

On the next line, the navigator shows the foreground and background color (if defined) of an element. Click on them to copy them.

The rendered font is shown next, along with the rendered font size and line height. Clicking it will copy the CSS font declaration.

After the font information you'll see a red cross, green AA or green AAA. This indicates whether or not your text is readable according to WCAG standards at AA or AAA level. It calculates the actual contrast by taking element opacity and ancestor backgrounds into account. Hover the score to show a tooltip with a preview and the specific contrast ratio. Click the contrast info to open the background and foreground color in the color picker where you can further inspect and edit them.

At the right side, the navigator displays the visual element dimensions. If the element has a specific aspect ratio, that is also shown. Click it to copy the dimensions to clipboard.

Toggle layout debugging

The layout debugging icon (the grid icon) lets you toggle layout debugging for the selected element. This works the same as layout debugging except instead of the entire document getting outline, only the selected element and its children will get outlines. When layout debugging is active for an element you'll see a dot in the tree view.

Toggle element state

With Toggle element state (the rhombus icon) you can force an elements pseudo state style: :hover, :focus, :focus-visible, :focus-within, :active, :target and :visited. This is useful for debugging styles that are only applied in certain states.

When an element has a state applied, the icon will be filled in, and a yellow dot will show in the tree view. Hover that yellow dot to see which pseudo states are being applied.

All pseudo state are reset when you reload the page.

Copy selector

The copy icon opens a submenu that lets you copy a CSS selector or an XPath selector to the element. These are both unique so can be used for automated testing.

Content editor

If an element has only text content, you can edit the content here and it will be automatically applied to all panes. If an element has a mix of text content and elements as children, you will be able to select the text as "text" in list of child elements.

The content editor will automatically resize to fit the content (up to a certain height) and when you hover it a copy button will appear in the lower right that will allow you to copy the content in one go.

Style differences between panels

Polypane will show the styles applied to the pane you selected the element in. You can use the "Pane" dropdown below the navigator to switch to the styling of the element in a different pane.

Box model

Click the "box model" button to toggle showing the box model information for your element.

Because an element can have different dimensions in each pane, you can select which pane to show the box model for. Hover over any part of the box model (margin, border, padding or content) to highlight just that part of the element in all panes.

The box model overview in Polypane shows more than you might be accustomed to in other browsers:

• If your element has positioning, that's shown in the box model too, along with the offset.
• A box shadow is rendered for elements that have one.
• The border radius for elements is shown (in pixels).
• If an element has a specified overflow value, that's shown in the bottom right.

This gives you a glanceable overview of what your element looks like.

You can click the arrow to the right of the box model to hide it so you have more space for the element editor.

Cascade Layer overview

When your page uses @layer, Polypane contructs a layer tree that shows you the structure of your layers.

Layers that are active for the currently selected element are displayed as normal, while layers that do not contain styles for the selected element are dimmed. This way you can quickly see which parts of your layer structure you'll have to inspect.

Element editor

The element editor lets you change the style, computed style, attributes and dataset of the selected element, all synced between panes.

Style

The style tab will parse your CSS and list all the selectors that have effect on your element, either directly or through inherited values. It will also show the styling for pseudo elements (like ::before and ::first-line) and pseudo classes (like :hover and :any-link), as well as @keyframe and @font-face` declarations that are applied to the element.

If a rule set is made up of multiple selectors (using ,) then the one that targets your element will be highlighted. On the right side, you'll see the stylesheet the selector comes from, as well as the selector's specificity. Click the specificity to open an explainer page for that selector in the Browser panel. Click the [+] icon to highlight all elements matching that selector.

Any media queries, supports queries, container queries, layers, scoping rules or other at-rules as well as nesting are also shown, so you always know what rules apply to your element.

You can edit values by clicking on them and apply them by pressing Enter. If you're editing any numerical value, you can use the up and down keys to change the value. Holding ⇧ will change the value by 10, holding ⌘ changes the value by a 100, while holding ⌥ will change the value by 0.1.

Polypane automatically suggest associated values and custom properties. To select them, click them or use the arrow keys and enter to apply. As you hover over suggestions, a live preview is shown.

For properties with a color, we'll show a preview of the color. Click on that to open a color selector that will let you live edit the color or let you pick a new color from anywhere on the screen.

The color picker will show three lines: one for a 3:1 contrast ratio, one for a 4.5:1 contrast ratio and one for a 7:1 contrast ratio. The line that is highlighted is the one you should meet for AA compliance for this particular attribute and font size. The color picker will also show you the contrast ratio between the two colors by hovering the X, AA or AAA badge.

For rule sets within the inherited styles, only the css properties that are inherited are shown clearly, while non-inherited styles are faded out.

When hovering over a block of CSS, checkmarks before each rule are shown. Clicking the checkmark will disable this CSS rule until you click them again or reload the page.

You can add CSS at the bottom of each selector. CSS Properties and values will be suggested as you type. Use the arrow keys and enter to select them.

Typing : will move you from the property to the value, pressing enter will add the line and let you type a new property.

Easy copying of CSS Styles

Copy an entire CSS rule set (selector and all declaration) by hovering with your mouse before the selector. A copy icon will appear. Click that to copy a ready-to-use CSS rule set. You can also copy individual lines by clicking the same icon before each line.

Polypane will format the CSS snippets with Prettier and you can change the Prettier configuration to match your project's coding style.

Container queries

When the styles are wrapped in container queries those are shown just like media queries, support queries and layers. In addition, after the container query you'll find the containing element, which you can hover to highlight in all panes, and click to inspect.

Hovering the container query or the containing element will give you the container query's name, type, size and the size of 1cqw and 1cqh so you know what the various container query units are based on.

Computed

The computed tab will show you the computed styles for an element. By default, it will hide all CSS properties that you didn't explicitly set. You can show all the CSS properties by clicking "Show all".

Edit the values by clicking on them just like in the style tab and click "Copy styles" to copy all your CSS declarations, or copy a single declaration by clicking the copy button before the line.

Debug

The Debug panel has a convenient overview of specific CSS properties and element properties that often cause issues, so that you don't have to hunt through the style or computed tab to find, for example, if your element has a position.

The Debug panel also shows if the element creates a new stacking context and what the offset parent (from which your element will be offset when using top/left/bottom/right) and the stacking context parent (from which your element will be offset when using z-index) are. Learn more about the offset parent and stacking context here: Offset parent and stacking context: positioning elements in all three dimensions.

Attributes

The attributes tab will list all the attributes of an element, like class and value and lets you edit them live for all panes. Values will automatically wrap over multiple lines if they become too long (if you use atomic CSS for example). You can also add new attributes here. Keep the value empty for boolean values. You can delete attributes by clicking the trashcan icon.

When you add a new attribute, Polypane will suggest attributes appropriate for the element you're editing. For example, an img will get a suggestion for an alt attribute, but a span will not.

While editing or adding an attribute, valid values will be suggested as well.

Classes

Polypane automatically suggests classes as you type in the class value editor. These classes are compiled from your CSS and HTML. Use the arrow keys to select the one you want to add and press enter to add it, or use your mouse to click them.

Classes list

Click the "list" icon next to the class attribute to switch to a list of all the classes that allows you to quickly toggle off (and back on) classes to see the effect in all panes.

Classes in this list are alphabetically sorted.

Data

The Data tab will list all the values stores in an elements dataset. Values will automatically wrap over multiple lines if they become too long. You can also add new items or delete them here as well.

A11y

The A11y (Accessibility) tab shows you the accessible name and role when available, whether an element is keyboard accessible, the contrast for this element and any accessibility attributes (like aria-labelledby set on the element). Values will automatically wrap over multiple lines if they become too long. You can also add new items or delete them here as well.

Click the copy button for role, accessible name or accessible description to copy them.

Click the contrast info to open the background and foreground color in the color picker where you can further inspect and edit them.

When adding new aria attributes the Elements panel automatically suggests valid attributes and valid values for the chosen attribute when applicable.