User Guide — CSS StylEditor

Each property gets a control suited to its value type: a numeric field with a unit picker, a list of values to choose from, a color picker with transparency, building a function value from parameters, or a checkbox to toggle a keyword on/off.

Right-clicking the property name opens a menu with an option to delete the property from the rule. After deletion, the list refreshes.

From the same right-click menu you can switch from the split editing (by type) to editing the value as free text, and switch back to the split editing from there.

If the value actually set in the browser differs from the value entered in the control (for example an invalid value the browser rejects, or a color computed differently) - a small green line appears below the property, showing the value that was actually registered in the stylesheet. When there is no difference, this line isn't shown at all.

At the bottom of the panel, a line shows the full syntax of the selected rule, updating immediately with every change to the properties - as they were actually registered in the browser's stylesheet.

From the right-click menu you can also restore a property to the value it had when the panel was loaded, and open general information pages about the tool and about the selected property.

A tree organized by name prefix (for example, all properties starting with border are grouped together), for browsing the groups step by step.

A flat list with a search field and autocomplete by the requested property's name.

If saving actually fails on the server side — for example an authentication problem, an unauthorized path, or a file that doesn't exist — a detailed error message explaining what happened will be shown, not just a generic failure notice.

The numeric badge in the toolbar also serves as a visual indicator: when there are differences between the browser and the saved file (as shown in the Diffs panel), the badge turns into a red background with white text — a sign that there are changes not yet saved.

When checked, the panel is shown with partial transparency as long as the mouse isn't over it, and returns to opaque when the mouse is over it.

When checked, the panel's position on the screen is saved and reloaded next time. Without it checked, the panel returns to the default position on every load.

Determines how the CSS is written to the file when saving: multi-line (each property on a separate line) or one continuous line per rule.

The server address to which the file's content is sent when clicking Save. Without an address defined, saving will not take place and an error message will be shown.

A pair of fields (name and value) sent along with the save request, in case the server requires authentication before accepting an update to the file.

Defines the server-specific settings that se5-save.php reads: a "dry run" mode for testing without actually writing files, a whitelist of allowed path patterns (regex) that may be updated, a pair of authentication key/value — different for requests coming from the server itself versus external requests — and an optional URL prefix to strip when converting a full page address into a relative disk path.

This is the file whose URL is entered in the extension's "Save address" setting. It accepts a POST request with a JSON body:

{
  "apiVersion": number,
  "check"?: true,               // ping only, to confirm the endpoint is reachable
  "href": string,                 // full page URL (location.href) the CSS belongs to
  "pageBase"?: string,              // the page's <base> URL, if it has one
  "content": string,                 // full CSS file content to write
  "<authKeyName>": "<authValue>"  // must match SE_AUTH_KEY / SE_AUTH_VAL
}

It converts href into a relative path under the server's document root, checks that the path is a .css file and matches an allowed pattern, and — unless dry-run mode is on — writes content to that file. Both files can be placed anywhere reachable on the server, as long as they sit together in the same folder.

The example script overwrites the file directly and doesn't keep any history. Anyone who wants to can extend it — before writing the new content, copy the file's current content into a separate backup/versions folder, to keep a history of previous saves.