Cross-Browser CSS Cursor Bilder eingehende
Wann sollte ich verwenden Benutzerdefinierte Cursoren Anstelle der Built-in-One?
Im allgemeinen CSS-Cursor (eingebaute oder benutzerdefinierte) sollten als Hinweis für den Benutzer verwendet werden, um welche Aktion kann die Maus durchführt. Werfen sie einen Blick auf einem Beispiel nehmen, die keine benutzerdefinierten Cursor nicht verwenden, um einen gemeinsamen Anwendungsfall zu veranschaulichen: Drag & Drop. Um Benutzer einen visuellen Hinweis zu geben, dass ein Element ziehbar ist, ist es üblich, ein Objekt der CSS Cursor-Eigenschaft festlegen zu bewegen. Maus über das Objekt ziehbar Objekt unten, um zu sehen, wie das funktioniert.
Dies wird mit dem folgenden CSS getan:
Der obige Code sicher, dass, wenn ein Benutzer „den Mauszeiger über“ eine Verbindung mit dem HTML5 Drag and Drop „ziehbar“ Attribut, das bewegt den Cursor erscheint. Es ist eine gute Möglichkeit, den Benutzer „-Figur out“ zu helfen, wie die Benutzeroberfläche mit minimaler Anweisung zu verwenden. Eine Liste der integrierten in Cross-Browser-Cursor Eigenschaftswerte können bei CSS2 Cursorart Seite zu sehen.
Die Einbau-Cursor sind groß, aber es gibt ein paar Dinge im Auge zu behalten.
Die CSS Custom Cursors
Hier einige sameple CSS-Code, die benutzerdefinierte Cursor, wenn der Benutzer den Mauszeiger über ein div mit der id dragMe zeigen. Wenn der Browser (wie Opera) keine benutzerdefinierten Cursor tun, Ausweich den Cursor auf die Einbau-Cursor bewegen.
Solange Sie den Cursor im gleichen Verzeichnis wie die Sheet ist, und solange es eine unkomprimierte .CUR Datei ist, dann ist es so einfach wie das. Beachten Sie, dass eine .CUR Datei ist nur eine ICO-Datei mit zusätzlichen Informationen, die der Entwickler ermöglicht die „Host spot“ Position des Cursors zu definieren (das heißt den Teil des Bildes, das auf die Position der Maus-Punkte). Beachten Sie, dass .CUR Dateien 32-Bit-Farben (16,7 Millionen Farben plus Alpha-Kanal Transparenz) unterstützen, so Designer Cursor erstellen können, die halbtransparenten Bereiche wie Schatten und Anti-Aliasing haben.
Die Gotchas Custom CSS Cursors
Es gibt ein paar Dinge, die Sie sich merken müssen, wenn CSS Cursor verwenden
- Sie müssen eine Standard „built-in“ Cursor nach dem benutzerdefinierten Cursor hinzufügen oder die benutzerdefinierten Cursor wird in Firefox nicht geladen werden. Betrachten Sie es als Mozillas Weg zur Durchsetzung der guten Web-Praktiken. -)
- Internet Explorer interpretiert relativen URLs als relativ zu dem HTML-Dokument. und nicht die CSS-Datei wie Gott (und der W3C) bestimmt (Manchmal scheint es, dass der IE aus dem Weg geht das Leben schwer für uns Entwickler zu machen). Dies gilt für alle Versionen von IE, auch IE9. Um die Kompatibilität Cross-Browser, müssen Sie entweder eine absolute URL:
oder eine Fallback-URL für IE:
Performance-Probleme
Wie bereits erwähnt, kann eine Menge von Browsern (zB Firefox oder IE6) zeigen, nicht komprimierte .CUR Dateien, aber sie können PNG-Dateien zeigen. Da wir eine komprimierte Version verwenden, wenn möglich möchte, könnte man dies tun:
Das funktioniert gut, solange der Cursor-Hotspot ist 0,0. Sie können einen PNG-Hotspot mit der CSS3 Cursor-Syntax definieren, aber es bricht IE:
Jetzt können wir diese CSS .PNG Lasten in nicht-IE-Browsern zu gewährleisten:
Ein letztes Wort auf dem Test in IE
Weiterführende Literatur
FYI, hat Opera keine benutzerdefinierten Cursor für Sicherheit und Zugänglichkeit Gründe ermöglichen.
Benutzerdefinierte Cursor ist eine sehr einfache und verlockende Möglichkeit, Benutzer zu täuschen. Stellen Sie sich einen benutzerdefinierten Cursor, die genau wie ein normales aussieht, aber um einige Pixel versetzt. Dies kann auf viele verschiedene Weise genutzt Menschen dazu verleiten, irgendwo klicken sie wollen nicht. Denken Sie Clickjacking aber noch subtiler.
Auch eine benutzerdefinierte Cursor (insb. Eine vollständig transparent oder aus wenigen Punkte) könnte sich als sehr schwierig zu sehen und für Menschen mit Sehbehinderung zu verwenden.
Ich frage mich, ob es möglich ist, für Browser benutzerdefinierte Cursor zu unterstützen und die legitime „Clickjacking-like“ Situation zu verhindern, wie Sie beschreiben. Zum Beispiel: vielleicht kann der Browser an der Cursorposition und sehen, ob der Hotspot transparent ist, und dass es zu einem wesentlichen Teil des Bildes angebracht ist. Es wäre toll, wenn Opera die Führung übernimmt und zeigte, wie sie diese Funktion unterstützen konnten, während über den potenziellen Missbrauch der Technologie zu kümmern.
Sie können auch Cursor on the fly erstellen unter Verwendung der Leinwand. Kritzeln oder stirbt, dies zu machen unterschiedlicher Farbe und Größe Pinsel Cursor anstelle von Hunderten von Cursor Bilder herunterzuladen.
Ist es möglich, einen Cursor zu verwenden automatisiertes Client Skript zu speichern.
Nun, ich arbeite an einem gewissen Sicherheitsimplementierung unter Verwendung von benutzerdefinierten Cursor Bildern.
Ich möchte wissen, ob es möglich ist, einen Cursor speichern wird über eine HTML-Abteilung mit einiger Client-Skript angezeigt, ohne den Server und auf dem gleichen Client-Computer zugreifen, wo die HTML-Seite gerendert wurde.
Welche Auswirkungen auf die Sicherheit denken Sie an? Ich würde gerne Ihre Meinung wissen.
Feedback geben
Seien Sie nicht schüchtern! Feedback geben und die Diskussion teilzunehmen.