Cross Browser curseur CSS Images En profondeur
Quand devrais-je utiliser Curseurs personnalisés au lieu des intégrés?
En général, les curseurs CSS (intégrés ou personnalisés) devraient être utilisés comme un indice à l'utilisateur quant à l'action de la souris peut effectuer. Jetons un coup d'oeil à un exemple qui n'utilise des curseurs personnalisés pour illustrer un cas d'utilisation commune: le glisser-déposer. Pour donner aux utilisateurs une indication visuelle qu'un élément est draggable, il est pratique courante de définir la propriété du curseur CSS d'un objet à déplacer. Passez la souris sur l'objet objet draggable ci-dessous pour voir comment cela fonctionne.
Cela se fait avec le CSS suivant:
Le code ci-dessus en sorte que lorsqu'un utilisateur « sur mouses » un lien avec le HTML5 Drag and Drop attribut « draggable », le curseur de déplacement apparaît. Il est un excellent moyen d'aider l'utilisateur « figure sur » comment utiliser l'interface utilisateur avec un minimum d'instructions. Une liste des valeurs de propriété curseur multi-navigateur intégré peut être vu à CSS2 curseur Style de page.
Les curseurs intégrés sont grands, mais il y a quelques choses à garder à l'esprit.
Le CSS personnalisés Curseurs
Voici sameple code CSS qui montrera le curseur personnalisé lorsque les passe la souris sur un div avec un id de dragMe. Si le navigateur ne fait pas les curseurs personnalisés (comme Opera), le curseur fallback au curseur intégré mouvement.
Tant que votre curseur se trouve dans le même répertoire que votre feuille de style, et aussi longtemps qu'il est un fichier non compressé .CUR, il est aussi simple que cela. Notez qu'un fichier .CUR est juste un fichier .ICO avec des informations supplémentaires qui permet au développeur de définir la position « spot hôte » du curseur (à savoir la partie de l'image qui pointe vers la position de la souris). Notez que les fichiers .CUR prennent en charge la couleur 32 bits (16,7 millions de couleurs, plus la transparence du canal alpha), de sorte que les concepteurs peuvent créer des curseurs qui ont des zones semi-transparentes comme des ombres et anti-aliasing.
Les Gotchas de Custom CSS Curseurs
Il y a quelques choses que vous devez vous rappeler lorsque vous utilisez les curseurs CSS
- Vous devez ajouter une valeur par défaut « intégré » curseur après votre curseur personnalisé, ou le curseur personnalisé ne se charge pas dans Firefox. Pensez-y comme la manière de Mozilla de faire respecter les bonnes pratiques Web. -)
- Internet Explorer interprète les URL relatives comme par rapport au document HTML. et non le fichier CSS comme Dieu (et le W3C) destiné (Parfois, il semble que IE va de sa façon de rendre la vie difficile pour nous les développeurs). Cela est vrai pour toutes les versions de IE, même IE9. Pour assurer la compatibilité multi-navigateur, vous devez soit utiliser une URL absolue:
ou une URL de remplacement pour IE:
Les problèmes de performance
Comme mentionné précédemment, un grand nombre de navigateurs (comme Firefox ou IE6) ne peut pas afficher les fichiers compressés .CUR, mais ils peuvent montrer .png. Étant donné que nous aimerions utiliser une version compressée si possible, on pourrait le faire:
Cela fonctionne bien aussi longtemps que le point chaud du curseur est 0,0. Vous pouvez définir un point d'accès PNG en utilisant la syntaxe du curseur CSS3, mais il casse IE:
Maintenant, nous pouvons utiliser ce CSS pour assurer des charges .PNG dans les navigateurs non IE:
Un dernier mot sur les tests dans Internet Explorer
Lectures complémentaires
Pour votre information, Opera ne permet pas les curseurs personnalisés pour des raisons de sécurité et d'accessibilité.
Les curseurs personnalisés sont un moyen très facile et tentant de tromper les utilisateurs. Imaginez un curseur personnalisé qui ressemble à une normale, mais compensée par quelques pixels. Il peut être utilisé dans beaucoup de nombreuses façons d'amener les gens à cliquer quelque part, ils ne veulent pas. Pensez clic jacking mais encore plus subtile.
Aussi un curseur personnalisé (en particulier. Pleinement transparent ou en quelques pixels) pourrait se révéler très difficile à voir et à utiliser pour les personnes ayant une déficience visuelle.
Je me demande s'il est possible que les navigateurs prennent en charge les curseurs personnalisés et empêchent la légitime situation « click-jacking-like » comme vous décrivez. Par exemple: peut-être le navigateur peut regarder le curseur et voir si le point d'accès est transparent, et qu'il est attaché à une partie substantielle de l'image. Ce serait génial si Opera a pris les devants et a montré comment ils pourraient soutenir cette fonctionnalité tout en prenant soin des abus potentiels de la technologie.
Vous pouvez également créer des curseurs à la volée en utilisant la toile. Doodle ou Die fait cela pour faire différents curseurs brosse de peinture de couleur et de taille au lieu de télécharger des centaines d'images de curseur.
Est-il possible d'enregistrer un curseur à l'aide un script client automatisé.
Eh bien, je travaille sur une mise en œuvre de la sécurité à l'aide du curseur Images personnalisée.
Je veux savoir s'il est possible d'enregistrer un curseur affiché sur une division HTML en utilisant un script client sans accéder au serveur et sur la même machine client où la page HTML a été rendu.
Quelles sont les implications de sécurité que vous pensez? J'aimerais connaître vos pensées.
Envoyer des commentaires
Ne soyez pas timide! Donner des commentaires et participer à la discussion.