# Ajouter du CSS avancé

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é](https://lovelyrender.com/fr/documentation/styles-enregistres/).
- 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.

1. Sélectionnez le titre, ouvrez l’onglet **Styles**, puis le panneau **CSS avancé**.
2. Choisissez l’état et l’écran en haut de l’onglet. Pour tous les écrans, gardez **Ensemble**.
3. Dans le champ **Ajouter une déclaration**, tapez `text-wrap`, puis choisissez la propriété dans la liste. Une ligne apparaît.
4. Dans le champ **Valeur** de la ligne, saisissez `balance`. Le titre se répartit sur des lignes de longueur proche.

![Le panneau CSS avancé d’un titre : la note qui rappelle de préférer un réglage de l’éditeur, la déclaration text-wrap avec la valeur balance, son lien vers la documentation et sa corbeille, le champ Ajouter une déclaration et le lien Variables du design.](https://static.lovelyrender.com/uploads/2026/10/991-doc-pages2-css.png)

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

1. Cliquez dans le champ **Valeur** d’une ligne, à l’endroit où la variable doit aller.
2. Dépliez **Variables du design**.
3. 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. |

**Remarque :** Sur un bloc animé, l’animation garde la main sur `transform`, `opacity`, `filter` et `clip-path` tant qu’elle existe. Pour un visiteur qui demande moins d’animations, ces propriétés ne s’appliquent pas.

## 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.

1. Repérez la déclaration dans **Déjà appliqué ici**.
2. Cliquez sur **Surcharger**. Elle passe dans vos lignes.
3. 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.

**Remarque :** Une propriété peut quitter la liste si elle s’avère dangereuse ou si un réglage la remplace. Elle cesse alors d’être écrite dans la page.

## 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.

## Voir aussi

- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)
- [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)
- [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)
- [Inviter un membre et choisir son rôle](https://lovelyrender.com/fr/documentation/membres/)