18 Benutzeroberfläche

18.1 Cursor: die 'cursor'-Eigenschaft

'cursor'

Wert:	[[<uri>,]* [auto \| crosshair \| default \| pointer \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help ]] \| inherit
Ausgangswert:	auto
Angewendet auf:	Alle Elemente
Vererbt:	Ja
Prozentwerte:	N/A
Medium:	visual, interactive

Diese Eigenschaft gibt den Typ des Cursors an, der für das Zeigegerät angezeigt wird. Die Werte haben die folgenden Bedeutungen:

auto: Das Benutzerprogramm ermittelt den anzuzeigenden Cursor abhängig vom aktuellen Kontext.

crosshair: Ein einfaches Fadenkreuz (z.B. kurze Liniensegmente, die an ein "+"-Zeichen erinnern).

default: Der von der Plattform abhängige Standard-Cursor. Wird häufig als Pfeil dargestellt.

pointer: Der Cursor ist ein Zeiger, der einen Link anzeigt.

move: Kennzeichnet, dass etwas verschoben werden soll.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: Gibt an, dass eine Fensterkante verschoben werden soll. Beispielsweise wird der 'se-resize'-Cursor verwendet, wenn das Verschieben in der rechten unteren Ecke der Box beginnt.

text: Gibt an, dass Text markiert werden kann. Wird häufig auch als I-Balken dargestellt.

wait: Zeigt an, dass das Programm beschäftigt ist und der Benutzer warten soll. Wird häufig als Uhr oder Sanduhr dargestellt.

help: Es steht Hilfe für das Objekt unter dem Cursor zur Verfügung. Wird häufig auch als Fragezeichen oder Sprechblase dargestellt.

<uri>: Das Benutzerprogramm lädt den Cursor aus der durch den URI angegebene Ressource. Wenn das Benutzerprogramm den ersten Cursor aus einer Liste mit Cursorn nicht verarbeiten kann, sollte er versuchen, den zweiten zu verarbeiten usw. Wenn das Benutzerprogramm keine benutzerdefinierten Cursor verarbeiten kann, muss es den generischen Cursor am Ende der Liste verwenden.

Beispiel

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Benutzereinstellungen für Farben

CSS2 ermöglicht nicht nur, Text, Hintergründen usw. vordefinierte Farbwerte zuzuweisen, sondern erlaubt Autoren außerdem, Farben so anzugeben, dass sie in die graphische Umgebung des Benutzers integriert werden. Stilregeln, die Benutzerprioritäten berücksichtigen, bieten deshalb die folgenden Vorteile:

Sie erzeugen Seiten, die in das vom Benutzer definierte Look&Feel passen.
Sie erzeugen Seiten, auf die ein besserer Zugriff möglich ist, weil die aktuellen Benutzereinstellungen möglicherweise eine Behinderung berücksichtigen.

Die für die Systemfarben definierte Wertemenge ist darauf ausgelegt, dass sie vollständig ist. Für Systeme, die über keinen entsprechenden Wert verfügen, sollte der angegebene Wert auf das nächstliegende Systemattribut oder auf eine Standardfarbe abgebildet werden.

Die folgende Liste beschreibt zusätzliche Werte für farbbezogene CSS-Attribute und ihre allgemeine Bedeutung. Jede Farbeigenschaft (z.B. 'color' oder 'background-color') kann einen der folgenden Namen annehmen. Obwohl sie die Groß-/Kleinschreibung nicht berücksichtigen, wird empfohlen, dass die nachfolgend gezeigte gemischte Schreibweise berücksichtigt wird, um die Namen besser lesbar zu machen.

ActiveBorder: Aktiver Fensterrahmen

ActiveCaption: Aktiver Fenstertitel

AppWorkspace: Hintergrundfarbe eines Multiple Document Interfaces

Background: Desktop-Hintergrund

ButtonFace: Schriftfarbe für dreidimensionale Anzeigeelemente

ButtonHighlight: Helle Farbe für dreidimensionale Anzeigeelemente

ButtonShadow: Schattenfarbe für dreidimensionale Anzeigeelemente (für Kanten, die von der Lichtquelle weg zeigen)

ButtonText: Text auf Schaltflächen

CaptionText: Text in Überschriften, Size Boxes und Pfeilfeld der Bildlaufleiste

