Propriétés CSS
Text clarity (clarté du texte)
Modifie la méthode de rendu par défaut du navigateur pour une meilleure clarté du texte.
Le texte a une meilleure apparence sur la page avec cet extrait de code.
État du focus (Focus state) pour les interactions avec le clavier
Crée un "effet sélectionné" unifié pour tous les éléments focalisables dans le développement en une seule fois.
Il utilise un attribut tabindex pour cibler tous les éléments focalisables.
Webflow nous permet de styliser l'état focus-visible (appelé "Focused (keyboard)" dans l'état des dropdown) pour tout élément et séparément. Utilisez-le si vous voulez remplacer le style par défaut que nous avons créé avec le snippet.
Suppression de la marge supérieure des Rich Text
Supprime la marge supérieure du premier élément de chaque Rich Text.
Par exemple, nous voulons que notre H2 ait margin-top: 4rem. Il s'agit de la marge supérieure que nous souhaitons pour l'ensemble de l'élément Rich Text. Cependant, nous ne voulons pas de cette marge supérieure ( margin-top ) pour le premier élément du Rich Text. La marge de 4rem crée un espace indésirable entre le haut de l'élément Rich Text et le premier texte H2.
La déclaration "not" est une "sécurité" spéciale pour la solution d'attribut de table des matières.
Suppression de la marge inférieure du Rich Text
Supprime la marge inférieure du dernier élément du Rich Text.
Par exemple, nous voulons que notre paragraphe ( Paragraph ) ait margin-bottom: 0.5rem. Il s'agit de la marge inférieure que nous voulons pour l'ensemble du Rich Text. Cependant, nous ne voulons pas de cette marge inférieure ( margin-bottom )pour le dernier élément du Rich Text. La marge de 0.5rem crée un espace indésirable entre le bas de l'élément Rich Text et le dernier texte du paragraphe ( Paragraph ).
Pointer events (Événements relatifs au curseur)
Définit si un élément peut ou non interagir de quelque manière que ce soit.
Parfois, nous ne voulons pas qu'un certain élément interfère avec le survol de la souris, le mouvement du curseur ou le clic. Nous utilisons la propriété pointer-events: none pour ces cas. Cette propriété et cette valeur CSS empêcheront toute interaction de l'utilisateur avec un élément.
Par exemple, nous pouvons appliquer la classe pointer-events-none aux éléments graphiques d'arrière-plan superposés. Les éléments graphiques peuvent interférer avec un bouton d'appel à l'action cliquable qui se trouve derrière les éléments graphiques pour des raisons de design.
Dans certains cas, nous voulons que seul un enfant (child) spécifique d'un parent non cliquable soit cliquable ou survolable. Dans ces cas, nous utilisons pointer-events : auto. La classe pointer-events-auto active les événements sur cet élément particulier.
Consultez un exemple d'utilisation de la propriété pointer-events pour créer un curseur personnalisé.
Container centerizer (centrer les containers)
Force le centrage horizontal de toutes les classes container-.
Nous souhaitons toujours que les valeurs margin-left et margin-right soient définies sur auto. Si nous, un autre développeur ou notre client modifions accidentellement la marge, la valeur auto sera conservée grâce aux balises !important.
Styles hérités pour divers éléments de Webflow
Supprime certains styles et certaines tailles (codés automatiquement) d’éléments par défaut de Webflow.
Par défaut, ce style est "désactivé" (commented out) dans le cloneable Client-First. Vous devez l'activer manuellement si vous souhaitez l'utiliser.
Ce code facilite le style de certains éléments Webflow. Au lieu de remplacer manuellement les styles programmés par défaut, nous pouvons hériter (inherit) des styles du parent.
Par exemple, les inputs dans les formulaires (form) Webflow ne suivent jamais la taille de police du corps (body font-size). C'est parce que les inputs des form sont programmés pour être à 14px. Nous devons appliquer une classe à l'input et définir une taille de police (font-size). Avec cet extrait, les inputs des form ne prennent pas la valeur 14px, mais héritent (inherit) de la taille de la police du corps (body font-size).
Pourquoi ce snippet est-il désactivé par défaut ? Nous considérons qu'il s'agit d'une option avancée car elle peut entraîner des comportements inattendus. Par exemple, nous ne serons pas en mesure de sélectionner "Tous les liens" ("All links") et de modifier leur couleur. La mise à jour du style "Tous les liens" ("All links") ne changera rien car nous ne travaillons plus avec des valeurs programmées sur ces éléments. Nous remplaçons cette option en utilisant inherit.
Ajouter inline flex
Ajouter inline-flex comme une propriété CSS disponible dans le Designer de Webflow. Cette propriété CSS n'est pas disponible nativement dans Webflow.
Un élément avec inline-flex se comporte comme inline lui-même tout en garantissant que ses enfants (child) peuvent toujours être alignés comme tous les autres enfants flex.
Par exemple, lorsque nous appliquons flex à un bouton CTA, celui-ci s'étire à 100 % de sa largeur. Si nous utilisons inline-flex sur le bouton, le bouton conserve la largeur correcte grâce au comportement inline et les enfants du bouton profitent des fonctions flex.
Déclarations !important
Évite les problèmes de spécificité CSS pour nos classes utilitaires display, padding et margin.
Cet extrait garantit que les propriétés CSS de nos classes utilitaires sont toujours conformes à ce que nous avions prévu. Les balises !important obligent les classes utilitaires à conserver leurs paramètres de style globaux.
Squareify (Rendre carré)
Grâce à la magie du CSS, il y a dans le Global Embed une classe (div-square) dans notre développement qui crée toujours un carré, quelle que soit la largeur que l’on donne à notre élément.
Remarque : pour placer des éléments enfants (child) à l'intérieur de div-square, vous devez ajouter un div block positionné de manière absolue (absolute) avec une position définie sur full. Placez les éléments enfants à l'intérieur de ce div block positionnée de façon absolue (absolute).