Cursors are a hassle

Cursors as displayed by different browsers

(I actually made this post and the update it talks about quite a while ago, but did not get around to publishing it until now).

Today a minor update to stikis so that mouse cursors are a bit more logical. I say a bit more logical, because, as you can see from the picture above, the way different browsers render the same cursors varies a lot. The strangest one to me is the different between how Firefox renders the ‘move’ cursor compared to IE and Safari. On Firefox, this is an open hand, actually identical to the ‘-moz-grab’ cursor, whereas on IE and Safari it is a left-right-up-down arrow. Another strange one is the ‘se-resize’ cursor, which Firefox and Safari both render as an arrow pointing down and to the right, but IE renders as a double-headed arrow. This actually looks quite similar to the way Firefox and Safari render the ‘nwse-resize’ cursor, but unfortunately IE doesn’t recognise this. Oh well.

There are actually lots of different cursor styles that you can apply with CSS. As usual, PPK has a good reference for support of cursor styles across different browsers. However, his table doesn’t show what these different cursors actually look like, even if they are supported. As the picture shows, there’s a lot of variation in this.

One tricky thing I encountered was that it’s not easy to take a screen-shot that includes the cursor. The solution I found was to use the osx ‘screencapture’ command line utility. The command I used was:

screencapture -m -C -T5 ie_2.png

(Command - Shift - 4) + Alt & Shift to constrain the selection. Space to take the whole window

Oh and also thanks to stikis user [Blake] for pointing out that the Chrome browser works with stikis (hmmm, perhaps that should be ‘stikis works with the Chrome browser’ - I don’t want to sound like the whole internet revolves around stikis :)). I’ve tried it myself and everything does seem to work, but if you’re a Chrome user and you find a bug, please let me know.