GrayText: Grau unterlegter (deaktivierter) Text. Diese Farbe wird auf #000 gesetzt, wenn der aktuelle Anzeigetreiber keine durchgängige graue Farbe unterstützt.

Highlight: Elemente, die in einem Steuerelement markiert sind

HighlightText: Text von Elementen, die in einem Steuerelement markiert sind

InactiveBorder: Nicht aktiver Fensterrahmen

InactiveCaption: Nicht aktiver Fenstertitel

InactiveCaptionText: Farbe des Texts in einem nicht aktiven Titel

InfoBackground: Hintergrundfarbe für Tooltip-Steuerelemente

InfoText: Textfarbe für Tooltip-Steuerelemente

Menu: Menühintergrund

MenuText: Text in Menüs

Scrollbar: Grauer Bereich der Bildlaufleiste

ThreeDDarkShadow: Dunkler Schatten für dreidimensionale Anzeigeelemente

ThreeDFace: Schriftfarbe für dreidimensionale Anzeigeelemente

ThreeDHighlight: Farbe für die Hervorhebung von dreidimensionalen Anzeigeelementen

ThreeDLightShadow: Helle Farbe für dreidimensionale Anzeigeelemente (für Kanten, die zur Lichtquelle hin zeigen)

ThreeDShadow: Dunkler Schatten für dreidimensionale Anzeigeelemente

Window: Fensterhintergrund

WindowFrame: Fensterrahmen

WindowText: Text in Fenstern

Beispiel

Um beispielsweise die Hintergrund- und Vordergrundfarben eines Absatzes auf die Vordergrund- und Hintergrundfarben des Benutzerfensters zu setzen, schreiben Sie Folgendes:

P { color: WindowText; background-color: Window }

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

18.3 Benutzereinstellungen für Schriften

Wie Farben können Autoren auch Schriften so angeben, dass die Systemressourcen der Benutzer genutzt werden. Weitere Informationen finden Sie im Abschnitt über die 'font'-Eigenschaft (15.2.5).

18.4 Dynamische Einrahmungen: die 'outline'-Eigenschaft

Manchmal wollen Stylesheet-Autoren Einrahmungen für visuelle Objekte erstellen wie beispielsweise für Schaltflächen, aktive Formularfelder, Bilder und so weiter, so dass sie hervorgehoben dargestellt werden. CSS2-Einrahmungen unterscheiden sich wie folgt von Rahmen:

Einrahmungen benötigen keinen Platz.
Einrahmungen müssen nicht rechteckig sein.

Die Einrahmungs-Eigenschaften steuern den Stil dieser dynamischen Einrahmungen.

'outline'

Wert:	[<'outline-color'> \| \| <'outline-style'> \| \| <'outline-width'> ] \| inherit
Ausgangswert:	Siehe einzelne Eigenschaften
Angewendet auf:	Alle Elemente
Vererbt:	Nein
Prozentwerte:	N/A
Medium:	visual, interactive

'outline-width'

Wert:	<border-width> \| inherit
Ausgangswert:	medium
Angewendet auf:	Alle Elemente
Vererbt:	Nein
Prozentwerte:	N/A
Medium:	visual, interactive

'outline-color'

Wert:	<color> \| invert \| inherit
Ausgangswert:	invert
Angewendet auf:	Alle Elemente
Vererbt:	Nein
Prozentwerte:	N/A
Medium:	visual, interactive

Die durch die Einrahmungseigenschaften erzeugten Einrahmungen werden „über“ eine Box gezeichnet, das heißt, die Einrahmung befindet sich immer oben und beeinflusst die Position oder die Größe der Box oder irgendwelcher anderer Boxen nicht. Die Anzeige oder das Unterdrücken von Einrahmungen verursacht also kein Neuzeichnen.

Die Einrahmung wird unmittelbar außerhalb der Rahmenkante beginnend gezeichnet.

Einrahmungen müssen nicht rechteckig sein. Ist das Element beispielsweise über mehrere Zeilen umbrochen, ist die Einrahmung der kleinste Umriss, der alle Boxen des Elements beinhaltet. Im Gegensatz zu Rahmen ist die Einrahmung am Ende oder Anfang einer Zeilen-Box nicht geöffnet, sondern immer vollständig geschlossen.

Die 'outline-width'-Eigenschaft akzeptiert dieselben Werte wie 'border-width'.

