Chrome targeted CSS
- by Chris
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]-->