Websiteentwicklung: CSS: Cursor
Mit der Eigenschaft cursor kann beeinflußt werden, wie ein Zeigergerät dargestellt wird, sofern eines beim Nutzer vorhanden
ist, was nicht unbedingt sein muß, etwa bei einem Tast- oder Grabbelbildschirm, wo die Bedienung direkt durch Fingergesten
auf dem Bildschirm erfolgt.
Ein typisches Zeigergerät ist etwa die Maus. Die vom Nutzer verwendete graphische Oberfläche oder auch das Darstellungsprogramm selbst stellen Präsentationen eines solchen Zeigers bereit, die sich je nach der aktuellen Anwendung ändern können, also wozu der Zeiger gerade verwendet wird. Da der Nutzer an die jeweilige Erscheinung gewöhnt ist, ist es oft suboptimal, die Präsentation des Zeigers willkürlich zu ändern oder auch eine Erscheinung zu wählen, die nicht zur aktuellen Aktion paßt.
Der Wert ist entweder 'inherit' oder eines der folgenden Schüsselwörter oder eine Liste von URIs, mit einem Komma als Separator, gefolgt von einem der folgenden Schlüsselwörter. Die Angabe einer URI wird im folgenden Abschnitt erläutert.
Die Beschreibungszeile ist jeweils mit dem entsprechenden Zeiger dekoriert, fährt man mit dem Zeigergerät drüber, sollte zu sehen sein, wie das eigene Darstellungsprogramm den jeweiligen Zeiger darstellt.
- 'auto' - Das Darstellungsprogramm bestimmt die Erscheinung je nach aktueller Aktion; Initialwert
- 'default' - Das ist die im System gewählte Erscheinung, oft ein Pfeil
- 'crosshair' - Fadenkreuz, oft zur präzisen Wahl einer Positionierung verwendet
- 'pointer' - Zeiger, zeigt einen Verweis an, oft eine Hand mit gestrecktem Zeigefinger
- 'text' - Zeigt ausgewählbaren Text an, sieht oft ähnlich aus wie ein großes 'I'
- 'wait' - Warten, etwa wenn etwas geladen wird, oft ein Uhrsymbol, Sanduhr, Armbanduhr oder ein Kreis, in welchem sich kleinere Kreise in der Runde drehen
- 'help' - Zeigt an, dass eine Hilfe verfügbar ist, oft ein Fragezeichen oder ein Ballon
- 'move' - Zeigt an, dass etwas bewegbar ist, oft eine greifende Hand
- 'progress' - Fortschrittsanzeige bei irgendeiner Rechnung des Programmes, auf dessen Ende gewartet wird, also etwas anders als 'wait', oft ein drehender Ball oder ein Zeiger mit einer Uhr dran (nicht in CSS 2.0)
- ?-resize - Verschiebbare Ecke oder Kante, um die Kanten eines Objektes zu verschieben. Das Fragezeichen steht hier für eine Buchstabenkombination für eine Richtungsangabe, die im übertragenen Sinne zu verstehen ist. Oft wird eine Kante oder Ecke angezeigt, auf welche ein Zeiger zeigt, natürlich dann die Kante oder Ecke, die gerade beweglich ist, die Schlüsselwörter im einzelnen:
- 'n-resize' - Norden, beziehungsweise oben
- 's-resize' - Süden, beziehungsweise unten
- 'e-resize' - Osten, beziehungsweise rechts
- 'w-resize' - Westen, beziehungsweise links
- 'ne-resize' - Nordosten, beziehungsweise rechts oben
- 'nw-resize' - Nordwesten, beziehungsweise links oben
- 'se-resize' - Südosten, beziehungsweise rechts unten
- 'sw-resize' - Südwesten, beziehungsweise links unten
Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen und interaktiven Medien.
Beispiel:
abbr[title],
acronym[title],
span[title] {
cursor:help;
border-bottom: thin dashed
}
Das ist hilfreich, um anzuzeigen, dass bei Elementen mit Attribut title Zusatzinformation verfügbar ist - da man wenig davon hat, wenn das Hilfezeiger erst erscheint, wenn man mit dem Zeigergerät darüber ist, sind die Elemente noch zusätzlich per Rahmen dünn unterstrichelt.
Angabe einer URI, eigener Zeiger
BearbeitenEin eigener Zeiger lässt sich aus einer Datei laden. Dazu ist die URI wie üblich anzugeben, also angefangen mit 'url(', dann die URI, dann ')', im Bedarfsfalle die URI in Anführungszeichen. Es können in einer Liste mehrere Dateien für Zeiger angegeben werden, bevorzugt in verschiedenen Formaten, wird das erste Format vom Darstellungsprogramm nicht interpretiert, wird das nächste in der Liste versucht und so weiter. Daher ist als letzter Listenpunkt immer ein Schlüsselwort aus obiger Liste anzugeben, damit überhaupt ein Zeiger angezeigt werden kann, der die gewünschte Aktion repräsentiert.
Beispiel:
p {
cursor: url(Zeiger.svg#Zeiger3),
url(Zeiger3.png),
url(Zeiger3.ani),
url(Zeiger3.cur),
auto
}
Es ist in CSS nicht angegeben, dass es erforderlich ist, dass ein bestimmtes Format interpretiert werden muß. Zwar können mittlerweile sehr viele Programme SVG-Dokumente interpretieren, was aber auch nicht bedeutet, dass diese auch Zeiger aus Dateien darstellen können, obgleich SVG sogar im Detail definiert, wie solch ein Zeiger in einem SVG-Dokument zu notieren ist, um verwendet werden zu können und wo genau der Zeigepunkt liegt, was nicht bei allen Formaten möglich ist. Auch innerhalb von SVG-Dokumenten funktioniert die Darstellung solcher Zeiger aufgrund von Fehlern oder Lücken von Darstellungsprogrammen oft nicht. Bei SVG jedenfalls wird ein Zeiger mit einem speziellen Element realisiert, welches den für SVG üblichen Inhalt hat, entsprechend wird das Element per Fragmentidentifizierer in obigem Deklarationsblock identifiziert - eine Datei kann also eine ganze Kollektion von Zeigern enthalten, die man so referenzieren kann.
Die Dateien mit den Endungen '.ani' und '.cur' verwenden ein Format, welches von Microsoft stammt, also auch nicht bei allen Programmen funktionieren müssen oder anders als die einfachen Text-Dateien im Falle von SVG von allen Autoren auch herstellbar sein müssen.
PNG, GIF oder JPEG/JFIF wiederum stellen nicht die Funktionalität bereit, den Zeigepunkt anzugeben, was auch mit CSS nicht direkt möglich ist, weswegen sich diese Formate nur eingeschränkt für diesen Zweck eignen. Hier fehlt CSS also eine Funktionalität, um diese allgemein gebräuchlichen Pixelgraphik-Formate für diesen Zweck gut nutzbar zu machen.