Die 'outline-style'-Eigenschaft akzeptiert dieselben Werte wie 'border-style', nur dass 'hidden' kein erlaubter Einrahmungsstil ist.

Die 'outline-color'-Eigenschaft akzeptiert alle Farben sowie das Schlüsselwort 'invert'. 'invert' nimmt eine Farbumkehrung der Pixel auf dem Bildschirm vor. Dies ist ein gebräuchlicher Trick, um sicherzustellen, dass der Fokusrahmen sichtbar ist, unabhängig von farbigem Hintergrund.

Die 'outline'-Eigenschaft ist eine zusammenfassende Eigenschaft und setzt 'outline-style', 'outline-width' und 'outline-color'.

Beachten Sie, dass die Einrahmung auf allen Seiten dieselbe ist. Im Gegensatz zu Rahmen gibt es keine 'outline-top'- oder 'outline-left'-Eigenschaft.

Diese Spezifikation definiert nicht, wie mehrere überlappende Einrahmungen oder wie Einrahmungen für Boxen gezeichnet werden, die teilweise von anderen Elementen verdeckt sind.

Hinweis: Weil die Fokuseinrahmung keinen Einfluss auf die Formatierung hat (das heißt, es ist kein Platz mehr dafür im Box-Modell), kann sie möglicherweise andere Elemente auf der Seite überlappen.

Beispiel

Nachfolgend sehen Sie ein Beispiel, das eine dicke Einrahmung um ein BUTTON-Element zeichnet:

BUTTON { outline-width : thick }

Mit Hilfe von Skriptprogrammen kann die Breite der Einrahmung dynamisch verändert werden, ohne ein Neuzeichnen zu verursachen.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

18.4.2 Einrahmungen und der Fokus

Graphische Benutzeroberflächen können Einrahmungen um Elemente verwenden, um dem Benutzer damit anzuzeigen, welches Element auf der Seite den Fokus hat. Diese Einrahmungen werden zusätzlich zu irgendwelchen Rahmen angezeigt, und das Aktivieren oder Deaktivieren der Einrahmungen sollte nicht bewirken, dass das Dokument neu gezeichnet werden muss. Der Fokus ist erforderlich für die Benutzerinteraktion in einem Dokument (z.B. für die Eingabe von Text, die Auswahl einer Schaltfläche usw.). Benutzerprogramme, die die interaktive Mediengruppe unterstützen, müssen beobachten, wo sich der Fokus befindet, und sie müssen außerdem den Fokus darstellen. Das kann auch mit Hilfe dynamischer Einrahmungen erfolgen, in Kombination mit der Pseudo-Klasse :focus.

Beispiel

Um beispielsweise eine dicke schwarze Linie um ein Element zu zeichnen, wenn es den Fokus hat, und eine dicke rote Linie, wenn es aktiv ist, können die folgenden Regeln angewendet werden:

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 Vergrößerung

Die CSS Working Group hat beschlossen, dass die Vergrößerung eines Dokuments oder von Teilen eines Dokuments nicht über Stylesheets festgelegt werden sollte. Benutzerprogramme können eine solche Vergrößerung auf unterschiedliche Weise unterstützen (z.B. größere Bilder, lautere Sounds usw.).

Wenn Benutzerprogramme eine Seite vergrößern, sollten sie die Beziehungen zwischen positionierten Elementen beibehalten. Ein Comic-Strip könnte beispielsweise aus Bildern mit überlagerten Textelementen zusammengesetzt werden. Wenn diese Seite vergrößert wird, sollte ein Benutzerprogramm den Text weiterhin innerhalb der Sprechblasen des Comic-Strips anzeigen.

Dokument erstellt 04/02/2006, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/css-rf-kap18.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.

Referenzen

CSS2-Spezifikation : http://www.edition-w3.de

Diese Verweise und Links verweisen auf Dokumente, die während des Schreibens dieser Seite konsultiert wurden, oder die zusätzliche Informationen liefern können, aber die Autoren dieser Quellen können nicht für den Inhalt dieser Seite verantwortlich gemacht werden.
Der Autor Diese Website ist allein dafür verantwortlich, wie die verschiedenen Konzepte und Freiheiten, die mit den Nachschlagewerken gemacht werden, hier dargestellt werden. Denken Sie daran, dass Sie mehrere Quellinformationen austauschen müssen, um das Risiko von Fehlern zu reduzieren.

Inhaltsverzeichnis Haut