Panels - CSS viewer


Similar to the one present in all browser dev tools, it allows you to view and edit the css rules associated with an element (if these are contained in the current stylesheet)

tilepieces documentation - panels-css-viewer-inspector-01

tilepieces documentation - panels-css-viewer-inspector-add

Add rule

Clicking on this button will create a new rule within the current style sheet with the chosen selector. If a grouping rule is selected, the rule will be inserted into it

tilepieces documentation - panels-css-viewer-inspector-delete

Delete rule

If there is a rule selected, it will be deleted. If no rule is selected, this button will not be clickable.

tilepieces documentation - panels-css-viewer-inspector-pseudo

Pseudo classes

By pressing this button, you will be shown a view with the CSS pseudo elements associated with the selected element that are activated by the user's gesture.

These are::hover, :active, :focus, :focus-within, :visited, :focus-visible, :target.

tilepieces documentation - panels-css-viewer-inspector-pseudo-1

Pseudo classes

By pressing this button, you will be shown a view with the CSS pseudo elements associated with the selected element.

tilepieces documentation - panels-css-viewer-inspector-element-style

Element style

This rule is associated with the style attribute of the element. You can add / edit properties only if there is a match of the selected element in the original document (and the style attribute is the same in both)

tilepieces documentation - panels-css-viewer-inspector-selector


It is the selector of the rule. The grouping rules associated with the rule will be shown above the selector, but they are not editable from here.

It is possible to change the rules associated with the element by selecting the rule and then clicking on the selector. You can only enter a selector that matches the node.
You cannot change the selectors of inherited rules.

tilepieces documentation - panels-css-viewer-inspector-selected

Selected rule

When a rule is selected, its background will be different from the others and the "add properties" button will appear. You cannot select or edit rules that are not part of the current stylesheet. 

When a rule is selected, the current selector will be changed to that of the rule.

tilepieces documentation - panels-css-viewer-inspector-selected-add

Add properties

With this button it is possible to add new css properties within the selected rule.

tilepieces documentation - panels-css-viewer-inspector-selected-style

Style name

To the right of the rule you will find the name of the stylesheet it belongs to. Rules found inside "style" tags will have the name of the document they belong to. By hovering over it you will see the complete URL of the stylesheet.