Guide d'utilisation — CSS StylEditor

Chaque propriété reçoit un contrôle adapté à son type de valeur : un champ numérique avec choix d'unité, une liste de valeurs à choisir, un sélecteur de couleur avec transparence, la construction d'une valeur de fonction à partir de paramètres, ou une case à cocher pour activer/désactiver un mot-clé.

Un clic droit sur le nom de la propriété ouvre un menu proposant de supprimer la propriété de la règle. Après la suppression, la liste se rafraîchit.

Depuis ce même menu contextuel, vous pouvez passer de l'édition scindée (par type) à l'édition de la valeur en texte libre, et y revenir.

Si la valeur réellement définie dans le navigateur diffère de la valeur saisie dans le contrôle (par exemple une valeur invalide rejetée par le navigateur, ou une couleur calculée différemment) - une petite ligne verte apparaît sous la propriété, affichant la valeur réellement enregistrée dans la feuille de style. Lorsqu'il n'y a pas de différence, cette ligne ne s'affiche pas du tout.

En bas du panneau, une ligne résume la syntaxe complète de la règle sélectionnée, et se met à jour immédiatement à chaque modification des propriétés - telles qu'elles ont été réellement enregistrées dans la feuille de style du navigateur.

Depuis le menu contextuel, vous pouvez aussi restaurer une propriété à la valeur qu'elle avait au chargement du panneau, et ouvrir des pages d'information générales sur l'outil et sur la propriété sélectionnée.

Un arbre organisé par préfixe de nom (par exemple, toutes les propriétés commençant par border sont regroupées), pour parcourir les groupes progressivement.

Une liste plate avec un champ de recherche et une saisie semi-automatique selon le nom de la propriété recherchée.

Si l'enregistrement échoue réellement côté serveur — par exemple un problème d'authentification, un chemin non autorisé, ou un fichier inexistant — un message d'erreur détaillé expliquant ce qui s'est passé sera affiché, et non un simple avis d'échec générique.

Le badge numérique dans la barre d'outils sert aussi d'indicateur visuel : lorsqu'il existe des différences entre le navigateur et le fichier enregistré (comme indiqué dans le panneau Diffs), le badge devient un fond rouge avec un texte blanc — signe qu'il y a des modifications non encore enregistrées.

Lorsque cette option est cochée, le panneau s'affiche avec une transparence partielle tant que la souris n'est pas dessus, et redevient opaque quand la souris est dessus.

Lorsque cette option est cochée, la position du panneau à l'écran est enregistrée et rechargée la prochaine fois. Sans elle, le panneau revient à la position par défaut à chaque chargement.

Détermine comment le CSS est écrit dans le fichier lors de l'enregistrement : multi-lignes (chaque propriété sur une ligne séparée) ou une seule ligne continue par règle.

L'adresse du serveur à laquelle le contenu du fichier est envoyé lors du clic sur Save. Sans adresse définie, l'enregistrement n'aura pas lieu et un message d'erreur s'affichera.

Une paire de champs (nom et valeur) envoyés avec la requête d'enregistrement, au cas où le serveur exige une authentification avant d'accepter une mise à jour du fichier.

Définit les paramètres spécifiques au serveur que se5-save.php lit : un mode « à blanc » (dry run) pour tester sans écrire réellement de fichiers, une liste de motifs de chemins autorisés (regex) pouvant être mis à jour, une paire clé/valeur d'authentification — différente selon que la requête provient du serveur lui-même ou de l'extérieur — et un préfixe d'URL optionnel à retirer lors de la conversion d'une adresse de page complète en chemin relatif sur le disque.

C'est le fichier dont l'adresse est saisie dans le paramètre « Save address » de l'extension. Il accepte une requête POST avec un corps JSON :

{
  "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
}

Il convertit href en un chemin relatif sous la racine des documents du serveur, vérifie que le chemin est un fichier .css et correspond à un motif autorisé, puis — sauf en mode dry-run — écrit content dans ce fichier. Les deux fichiers peuvent être placés n'importe où sur le serveur, tant qu'ils restent ensemble dans le même dossier.

Le script d'exemple écrase directement le fichier et ne conserve aucun historique. Quiconque le souhaite peut l'étendre — avant d'écrire le nouveau contenu, copier le contenu actuel du fichier dans un dossier de sauvegarde/versions séparé, afin de conserver un historique des enregistrements précédents.