⬜ CSS

Le CSS est un langage utilisé pour changer l'apparence visuelle d'un élément (couleurs, formes, tailles, animations), un peu comme on choisirait la mise en forme d'un texte, mais avec beaucoup plus de possibilités. Le bloc CSS permet d'écrire ce code de style directement dans votre projet Celestory, pour aller plus loin que les réglages visuels proposés par défaut : coins arrondis, ombres, animations, etc.

Ce bloc s'adresse surtout aux utilisateurs à l'aise avec le code, ou prêts à copier-coller un extrait trouvé en ligne, pour obtenir un rendu précis que les styles prédéfinis de Celestory ne permettent pas.

📥 Entrées

• in (Trigger) : Déclenche l'application du code CSS.
• style (Texte) : Contient le code CSS à exécuter. Un mini-éditeur intégré facilite la saisie.
• clear (Booléen) : Si activé (Vrai), efface les styles CSS précédemment injectés avant d'appliquer le nouveau code (désactivé par défaut).

📤 Sorties

• out (Trigger) : S'active immédiatement après l'injection ou l'effacement du style CSS, permettant de poursuivre le flux.

💡 Exemple d'utilisation

Scénario : Personnalisation d'un bouton avec une animation

1. L'utilisateur souhaite modifier l'apparence d'un bouton dans son application pour le rendre plus dynamique.
2. Il place le bloc CSS dans son graphe, après l'affichage du bouton concerné.
3. Dans l'entrée style, il écrit le code suivant :

`css

.mon-bouton {

background-color: #4CAF50;

border-radius: 12px;

transition: transform 0.3s;

}

.mon-bouton:hover {

transform: scale(1.1);

}

1. Le bloc applique immédiatement le style au bouton, qui devient vert avec des coins arrondis et s'anime au survol.
2. Le flux continue vers l'étape suivante, où l'utilisateur peut tester l'interaction avec le bouton.

⚙️ Détails Techniques

• Gestion des styles : Le code CSS est injecté dans le DOM de la vue web et reste actif jusqu'à ce qu'un autre bloc CSS avec clear activé soit exécuté.
• Ciblage des éléments : Les sélecteurs CSS doivent correspondre aux classes ou IDs des éléments générés par Célestory (ex: .celestory-button).
• Limitation : Les styles appliqués peuvent être écrasés par des règles CSS plus spécifiques ou ultérieures dans le flux.

Version documentée : v2

Mis à jour le : 23/09/2026