cursor |
Curseur |
---|---|
CSS |
Syntaxe
cursor: paramètres; |
Paramètres
Paramètre | Description | |||||
---|---|---|---|---|---|---|
paramètres | Ce paramètre de propriété permet d'indiquer le type de pointeur : | |||||
Valeur | Description | |||||
auto | Cette valeur permet d'indiquer à l'utilisateur de fixer du texte. | |||||
crosshair | Cet attribut permet d'indiquer une croix. | |||||
default | Cet attribut permet d'indiquer le pointeur de souris par défaut (la flèche). | |||||
e-resize | Cet attribut permet d'indiquer deux flèches pointant vers la gauche et la droite. | |||||
hand | Cet attribut permet d'indiquer un pointeur ressemblant à une main humaine. | |||||
help | Cet attribut permet d'indiquer un pointeur avec une marque de question. | |||||
move | Cet attribut permet d'indiquer un croix avec des flèches à chaque extrémité. | |||||
n-resize | Cet attribut permet d'indiquer une flèche pointant vers le bas et le haut. | |||||
ne-resize | Cet attribut permet d'indiquer une flèche pointant vers le haut à droite et vers la bas à gauche. | |||||
nw-resize | Cet attribut permet d'indiquer une flèche pointant vers le haut à gauche et vers la bas à droite. | |||||
pointer | Cet attribut permet d'indiquer un pointeur ressemblant à une main humaine. | |||||
s-resize | Cet attribut permet d'indiquer une flèche vers le haut et le bas. | |||||
se-resize | Cet attribut permet d'indiquer une flèche pointant vers le haut à gauche et vers la bas à droite. | |||||
sw-resize | Cet attribut permet d'indiquer une flèche pointant vers le haut à droite et vers la bas à gauche. | |||||
text | Cette valeur permet d'indiquer à l'utilisateur de fixer du texte. | |||||
w-resize | Cet attribut permet d'indiquer deux flèches pointant vers la gauche et la droite. | |||||
wait | Cet attribut permet d'indiquer un pointeur en état d'attente, comme un sablier par exemple, varie beaucoup en fonction des systèmes d'exploitation. |
Description
Cette propriété permet d'indiquer le type de pointeur de souris lorsqu'il passe au dessus de la balise.
Remarques
- Contrôle de l'apparence du curseur : La propriété cursor permet de définir le style du curseur de la souris lorsqu'il survole un élément HTML. Par exemple, cursor: pointer; transforme le curseur en une main cliquable, couramment utilisée pour les boutons ou les liens, tandis que cursor: text; affiche un curseur en forme de barre verticale, idéal pour les zones de texte éditables.
- Large choix de styles prédéfinis : CSS offre une gamme de valeurs prédéfinies pour cursor, comme default, crosshair, move, not-allowed, ou encore wait. Ces valeurs permettent de donner des indications visuelles immédiates sur l'interaction possible avec un élément, améliorant ainsi l'expérience utilisateur.
- Personnalisation avec des images : En plus des styles prédéfinis, il est possible d'utiliser une image personnalisée comme curseur avec cursor: url('chemin/vers/image.cur'), auto;. Cette flexibilité est utile pour créer des expériences interactives uniques. Toutefois, il est conseillé de toujours fournir une valeur de secours (comme auto) au cas où l'image ne serait pas disponible.
- Compatibilité avec les formats d'images : Les images utilisées pour la propriété cursor doivent être dans des formats compatibles comme .cur, .ico, ou parfois .png. Cependant, tous les navigateurs ne supportent pas les mêmes formats. Par exemple, .cur est mieux supporté dans les environnements Windows.
- Apport dans les interfaces interactives : La propriété cursor est particulièrement utile pour indiquer une action ou un état particulier. Par exemple, cursor: wait; informe l'utilisateur que l'application effectue un traitement en cours, tandis que cursor: not-allowed; signale que l'action n'est pas autorisée.
- Effets sur les enfants hérités : La propriété cursor est héritée par défaut. Cela signifie que si vous appliquez cursor: pointer; sur un conteneur parent, tous les enfants adopteront ce style de curseur, sauf si un style différent est explicitement défini sur les enfants eux-mêmes.
- Utilisation dans les jeux et animations : Dans des scénarios comme les jeux ou les animations interactives, la propriété cursor peut renforcer l'immersion en changeant dynamiquement l'apparence du curseur en fonction des zones interactives ou des actions disponibles. Cela aide à mieux guider l'utilisateur dans des environnements complexes.
- Précautions liées à l'accessibilité : Bien que la personnalisation du curseur soit une fonctionnalité puissante, il est important de maintenir la clarté et l'intuitivité. Par exemple, éviter d'utiliser un curseur personnalisable pour des éléments interactifs sans signifier clairement leur fonction pourrait désorienter certains utilisateurs, en particulier ceux ayant des besoins en accessibilité.
Dernière mise à jour : Dimanche, le 20 décembre 2015