Using URL values for the cursor property

  • Revision slug: CSS/cursor/url
  • Revision title: Using URL values for the cursor property
  • Revision id: 336063
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment Moved From CSS/cursor/Using_URL_values_for_the_cursor_property to CSS/cursor/url

Revision Content

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supports URL values for the CSS {{cssxref("cursor")}} property on Windows and Linux. Mac support added in Gecko 2 (Firefox 4).  This allows specifying arbitrary images as mouse cursors — any image format supported by Gecko can be used.

Syntax

The basic (CSS 2.1) syntax for this property is:

cursor:  [<url>,]* keyword

This means that zero or more URLs may be specified (comma-separated), which must be followed by one of the keywords defined in the CSS specification, such as auto or pointer.

For example, the following value would be allowed:

cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;

This will first try loading foo.cur. If that file does not exist or is not valid for some other reason, bar.gif is tried, and if that can't be used either, auto will be used.

Support for the CSS 3 syntax for cursor values got added in Gecko 1.8 (Firefox 1.5):

cursor:  [<uri> [<x> <y>]?,]* keyword

It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:

.foo  {
    cursor:  auto;
    cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
    cursor:  pointer;
    cursor:  url(cursor2.png) 2 2, pointer;
} 

/* fallsback onto 'auto' and 'pointer' in IE, but must be set seperately */

The first number is the x-coordinate, and the second number is the y-coordinate. The example will set the hotspot to be the pixel at (4,12) from the top left (0,0).

Limitations

All image formats supported by Gecko can be used. This means that you can use PNG, GIF, JPG, BMP, CUR etc. images. ANI is not supported. An animated PNG or GIF will not create an animated cursor.

{{gecko_callout_heading("2.0")}}

Starting with Gecko 2.0 {{geckoRelease("2.0")}}, Gecko also supports the SVG image format for cursors. However, the SVG image must contain a length-valued (not percentage-valued) height and width on its root SVG node. JavaScript, CSS animation, and declarative SMIL inside an SVG image are ignored; you can't use SVG to create an animated cursor, for example.

In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.

(Due to a bug in Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 on Windows limits to 32x32px. This is fixed in later versions)

Translucent cursors are not supported on Windows releases earlier than XP. This is a limitation of the operating system. Transparency works on all platforms.

URL values as cursors are supported in Windows, OS/2, and Linux (when using GTK+ 2.4 or better) releases of Mozilla.  Mac OS  support was added with Gecko 2 (Firefox 4) .

Compatibility with other browsers

Microsoft Internet Explorer 6.0 also supports URI values for the cursor property. However:

  • IE only supports CUR and ANI as formats.
  • IE doesn't support the CSS 3 syntax with x- and y-coordinates. The cursor image, and the rest of the property, are ignored.
Browser Lowest version formats (e.g.) x-y-coordinates
Internet Explorer 6.0 .cur | .ani ---
Firefox (Gecko), Windows and Linux 1.5 (1.8) .cur | .png | .gif | .jpg 1.5 (1.8)
Firefox (Gecko) 4.0 (2.0) .cur | .png | .gif | .jpg | .svg (Gecko 2.0)
Opera --- --- ---
Safari (Webkit) 3.0 (522-523) .cur | .png | .gif | .jpg 3.0 (522-523)
Since OS X 10.5 supports Safari (Mac) .cur files

Revision Source

