CSS ciblé CSS

Question

J'ai du code CSS qui cache le curseur sur une page Web (c'est un écran statique en interaction avec le client). Le code que j'utilise pour faire ceci est ci-dessous:

*, html { cursor: url('/web/resources/graphics/blank.cur'), pointer; } 

Blank.cur est un fichier de curseur totalement vide.

Ce code fonctionne parfaitement dans tous les navigateurs lorsque j'héberge les fichiers web sur mon serveur local mais lorsque je télécharge sur un serveur web Windows CE (notre unité de production) le curseur se représente comme une boîte noire. Impair. Après quelques tests, il semble que le chrome ne rencontre un problème qu'avec les fichiers de curseurs totalement vierges quand il est servi depuis le serveur web WinCE. J'ai donc créé un curseur vide avec un pixel blanc, spécifiquement pour le chrome. Comment puis-je cibler cette règle CSS sur chrome spécifiquement? à savoir

*, html { cursor: url('/web/resources/graphics/blank.cur'), pointer; } 
<!--[if CHROME]> 
*, html { cursor: url('/web/resources/graphics/blankChrome.cur'), pointer; } 
<![endif]--> 

Answer 1

Lorsque j'ai rencontré un problème similaire, j'ai exécuté ce côté serveur de vérification. La seule façon que j'ai pu trouver était de renifler l'agent utilisateur. Ici à partir d'une vue Rails.

<% if request.env["HTTP_USER_AGENT"] =~ /chrome/i %> 
    <%= stylesheet_link_tag "chrome" %> 
<% end> 

Answer 2

body:nth-of-type(1) { cursor: url('/web/resources/graphics/blank.cur'), pointer; } seulement pour google chrome;)

<script type="text/javascript"> 
if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Chrome/x.x 
var cversion=new Number(RegExp.$1); 
if (cversion>1) 
    with(document) { 
    //start the css 
    write("<style type='text/css'>"); 
    write("html { cursor: url('/web/resources/graphics/blank.cur'), pointer; }"); 
    write("</style>"); 
    } 
} 
</script> 

Basé sur le commentaire de Oli.

Answer 3

Chrome n'a aucun commentaire conditionnel comme IE.

Ma première idée était d'utiliser un peu de Javascript pour regarder très rapidement la chaîne useragent puis appliquer de nouveau le style avec javascript. Si vous utilisez déjà jQuery, ce serait assez simple.

Answer 4

Tourner le CSS autour, ciblant IE à la place:

*, html { cursor: url('/web/resources/graphics/blankChrome.cur'), pointer; } 
<!--[if IE]> 
*, html { cursor: url('/web/resources/graphics/blank.cur'), pointer; } 
<![endif]--> 

En outre, selon https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property Firefox et Safari (et probablement Chrome) prend en charge GIFs pour les curseurs, de sorte que vous pouvez essayer d'utiliser un 1px GIF transparent .