{"id":2082,"date":"2018-06-04T20:25:05","date_gmt":"2018-06-05T00:25:05","guid":{"rendered":"https:\/\/mberlove.com\/blog\/?p=2082"},"modified":"2023-01-30T20:34:03","modified_gmt":"2023-01-31T01:34:03","slug":"css-cursor-and-the-modern-web","status":"publish","type":"post","link":"https:\/\/mberlove.com\/blog\/css-cursor-and-the-modern-web\/","title":{"rendered":"CSS Cursor and the Modern Web"},"content":{"rendered":"<p id=\"d232\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">The W3 <a class=\"ae il\" href=\"https:\/\/www.w3.org\/TR\/css-ui-3\/#cursor\" target=\"_blank\" rel=\"noopener ugc nofollow\">specification for styling the cursor<\/a> provides a surprising amount of flexibility. You can do any of the following, and then some:<\/p>\n<ul class=\"\">\n<li id=\"a6bc\" class=\"im in gq hp b hq hr hu hv hy io ic ip ig iq ik ir is it iu bi\" data-selectable-paragraph=\"\">Specify an alternate cursor for an arbitrary element, e.g. <code class=\"dz iv iw ix iy b\">cursor: se-resize;<\/code><\/li>\n<li id=\"f234\" class=\"im in gq hp b hq iz hu ja hy jb ic jc ig jd ik ir is it iu bi\" data-selectable-paragraph=\"\">Use a PNG image, e.g. <code class=\"dz iv iw ix iy b\">cursor: url('image.png');<\/code><\/li>\n<li id=\"6273\" class=\"im in gq hp b hq iz hu ja hy jb ic jc ig jd ik ir is it iu bi\" data-selectable-paragraph=\"\">Use an <em class=\"je\">animated SVG<\/em> image, e.g. <code class=\"dz iv iw ix iy b\">cursor: url('animated.svg');<\/code><\/li>\n<li id=\"fc05\" class=\"im in gq hp b hq iz hu ja hy jb ic jc ig jd ik ir is it iu bi\" data-selectable-paragraph=\"\">Adjust the offset of cursor image, e.g. <code class=\"dz iv iw ix iy b\">cursor: url('image.svg') 50px 0px;<\/code><\/li>\n<li id=\"6fce\" class=\"im in gq hp b hq iz hu ja hy jb ic jc ig jd ik ir is it iu bi\" data-selectable-paragraph=\"\">Show no cursor at all, e.g. <code class=\"dz iv iw ix iy b\">cursor: none;<\/code><\/li>\n<\/ul>\n<p id=\"051c\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">The question that occurs to many developers and other web-focused individuals is <strong class=\"hp gr\">why all of this is needed<\/strong> \u2014 and why, in 2018 (or \u201919, or however long current standards persist), it remains an accepted style choice.<\/p>\n<div class=\"gj gk gl gm gn\">\n<p id=\"051c\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">The question that occurs to many developers and other web-focused individuals is <strong class=\"hp gr\">why all of this is needed<\/strong> \u2014 and why, in 2018 (or \u201919, or however long current standards persist), it remains an accepted style choice.<\/p>\n<p id=\"f205\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">It\u2019s true that by doing away with cursor customization, you\u2019d gain a lot of normalcy, and ward off amateurish attempts to customize the pants off a site.<\/p>\n<p id=\"5648\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">But you\u2019d also be getting rid of a lot of reasonable and helpful use cases \u2014 <strong class=\"hp gr\">besides locking down the very customization which makes the web such a fantastic open playing field.<\/strong><\/p>\n<p id=\"813a\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">Here are a few potential use cases:<\/p>\n<ol class=\"\">\n<li id=\"77bf\" class=\"im in gq hp b hq hr hu hv hy io ic ip ig iq ik jf is it iu bi\" data-selectable-paragraph=\"\"><strong class=\"hp gr\">Customized elements<\/strong>, unrecognized by the browser, the purpose of which need to be indicated to the user.<br \/>\n<strong class=\"hp gr\">Example<\/strong>: Custom javascript was written to copy text from a field to clipboard when the element is clicked. This should be indicated to any non-mobile user when they mouse over the element, by changing the cursor to <code class=\"dz iv iw ix iy b\">copy<\/code>.<\/li>\n<li id=\"01a4\" class=\"im in gq hp b hq iz hu ja hy jb ic jc ig jd ik jf is it iu bi\" data-selectable-paragraph=\"\">An element of the page is <strong class=\"hp gr\">interactive<\/strong> in a unique way, and this needs to be indicated.<br \/>\n<strong class=\"hp gr\">Example<\/strong>: a javascript in-browser game, where <a class=\"ae il\" href=\"https:\/\/codepen.io\/tamm\/pen\/LIFam\" target=\"_blank\" rel=\"noopener ugc nofollow\">you might want to override the cursor entirely.<\/a><\/li>\n<li id=\"3d78\" class=\"im in gq hp b hq iz hu ja hy jb ic jc ig jd ik jf is it iu bi\" data-selectable-paragraph=\"\"><strong class=\"hp gr\">Unique visual styling<\/strong>, to draw attention.<br \/>\n<strong class=\"hp gr\">Example<\/strong>: a <a class=\"ae il\" href=\"http:\/\/www.rouvre.com\/fr\/gallery\/9\/portraits\/670\" target=\"_blank\" rel=\"noopener ugc nofollow\">visual portfolio<\/a>, designed to stand out.<\/li>\n<\/ol>\n<p id=\"03bc\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">Interestingly, there are cases when it is acceptable (per the standards) for the user agent (typically the browser) to actually <em class=\"je\">ignore<\/em> the cursor specification. Native UI elements such as scrollbars are exempt from enforcing custom cursor styles. UI <em class=\"je\">states<\/em> can also ignore cursor styles, for instance when displaying a \u201cbusy\u201d icon to indicate that the page is loading, or a text cursor when working with text \u2014 not something you\u2019d want a stylesheet to override!<\/p>\n<\/div>\n<div class=\"ab cl jg jh fx ji\" style=\"text-align: center;\" role=\"separator\">* * *<\/div>\n<div class=\"gj gk gl gm gn\">\n<p id=\"bf3a\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">Cursor styles, as with many viable style options, should be treated with care and not overused. But in the right situation, they can help a great deal to improve the user\u2019s experience.<\/p>\n<p id=\"b3da\" class=\"pw-post-body-paragraph hn ho gq hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik gj bi\" data-selectable-paragraph=\"\">And besides, where would the web be without the occasional bit of crazy customization?<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The W3 specification for styling the cursor provides a surprising amount of flexibility. You can do any of the following, and then some: Specify an alternate cursor for an arbitrary element, e.g. cursor: se-resize; Use a PNG image, e.g. cursor: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[99],"class_list":["post-2082","post","type-post","status-publish","format-standard","hentry","category-web-dev","tag-css"],"_links":{"self":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/2082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/comments?post=2082"}],"version-history":[{"count":1,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/2082\/revisions"}],"predecessor-version":[{"id":2083,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/2082\/revisions\/2083"}],"wp:attachment":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/media?parent=2082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/categories?post=2082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/tags?post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}