CSS Secret Garden: 適切な Cursor_html/css_WEB-ITnose の選択

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

マウス ポインターの目的は、カーソルが現在画面上のどこにあるかを示すだけでなく、どのような操作を実行できるかをユーザーに伝えることです。これはデスクトップ アプリケーションでは一般的なユーザー エクスペリエンスですが、Web アプリケーションでは忘れられがちです。

これについて不満を抱いているのは著者だけではありません。 CSS 2.1 に戻ると、多くの組み込みカーソルには実際にはアクセスできませんでした。主に、ポインタのカーソル属性を使用してクリック可能なものを示したり、ヘルプ カーソルを使用してツールの使用を促したりします。進行状況バーの代わりに (または同時に表示して) 待機カーソルと進行状況カーソルを使用する人もいます。しかし、それだけです。ただし、CSS ユーザー インターフェイス レベル 3 で多くの新しい組み込みカーソルが利用できるようになったにもかかわらず、多くの作成者は依然として古いカーソルの習慣に固執しています。多くのユーザー エクスペリエンスの改善と同様、いつか実際に遭遇するまで、これが問題であることに気づかないかもしれません。下を見てみよう！

解決策

下の画像で新しい組み込みカーソルの完全なリストを確認できます

仕様に従う 彼らが何をするのかを学びましょう。ただし、ご想像のとおり、そのすべてが Web APP で使用できるわけではありません。たとえば、「選択されたセルまたはセルのグループ」を意味するセル カーソルがあります。ご想像のとおり、スプレッドシートと編集可能なグリッド以外の使用例はそれほど多くありません。

このセクションの目的は、これらの新しいカーソルの潜在的な使用例をすべて網羅的に紹介することではありません。ただし、そのうちのいくつかは、ほんの少しのコードで多くの Web アプリの使いやすさを即座に改善できるため、際立っています。

無効ステータスを宣言

おそらく、最も広く使用されているカーソルは、許可されていないカーソルです。

特定のコントロールに、何らかの理由で一部の操作が不可能であることを示すと便利です。通常は、問題のコントロールが無効になっているためです。特に最近では、非常に様式化されたフォームが多くなり、フォーム コントロールが実行可能かどうかを判断するのが難しいことがよくあるため、これは歓迎されます。次のようなかなり一般的な方法で使用できます。

:disabled, [disabled], [aria-disabled="true"] {    cursor: not-allowed;}

カーソルを隠す

カーソルを隠すというのは、ユーザビリティの悪夢のように思えますよね。これを実現したいと考えている人がいて、Web 標準は実際にそれを実現するのに役立つのでしょうか?これらの人々に夢中になる前に、いくつかの未解決のユーザビリティの問題があります。開発者がマウス カーソルを隠すのを忘れた公共のタッチ スクリーン (つまり、メッセージングや機内エンターテインメントに使用されるタッチ スクリーン) での経験を思い出してください。そのため、常に違和感が残ります。画面上で。または、ビデオを見ているときにマウスを画面の右側に移動して自動的に非表示にしたい場合は、カーソルが視界を妨げているためです。

明らかに、使いやすさを向上させるためにカーソルを非表示にする使用例は他にもたくさんあります。このため、新しいカーソルのキーワードの 1 つは none です。 CSS 2.1 ではカーソルを非表示にすることができますが、次のように透明な 1x1 GIF 画像が使用されます:

video {    cursor: url(transparent.gif);}

ビデオの視聴中にカーソルを非表示にする場合は、そうでないことを確認してください。誤ってビデオ再生を制御する機能も非表示になります。そうしないと、良いことよりも害を及ぼすことになります。

ここでは、cursor: none を使用するだけなので、そのような面倒なことをする必要はありません。ただし、CSS3 カーソルとまだ互換性がないブラウザにダウングレードを提供したい場合もあります。これはカスケードすることで実行できます:

cursor: url('transparent.gif');cursor: none;