Ajouter, modifier et retirer une condition de réglage

Une condition permet de donner une autre valeur au même réglage dans une situation précise. Par exemple : une opacité normale, puis une opacité différente au survol.

Ce guide utilise les commandes nocode du mode Expert. Les expressions de données et les sélecteurs personnalisés sont des possibilités techniques distinctes ; ils ne sont pas nécessaires aux étapes présentées ici.

1. Partir de la valeur de base

Sélectionnez l’élément et repérez le réglage que vous souhaitez faire varier. Définissez d’abord sa valeur normale.

Dans la démonstration, l’opacité de base vaut 100 %. Cette ligne ne porte pas de badge d’état ou d’écran. Elle fournit le résultat lorsque les autres règles ne s’appliquent pas.

2. Ajouter une condition et sa valeur

Survolez la ligne du réglage. Ouvrez la petite commande permettant d’ajouter un modificateur ou une condition, puis choisissez une option rapide, par exemple Hover.

Une ligne associée à cette situation apparaît. Choisir la condition ne suffit pas : donnez aussi une valeur à cette nouvelle ligne. Une ligne encore vide ne constitue pas un réglage complet enregistré.

Choisissez 50 % pour l’opacité au survol. La base reste à 100 %. Testez en entrant puis en sortant de l’élément avec la souris.

Pour une règle d’écran, utilisez les seuils proposés. Ils s’appliquent à partir de leur largeur : le seuil tablette peut rester actif sur ordinateur. Le nom du cadre d’aperçu et le badge de condition ne remplissent pas le même rôle.

3. Modifier la règle

Pour changer la valeur, utilisez le contrôle de la ligne conditionnelle. Dans l’exemple, elle passe de 50 % à 75 % ; la valeur de base ne change pas.

Pour changer la situation, cliquez sur son badge. Dans le panneau ouvert, choisissez les conditions souhaitées puis cliquez sur Définir le modificateur.

Vous pouvez combiner un état et un écran, par exemple md + hover. La valeur ne s’applique alors que si les deux conditions sont réunies. Vérifiez chaque situation dans le rendu : largeur suffisante avec survol, largeur suffisante sans survol, largeur plus petite.

4. Retirer uniquement la règle

Survolez la ligne conditionnelle, puis utilisez sa commande de suppression. Vérifiez que vous retirez la ligne portant le badge, et non la valeur de base.

Dans la démonstration, la règle Hover disparaît tandis que l’opacité de base reste à 100 %. Annuler rétablit la règle et sa valeur.

Retirer une condition d’opacité ne supprime pas l’élément, ses autres propriétés ou toutes ses règles d’écran.

5. Replier les conditions pour alléger le panneau

Le menu de filtre du panneau de styles propose Réduire les modificateurs. Utilisez-le pour alléger la présentation lorsque plusieurs règles sont présentes, puis dépliez-les avant de modifier une valeur précise.

Replier l’affichage ne supprime aucune règle. Avant d’enregistrer, vérifiez les badges et les valeurs de la propriété concernée.

6. Contrôler le résultat

Testez l’état réellement choisi. Le survol se vérifie avec la souris, le focus avec le clavier et une règle d’écran avec des largeurs de part et d’autre du seuil.

Si une règle semble sans effet, vérifiez qu’elle contient une valeur et que toutes ses conditions sont réunies. Inspectez aussi les autres règles du même réglage, qui peuvent s’appliquer simultanément.

Enregistrez la page lorsque les résultats vous conviennent.

Comprendre les états d’interaction ou retrouver les réglages avec les filtres.