Testeur de Curseurs CSS

• Aperçu instantané des curseurs CSS : prévisualisez les 38 styles de curseur CSS standard en survolant chaque carte du testeur. Le curseur change instantanément au survol - sans clic, sans attente et sans deviner l'apparence de chaque curseur sur votre plateforme.
• Testeur de curseurs CSS en ligne et sécurisé : le testeur s'exécute entièrement dans votre navigateur, sans collecte de données, sans suivi et sans requête serveur. C'est un outil de référence purement côté client - votre navigation reste totalement privée.
• Testeur de curseurs CSS sans installation : utilisez le testeur directement dans n'importe quel navigateur moderne, sans téléchargement, plugin ou extension. Les curseurs sont rendus avec le jeu natif de votre système d'exploitation, vous voyez donc exactement ce que verront vos utilisateurs.
• 100 % gratuit avec copie en un clic : le testeur de curseurs CSS est entièrement gratuit, sans inscription, sans limite d'utilisation et sans publicité. Cliquez sur n'importe quelle carte de curseur pour copier instantanément la déclaration CSS prête à l'emploi.

• Choisir le bon curseur pour les éléments d'interface : utilisez le testeur pour trouver le curseur correct pour les boutons, liens, éléments déplaçables et contrôles désactivés. Survolez chaque curseur du testeur pour voir exactement son apparence avant de l'ajouter à votre feuille de style.
• Conception d'interfaces de glisser-déposer : les interfaces de glisser-déposer exigent un retour de curseur précis - grab au survol, grabbing pendant le glissement, no-drop sur les cibles invalides. Le testeur vous permet de prévisualiser tous les curseurs de glissement côte à côte.
• Composants de panneaux redimensionnables et séparateurs : les panneaux redimensionnables nécessitent des curseurs de redimensionnement directionnels (ew-resize, ns-resize, col-resize, row-resize). Utilisez le testeur pour prévisualiser toutes les variantes et choisir la bonne pour chaque poignée.
• Accessibilité et retour UX : un retour de curseur correct est une exigence d'accessibilité - les utilisateurs se fient aux changements de curseur pour comprendre ce qui est interactif. Le testeur vous aide à vérifier que les éléments désactivés utilisent not-allowed et les états de chargement wait ou progress.
• Vérification des curseurs multiplateforme : les curseurs CSS s'affichent différemment sous Windows, macOS et Linux. Utilisez le testeur sur chaque plateforme pour vérifier que le curseur choisi convient à votre public cible avant la mise en production.
• Revue de code et documentation : lors de la revue du code CSS ou de la rédaction de documentation de composants, utilisez le testeur comme référence rapide pour vérifier que les valeurs de curseur sont correctes et adaptées à l'interaction décrite.

La propriété CSS cursor définit la forme du curseur de souris qui apparaît lorsque l'utilisateur survole un élément. C'est l'un des signaux UX les plus importants des interfaces web - le curseur indique aux utilisateurs ce qui se produira lors d'une interaction avec un élément. La spécification CSS définit 38 valeurs de curseur standard organisées en catégories : curseurs généraux, indicateurs de lien et d'état, curseurs de sélection, curseurs de glisser-déposer, curseurs de redimensionnement et curseurs de zoom. Notre testeur de curseurs CSS vous permet de tous les prévisualiser grâce au rendu natif des curseurs de votre système d'exploitation, vous voyez donc exactement ce que verront vos utilisateurs sur leur plateforme.

1. Parcourez ou cherchez : utilisez les onglets de catégorie pour filtrer les curseurs par type (Général, Liens et état, Sélection, Glisser-déposer, Redimensionnement, Zoom), ou saisissez un nom ou une description de curseur dans le champ de recherche. Le testeur met à jour la grille instantanément.
2. Survolez pour prévisualiser : déplacez la souris sur n'importe quelle carte de curseur pour voir le curseur changer en temps réel. La barre d'information en bas affiche le nom du curseur, la déclaration CSS et la description. Le testeur utilise le rendu natif des curseurs de votre navigateur - aucune image ni SVG n'est utilisé.
3. Cliquez pour copier : cliquez sur n'importe quelle carte de curseur pour copier la déclaration CSS complète (par exemple, cursor: pointer; ) dans votre presse-papiers. Collez-la directement dans votre feuille de style. La carte affiche une confirmation « Copié ! » pendant 1,5 seconde.

• Général : auto (le navigateur décide), default (flèche de la plateforme) et none (curseur masqué). Utilisez auto pour la plupart des éléments et ne surchargez que si nécessaire.
• Liens et état : pointer pour les éléments cliquables, wait pour les opérations bloquantes, progress pour les opérations en arrière-plan, help pour les déclencheurs d'info-bulle et context-menu pour les cibles de clic droit.
• Glisser-déposer : grab et grabbing pour les éléments déplaçables, move pour les éléments mobiles, copy pour les opérations de copie, alias pour les raccourcis, no-drop et not-allowed pour les cibles invalides et les actions désactivées.
• Redimensionnement : curseurs de redimensionnement directionnel pour les 8 directions de la boussole (n, s, e, w, ne, nw, se, sw) plus les variantes bidirectionnelles (ew-resize, ns-resize, nesw-resize, nwse-resize) et col-resize , row-resize et all-scroll pour le redimensionnement de tableaux et de panneaux.

Les 38 valeurs de curseur CSS du testeur sont prises en charge par Chrome, Firefox, Safari, Edge et Opera. L'apparence visuelle de chaque curseur varie selon le système d'exploitation - Windows utilise les curseurs Aero, macOS son propre jeu et Linux le thème de curseurs X11. C'est intentionnel : le navigateur délègue le rendu du curseur à l'OS pour que les curseurs paraissent natifs sur la plateforme de l'utilisateur. Le curseur none masque totalement le curseur - utilisez-le prudemment et uniquement si vous fournissez un curseur personnalisé via JavaScript, car masquer le curseur sans remplacement pose un problème d'accessibilité.