cursor
The cursor property indicates which mouse cursor will be displayed when the mouse pointer is over the element. The image for cursor property can be specified as URL-address or as data URI of the image.
For example, you can use a 5x5 GIF image to set a red cross as cursor and use “crosshair” as fallback:
.base64-url {
cursor: url("//static.base64.guru/uploads/images/5x5.gif"), crosshair
}The same can be achieved by encoding image to Base64 and embedding it using data URI:
.base64-data {
cursor: url("data:image/gif;base64,R0lGODdhBQAFAPABAP////8AACwAAAAABQAFAAACCARihhe9q0wBADs="), crosshair
}Both behaviors are identical — when you open the page, your browser sets the same cursor for both elements. The difference is that in the first case the browser sends one HTTP request to fetch the external image, when in the second case the image is already loaded in the browser’s memory and it does not need to send any HTTP requests.
Please note that Base64 Data URIs have some limitations. In addition, like almost any unconventional solutions, it has both advantages and disadvantages. Therefore, if you plan to use it, first of all, read about Base64 Data URI.
What is "aaaaigz0...my4xmda="?
Validate Base64 using Notepad++
Base64 encryption is a lie
Comments (22)
I hope you enjoy this discussion. In any case, I ask you to join it.