Chrome targeted CSS

Question

I have some CSS code that hides the cursor on a web page (it is a client facing static screen with no interaction). The code I use to do this is below:

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

Blank.cur is a totally blank cursor file.

This code works perfectly well in all browsers when I host the web files on my local server but when I upload to a Windows CE webserver (our production unit) the cursor represents itself as a black box. Odd.

After some testing it seems that chrome only has a problem with totally blank cursor files when served from WinCE web server, so I created a blank cursor with one pixel as white, specifically for chrome. How do I then target this CSS rule to chrome specifically? i.e.

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

Answer 1

body:nth-of-type(1) { cursor: url('/web/resources/graphics/blank.cur'), pointer; } only for 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>

Based on Oli's comment.

Answer 2

Chrome doesn't have any conditional comments like IE does.

My first idea was to use a bit of Javascript to very quickly look at the useragent string and then apply the style with javascript again. If you're already using jQuery, this would be pretty simple.

Answer 3

When I had a similar issue, I performed this check server side. The only way I could find was to sniff the user agent. Here from a Rails view.

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

Answer 4

Turn the CSS around, targeting IE instead:

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

Also, according to https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property Firefox and Safari (and presumably Chrome) supports GIFs for cursors, so you can try using a 1px transparent GIF.