CSSのカーソル(cursor:)でresizeを使う場合はMacでも要テスト

CSSの規格は、ブラウザの開発企業や団体が実装した独自仕様が取捨選択され、少しずつ統一化が図れていますが、その名残とも言えそうな不思議な、また非効率な規格が散見されます。
今回取り上げる、カーソルの形を指定するCSSのcursorプロパティも同様で、

  • n-resize
  • s-resize
  • w-resize
  • e-resize
  • ne-resize
  • sw-resize
  • nw-resize
  • se-resize
  • col-resize
  • row-resize

という実に10種類もの値が用意されているにも関わらず、Windowsの各種ブラウザからは

  • n-resize = s-resize
  • w-resize = e-resize
  • ne-resize = sw-resize
  • nw-resize = se-resize
  • col-resize
  • row-resize

と実質6種類に絞られます。
Windows版Safariでは、更に1=5、2=6となるので4種類です。

cursorはOS依存

ところが、これをMacで見ると、1~6が両端の矢印ではなく一端の矢印になり、上記の10種類はそれぞれ別のカーソルとして表示されます。
「OS依存」と言っていい現象です(上記したWindows版Safariのような例外もあります)。多くのCSSがブラウザよって描写が変わるところ、OSによって描写が変わる珍しい例ではないでしょうか。

開発者の方は、Javascriptのチェックなどもありますので、基本的にWindows/Macの両方を持っていることが望ましいですが、両機を保有している場合は、cursorを決めるときに両方で確認するのがオススメです。
WindowsかMacの一方しか持っていない場合は、次のルールで決めれば基本的には問題がなさそうです。

  • 左右方向のresize
    col-resize
  • 上下方向のresize
    row-resize
  • 左斜め上方向のresize
    nw-resizeまたはse-resize
  • 右斜め上方向のresize
    ne-resizeまたはsw-resize

ただし、OSの設定でカーソルを変更している場合は、こちらが優先されます。もちろん、個人のカスタマイズまではコントロールができませんし、わざわざ気にする必要はないと思います。

2015/4/28