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

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>