Le panneau CSS avancé ajoute à un bloc une propriété CSS que l’éditeur ne propose pas, pour un état et un écran. Cet article explique comment écrire une déclaration, lire les alertes du panneau et la partager avec un style enregistré.
Avant de commencer
- Le panneau CSS avancé sert aux propriétés qu’aucun réglage de l’éditeur ne propose. Quand un réglage existe, préférez-le : il garde le lien avec votre design system, les états et les écrans.
- Le panneau est le dernier de l’onglet Styles. Il s’affiche sur les blocs qui peuvent porter un style enregistré.
- Il demande le rôle Administrateur. Les autres rôles ne le voient pas : voir la section Modifier une page qui porte du CSS avancé.
- Comme tout changement, vos déclarations restent sur le Staging jusqu’à la prochaine publication du site.
Ajouter une déclaration
L’exemple suivant équilibre les lignes d’un titre qui laisse un mot seul sur sa dernière ligne.
- Sélectionnez le titre, ouvrez l’onglet Styles, puis le panneau CSS avancé.
- Choisissez l’état et l’écran en haut de l’onglet. Pour tous les écrans, gardez Ensemble.
- Dans le champ Ajouter une déclaration, tapez
text-wrap, puis choisissez la propriété dans la liste. Une ligne apparaît. - Dans le champ Valeur de la ligne, saisissez
balance. Le titre se répartit sur des lignes de longueur proche.
Chaque ligne porte un lien vers la documentation de la propriété sur MDN et un bouton Retirer. La déclaration s’applique dans l’éditeur pendant que vous tapez.
Le champ Ajouter une déclaration ne propose que les propriétés disponibles. Une ligne ne porte qu’une propriété : un bloc de CSS ne se colle pas. Le champ Valeur, lui, accepte un collage, par exemple un long dégradé copié depuis un autre outil.
Écrire une valeur
Une valeur accepte les fonctions de calcul (calc(), min(), max(), clamp()), les fonctions de couleur (rgb(), hsl(), oklch(), color-mix(), light-dark()), les dégradés, les transformations, les filtres, les formes de clip-path, ainsi que repeat() et minmax() pour les grilles. Une valeur compte au plus 2 048 caractères.
Utiliser une variable du design system
- Cliquez dans le champ Valeur d’une ligne, à l’endroit où la variable doit aller.
- Dépliez Variables du design.
- Cliquez sur la variable. Elle s’insère à l’endroit du curseur.
La liste montre chaque couleur, espacement, taille de texte, ombre, rayon et police de votre site. Un espacement, une taille ou un rayon s’affiche par sa valeur, une couleur ou une ombre par son nom. Une déclaration écrite avec une variable suit votre design system : si votre couleur principale change, la déclaration change avec elle.
Comprendre les alertes du champ Valeur
Pendant la saisie, le champ Valeur peut afficher deux alertes.
| Bordure | Signification | Ligne enregistrée |
|---|---|---|
| Rouge, avec une phrase sous la ligne | La valeur contient quelque chose que le panneau refuse. La phrase le nomme, par exemple vmm n’est pas une unité que le CSS avancé accepte., suivie de Lovely Render n’écrira pas cette ligne dans la page. | Non. Elle ne s’applique pas non plus dans l’éditeur. Corrigez le texte, il reste dans le champ. |
| Ambre | Votre navigateur ne comprend pas cette valeur pour cette propriété. Elle est enregistrée telle quelle. Vérifiez l’orthographe. | Oui. Un navigateur plus récent pourrait la comprendre. |
Une bordure ambre vient le plus souvent d’une faute de frappe, par exemple un calc(100%-10px) sans espace autour du moins.
Connaître les limites du CSS avancé
Le panneau refuse à la saisie ce qu’il ne peut pas écrire dans la page. Le serveur revérifie chaque déclaration avant de l’appliquer.
| Refusé | Raison |
|---|---|
Un sélecteur, une règle imbriquée, un @media | Lovely Render écrit le sélecteur à partir de l’état et de l’écran choisis. |
Les caractères < > ; { } @ \ ! et les commentaires, donc !important | Votre déclaration l’emporte déjà sur les styles du bloc. |
url() et toute fonction qui charge une ressource | Les images, les polices et les fichiers passent par leurs propres outils. Les dégradés restent acceptés. |
Une variable absente de votre design system, ou var() avec une valeur de repli | Les variables de votre design system sont toujours déclarées. |
content, les propriétés d’animation et de transition, les propriétés préfixées comme -webkit-… | Elles ne figurent pas dans la liste. Les animations et les transitions ont leurs propres panneaux. |
Lire les déclarations héritées
Sous vos lignes, la liste Déjà appliqué ici montre les déclarations qui agissent sur ce bloc, à cet état et à cet écran, mais viennent d’ailleurs : d’un style enregistré du bloc, ou de Ensemble quand vous êtes sur un écran.
- Repérez la déclaration dans Déjà appliqué ici.
- Cliquez sur Surcharger. Elle passe dans vos lignes.
- Modifiez sa valeur. Votre version vaut pour ce bloc seulement.
Retirer votre version fait réapparaître la déclaration d’origine. Pour retirer une déclaration d’un style enregistré, ouvrez le formulaire Mettre à jour du style et cochez la ligne à retirer.
Partager une déclaration entre plusieurs blocs
| Sur un bloc | Dans un style enregistré | |
|---|---|---|
| Portée | Ce bloc, sur cette page. | Tous les blocs qui portent le style. |
| Usage | Un ajustement ponctuel. | Une règle à réutiliser. |
| Geste | Écrire la ligne dans le panneau. | Écrire la ligne, puis créer ou mettre à jour le style avec la famille CSS avancé cochée. |
Une fois dans le style, la déclaration quitte vos lignes et passe dans Déjà appliqué ici. Deux styles qui déclarent des propriétés différentes se cumulent sur un bloc. S’ils déclarent la même, le dernier de la liste l’emporte.
Vos déclarations sont écrites en CSS ordinaire, dans la feuille du site pour un style, en tête de page pour un bloc. Elles n’ajoutent ni script ni requête. Elles partent propriété par propriété avec vos contenus dans l’export du site.
Modifier une page qui porte du CSS avancé
Un membre qui n’est pas administrateur ne voit pas le panneau CSS avancé, mais il modifie les pages qui en portent. Un bloc garde ses déclarations quand ce membre le déplace, le duplique ou change son texte. Traduire une page, la copier, partir du modèle d’un type de contenu ou coller un bloc copié sur une autre page du site emporte aussi son CSS avancé.
Un bloc copié sur un autre site peut porter du CSS avancé que votre site n’a pas. Pour un membre qui n’est pas administrateur, l’enregistrement est alors refusé avec le message Seul un administrateur du site peut ajouter du CSS avancé, et un bloc de ce contenu en porte que le site n’a pas, souvent un bloc collé depuis un autre site. Retirez ce bloc, ou demandez à un administrateur d’enregistrer. Retirez le bloc collé, ou demandez à un administrateur d’enregistrer la page. Une IA branchée sur le site suit la même règle que le membre qui l’a branchée.