友人は 質問 私の理由<button>
HTML要素にはCSSカーソルがありませんpointer
デフォルトでは?
これはリンクのデフォルトの動作であり、ボタンで
button { cursor:pointer; }
それでも、なぜこの違いがあるのですか?ソースはプラスです。
これらのものが生まれた歴史的秩序を検討する価値があります。
ボタンは、GUIコンピューティングのごく初期から存在していました。物理的なボタンに似ているというスキューモーフィックな印象を与えるシャドウ効果があり、そのような物理的なボタンを押すのと同じくらいクリックできることを示していました。実際、マウスの物理的なボタンをクリックしてそれを行うことができるため(キーボードでタブでナビゲートしていない場合)、スキューモーフィズムはその物理的なアクションによってバックアップされました。
カーソルをそれらの上に置くと、デフォルトのカーソルが表示され、カーソルの下にあるものは何でもクリックまたはダブルクリックできるが、入力できず、サイズ変更可能なオブジェクトのエッジをドラッグすることもできませんでした。 。主に、ボタンが物理的なボタンのように見えるという事実は、クリック可能であることを示すのに十分でした。
ハイパーテキスト(Webは最初の例ではありませんが、幅広いユーザーに提供したキラーアプリでした)が現れると、クリック可能なテキストの一部が下線で示され、(色が利用可能な場合)異なる色が非リンクされたテキスト。まだ物理的な信号としては比較的弱いため、さらなる形として手型カーソルが発明されました。
type
がsubmit
またはreset
であるとき、<input>
がボタンを提供するまでに少し時間がかかりました。他のタイプの<input>
と同様に、OSが標準ウィジェット用に備えていて、標準ボタンを備えていたメカニズムを介して実装されていました。 OSはそのようなウィジェットに矢印カーソルを置くので、矢印カーソルがありました。当時のWebページで持つことができる機能の比較的限られた範囲内で、それらは明らかにボタンであり、明らかにクリック可能だったので、それは問題ありませんでした。また、他のプログラムと比較してWebブラウザーが奇妙な動作をしていることを意味するため、その時点で通常のOSの動作以外のものを持つことは少し奇妙です。多くの豊富にフォーマットされたアプリケーション(ゲームや、OSの標準を超えてUI機能をカスタマイズした一部のハイエンドオフィスソフトウェアなど)でもここで矢印を使用した場合、Webページのような比較的退屈なものではなく、単に灰色がかった黒になります。いくつかの青いビットとおそらくいくつかの画像が片側または反対側に浮いているテキスト?
CSSがWebページのプレゼンテーションの機会を大幅に増やしたとき(コードや方法は恐ろしいものですが、すでに色とフォントの選択がありましたが)ボタンはOSのウィンドウシステムコールを呼び出すことでレンダリングされていたため、CSSの影響を受けませんでした。 CSSが後でカーソルを要素に対して変更できるものの1つにしたとき、ボタンはCSSが変更できる範囲の外にあったため、影響を受けませんでした。
ブラウザーは独自のボタンの描画を開始したため、CSSは外観を変更でき、レイヤー効果でそれらの「上」に配置された要素を「照らす」こともありませんでしたが、現在では通常のカーソルが10年以上あります。リンクと矢印カーソルはボタンの通常のカーソルです。ブラウザのボタンは他のアプリケーションのボタンと同じではない(今でも疑問の余地のある議論です)と今でも主張するかもしれませんが、一貫性は、特にデフォルトとして、そのような変更に反対しています。さて、今は技術的に簡単に変更できますが、ページデザイナーも簡単に変更できるので、変更することを決定していない人のページの外観を変更するのはなぜですか。
理由は次のとおりです。
Microsoftの設計ガイド 弱いアフォーダンスについて話します:
テキストおよびグラフィックスリンクは、アフォーダンスが弱いため、ハンド[…]ポインター[…]を使用します。リンクには、それがリンクであることを示す他の視覚的な手掛かり(下線や特別な配置など)がある場合がありますが、カーソルを合わせたときにハンドポインターを表示することがリンクの明確な表示です。混乱を避けるために、他の目的でハンドポインターを使用しないことが不可欠です。たとえば、コマンドボタンは既に強力なアフォーダンスを備えているため、ハンドポインターは必要ありません。手の形のポインタは、「このターゲットはリンクである」ことを意味しなければなりません。
Appleのヒューマンインターフェイスガイドライン は、「コンテンツがURLリンクである」場合にハンドカーソルを使用する必要があることを示しています。
W3Cユーザーインターフェイスガイドライン 「カーソルはリンクを示すポインターです」と同じことを繰り返します。
-ほとんどのオブジェクトに使用されます。 -テキストリンクに使用されます。
マウスポインターの例
右の動画のホバーカーソルの変化は、マウスカーソルが画面の周りを尖った矢印として移動し、テキストの上にIビームカーソルとして移動し、リンクの上にハンドポインターとして移動する例です。
(ソース: computerhope.com )
マウスの矢印は、ほとんどのオブジェクト(ボタンなど)を選択するためのものです
ハンドポインタは、オブジェクトまたはテキストリンクを選択することを目的としています。
彼らのガイドラインに反して、AppleとMicrosoftのWebサイトの送信フィードバックボタンには、カーソルを合わせたときにポインターカーソルがあることを指摘しておきます。どちらもinput [type = submit]要素です。
UXの主な理念の1つは「私に考えさせない」です...ボタンの上にハンドポインターがない場合、「これはボタンですか」と考える必要があります。 ...つまり、この主な原則を破ってUXを悪化させています。
これがおそらく理由です(@tyletrotterが言うように)Appleであり、MicrosoftはどちらもWebサイトでこれを使用しています。
最初、 <button>
はリンクではないため、リンクにカーソルを合わせるとどうなるかについての回答は適用されません。次に、CSSはHTMLとは別の独立した仕様です。一方は他方が何をすべきかを指定しません。多くの場合、どのCSSがアクションに提供されるかを決定するのはブラウザベンダーですが、仕様にない場合は同じものに固執する傾向があります。
仕様のこの部分を読んだので久しぶりで、そこにあるものを確認する必要がありますが、この場合ボタンがボタンとそれがボタンでない場合、それは別のものでなければなりません!
私が使用する単純なルールは次のとおりです。
ボタンの場合でもテキストリンクのように見える場合は、ハンドカーソルを配置します。
ボタンの方が便利でセマンティックな場合があるため、リンクのように見えるボタンが必要な場合があります(例:_"#login-modal"
_のようにhref
を偽造し、event.preventDefault()
を実行する必要がない場合どこにも行かない)。 _Home, About, Login
_のナビゲーションがあるとします。
Home
およびAbout
は、別のページに移動するリンクです。ただし、Login
はそれらと同じに見えますが、実際にはログインモーダルを開くボタンです。ボタンはURLを変更しないため、ボタンの方が意味的に意味があります。この場合、リンクと同じカーソルを持っていることは絶対に意味があります。