血統の森: Homeweb実験小屋CSS3ウェブブラウザ実装メモCSS cursor (CSS3-UI)

CSS cursor (CSS3-UI)

作成:
更新:

マウスポインタとも呼ばれる代物。

ここではCSS3としてCSS3 Basic User Interface Moduleで新たに拡張され定義されているもの、さらに任意のマウスカーソルを指定できる<uri>の対応状況について触れた。

目次

cursorプロパティー値の一覧

CSS2.1およびCSS3で定義されている値の一覧。マウスカーソルを当てるとブラウザーが対応していれば変化するようにしている(以降の表についても同じ)。

value IE Edge Firefox Blink Webkit CSS Level
<uri> 2.1/3
<uri> <x> <y> ××○(*1*2)△(*1)3
auto 2.1/3
default 2.1/3
none 3
context-menu △(*3)××3
help 2.1/3
pointer 2.1/3
progress 2.1/3
wait 2.1/3
cell 3
crosshair 2.1/3
text 2.1/3
vertical-text 3
alias 3
copy 3
move 2.1/3
no-drop ○(*4)○(*4)○(*4)3
not-allowed 3
e-resize 2.1/3
n-resize 2.1/3
ne-resize 2.1/3
nw-resize 2.1/3
s-resize 2.1/3
se-resize 2.1/3
sw-resize 2.1/3
w-resize 2.1/3
ew-resize 3
ns-resize 3
nesw-resize 3
nwse-resize 3
col-resize 3
row-resize 3
all-scroll 3
zoom-in ×3
zoom-out ×3
grab ××△(*5)△(*5)3
grabbing ××△(*5)△(*5)3

<uri>の扱えるファイルタイプ

<uri>について、どのようなファイルタイプが扱えるのかの一覧を作成した。仕様によれば、少なくともPNGとSVGの画像はサポートされなければならず、また具体的なファイル形式は不明だが非アニメーション画像は一通りサポートされなければならないことが言及されている。また、アニメーション画像はサポートすべきともされている。

file type IE Edge Firefox Blink Webkit
.ani/Animation Cursor File × × ×
.cur/Windows Cursor File
.gif/Graphics Interchange Format × ×
.gif/Graphics Interchange Format(animation) × × △(*6) △(*6) △(*6)
.png/Portable Network Graphics File × ×
.jpg/Joint Photographic Coding Experts Group File × ×
.bmp/Windows Bitmap File × ×
.svg/Scalable Vector Graphics × ×

マウスカーソルに使用した画像の著作権声明:Six Apart Ltd / CC BY 2.1,
Elegant Themes / MIT Licence

coding例


<tr style="cursor: url(./img/ui-cursor/heart.cur),pointer;">
<td>.cur/Windows Cursor File</td>
</tr><!-- 指定した画像ファイルを表示 -->
<tr style="cursor: help;">
<td><code>help</code></td>
</tr><!-- 指定したカーソルを表示 -->

検証に使用したブラウザ

Windows 10で検証した(IceweaselとWebKitはDebian testing (stretch)で検証した)。

Internet Explorer
11.0.26 Trident/7.0(リリース版)
MS Edge
Edge/13.10586 (リリース版)
Firefox
Iceweasel/38.5.0(ESR版)
Firefox/43.0(リリース版)
Firefox/46.0(ナイトリービルド版)
Blink
AppleWebKit/537.36 Chrome/47.0.2526.80 Vivaldi/1.0.352.3(スナップショット版)
WebKit
AppleWebKit/602.1 Epiphany/3.18.1(リリース版)

仕様書とリファレンス

CSS Basic User Interface Module Level 3 (CSS3 UI) 日本語訳 6.1.1 cursorプロパティー
http://momdo.github.io/css-ui/#cursor
CSS2.2訳 18.1 カーソル: 'cursor'プロパティー
http://momdo.github.io/css2/ui.html#cursor-props
cursor - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
ANIめーかー
http://www.vector.co.jp/soft/win95/amuse/se195017.html
マウスカーソルの形状cursor: - Firefox 1.5でのCSSスタイル指定向上
http://deegg.main.jp/ref/mozilla/naro/2005gecko_innovation.html#cursor