<p><a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>, SeaMonkey 1.0) supports URL values for the CSS {{cssxref("cursor")}} property on Windows and Linux. Mac support added in Gecko 2 (Firefox 4).&nbsp; This allows specifying arbitrary images as mouse cursors — any image format supported by Gecko can be used.</p>
<h3 id="Syntax">Syntax</h3>
<p>The basic (CSS 2.1) syntax for this property is:</p>
<pre>
cursor:  [&lt;url&gt;,]* keyword</pre>
<p>This means that zero or more URLs may be specified (comma-separated), which <strong>must</strong> be followed by one of the keywords defined in the CSS specification, such as<code> auto </code>or<code> pointer</code>.</p>
<p>For example, the following value would be allowed:</p>
<pre class="plain">
cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;</pre>
<p>This will first try loading <em>foo.cur</em>. If that file does not exist or is not valid for some other reason, <em>bar.gif</em> is tried, and if that can't be used either,<code> auto </code>will be used.</p>
<p>Support for the CSS 3 syntax for cursor values got added in Gecko 1.8 (Firefox 1.5):</p>
<pre>
cursor:  [&lt;uri&gt; [&lt;x&gt; &lt;y&gt;]?,]* keyword</pre>
<p>It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:</p>
<pre>
.foo  {
    cursor:  auto;
    cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
    cursor:  pointer;
    cursor:  url(cursor2.png) 2 2, pointer;
} 

/* fallsback onto 'auto' and 'pointer' in IE, but must be set seperately */
</pre>
<p>The first number is the x-coordinate, and the second number is the y-coordinate. The example will set the hotspot to be the pixel at (4,12) from the top left (0,0).</p>
<h3 id="Limitations">Limitations</h3>
<p>All image formats supported by Gecko can be used. This means that you can use PNG, GIF, JPG, BMP, CUR etc. images. ANI is not supported. An animated PNG or GIF will not create an animated cursor.</p>
<div class="geckoVersionNote">
  <p>{{gecko_callout_heading("2.0")}}</p>
  <p>Starting with Gecko 2.0 {{geckoRelease("2.0")}}, Gecko also supports the SVG&nbsp;image format for cursors. However, the SVG image must contain a length-valued (not percentage-valued) height and width on its root <code>SVG</code> node. JavaScript, CSS animation, and declarative SMIL inside an SVG image are ignored; you can't use SVG to create an animated cursor, for example.</p>
</div>
<p>In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.</p>
<p>(Due to a bug in Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 on Windows limits to 32x32px. This is fixed in later versions)</p>
<p>Translucent cursors are not supported on Windows releases earlier than XP. This is a limitation of the operating system. Transparency works on all platforms.</p>
<p>URL values as cursors are supported in Windows, OS/2, and Linux (when using GTK+ 2.4 or better) releases of Mozilla.&nbsp; Mac OS&nbsp; support was added with Gecko 2 (Firefox 4) .</p>
<h3 id="Compatibility_with_other_browsers">Compatibility with other browsers</h3>
<p>Microsoft Internet Explorer 6.0 also supports URI values for the<code> cursor </code>property. However:</p>
<ul>
  <li>IE only supports CUR and ANI as formats.</li>
  <li>IE doesn't support the CSS 3 syntax with x- and y-coordinates. The cursor image, and the rest of the property, are ignored.</li>
</ul>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Lowest version</th>
      <th>formats (e.g.)</th>
      <th>x-y-coordinates</th>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td><strong>6.0</strong></td>
      <td><code>.cur | .ani</code></td>
      <td>---</td>
    </tr>
    <tr>
      <td>Firefox (Gecko), Windows and Linux</td>
      <td><strong>1.5</strong> (1.8)</td>
      <td><code>.cur | .png | .gif | .jpg</code></td>
      <td>1.5 (1.8)</td>
    </tr>
    <tr>
      <td>Firefox (Gecko)</td>
      <td><strong>4.0</strong> (2.0)</td>
      <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
      <td>(Gecko 2.0)</td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td rowspan="2">Safari (Webkit)</td>
      <td><strong>3.0</strong> (522-523)</td>
      <td><code>.cur | .png | .gif | .jpg</code></td>
      <td rowspan="2">3.0 (522-523)</td>
    </tr>
    <tr>
      <td colspan="2">Since OS X 10.5 supports Safari (Mac)<code> .cur </code>files</td>
    </tr>
  </tbody>
</table>
Revert to this revision