Q:cursor: pointer; をリンク以外の要素に付けるのは犯罪ですか? #shorts これは、ゆめみフロントエンド忘年LT会の #発表資料 です 質問来てた
cursor: pointer; をリンク以外の要素に付けるのは犯罪ですか?
結論
犯罪にはならない
仕様書にもOKと書かれている
https://gyazo.com/7285395abb7d9875bd6c57557c341439
しかし
この記述は2019年まで無かった
https://gyazo.com/2a8d96be105cae1fb1b88f2b81bab121
実はリンク以外に cursor: pointer をつけるのは2019年までは仕様違反だった
※それ以前でもCSSの仕様違反は別に犯罪ではないので、犯罪にはならない
今でも <button>のUAスタイルシートは cursor: defaultなのはその名残
ほかにも知りたいことがあったらコメント欄で教えて
第2幕:なぜ昔はリンク以外に cursor: pointerをつけたらダメだったのか
昔は全部の要素がcursor: default だったが、Webが登場してリンクという概念が登場する
リンクは青く、下線がついて表さされたが、それだけではアフォーダンスが足りない
そこで出てきたのが cursor: pointer
リンクとそれ以外の要素は区別できるようにするべき
なので、カーソルも分けるべき
今でもHIGではcursor: pointerはリンクのみ
第3幕:なぜ今は cursor: pointerを他のインタラクティブな要素につけていいのか
いろんなWebサイトでボタンなどほかのインタラクティブな要素でcursor: pointerが付けられるようになった
もはや(cursor: pointerだ→リンクだろう、別タブで開こう→開けない!)と混乱する人はいないと判断された?
UIフレームワークでもcursor: pointerをつけているのが多い
まとめ
どんなときに使うべきかもCSSの仕様で書いている
仕様の策定された経緯まで掘ると楽しい
実際の使用状況に合わせて仕様が変わった実例を知れた
とはいえcursorに頼るのは控えたい
タッチデバイスやキーボード操作時にこまるから