Sichtbarkeit und visuelle Effekte

Sichtbarkeit: Die Eigenschaft visibility

Die Eigenschaft visibility gibt an, ob die durch ein Element erzeugten Boxen angezeigt oder unsichtbar sein sollen.

Werte	`visible`, `hidden`, `collapse`, inherit
Initialwert	`inherit`
Vererbung	nein
Anwendung	alle Elemente

Standardmäßig sind Elemente sichtbar (visible). Wenn Sie den Wert hidden angeben, wird das Element unsichtbar. Im Gegensatz zur Angabe display: none; verschwindet das Element nicht vollständig aus der Darstellung des Dokuments, sondern ist lediglich nicht sichtbar. Stellen Sie sich das so vor: Das Element ist zwar da, aber vollständig transparent, verfügt über eine Breite und eine Höhe und hat dadurch Einfluss auf die Darstellung nachfolgender Elemente.

Ein weiterer Unterschied zwischen display: none; und visibility: hidden; liegt in der Behandlung der Nachkommenelemente. Nachkommen eines aus der Darstellung des Dokuments herausgenommenen Elements können nicht ausgegeben werden, auch nicht, wenn display explizit auf einen anderen Wert als none gesetzt wird. Nachkommen von unsichtbaren Elementen können wieder sichtbar gemacht werden, wenn visibility auf den Wert visible gesetzt wird.

Wird der Wert collapse auf eines der Tabellenelemente tr, tbody, col oder colgroup angewendet (beziehungsweise auf ein Element, dessen Eigenschaft display den Wert row, row-group, column oder columns-group hat), fällt das Element in sich zusammen. Damit lassen sich Teile von Tabellen dynamisch aus der Anzeige entfernen, ohne dass sich am Elementfluss etwas ändert. Bei anderen Elementen hat dieser Wert dieselbe Bedeutung wie hidden.

Browserunterstützung

Die Eigenschaft visibility wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 7: Der IE erkennt bis Version 7 die Werte inherit und collapse an normalen Elementen nicht und reagiert innerhalb von Tabellen gar nicht auf diese Eigenschaft.
Opera: In Tabellen erkennt Opera bis Version 9.2 den Wert collapse nur für Zeilen und Zeilengruppen, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden.
Safari: Safari behandelt bis Version 2 den Wert collapse genau so wie hidden, das heißt, das Element wird zwar unsichtbar, aber nicht ganz entfernt.
Konqueror: Konqueror bis Version 2.2 erkennt den Wert collapse nicht.
Konqueror: Ebenso wie Opera erkennt Konqueror 3.5 in Tabellen den Wert collapse nur für die Elemente row und row-group, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Die Eigenschaft 'visibility'</title>
    
    <style type="text/css">
      /* <![CDATA[ */
      div {
        padding: .5em;
        margin: .5em 0;
        border: 2px solid black;
        color: black;
        background-color: #ffd;
      }
      table {
        border: 2px solid black;
        color: black;
        background-color: #ffd;
      }
      td {
        padding: .5em;
        border: 1px solid black;
        color: black;
        background-color: #ffb;
      }
      /* ]]> */
    </style>
  </head>
  
  <body>
    <div>Box 1</div>
    <div style="visibility: hidden;">Box 2</div>
    <div>Box 3</div>
    
    <table>
      <tr>
        <td>Zelle 1</td>
        <td style="visibility: collapse;">Zelle 2</td>
        <td>Zelle 3</td>
      </tr>
    </table>
  </body>
</html>

Listing 7.8: Die Eigenschaft visibility

Abb. 7.8: Unsichtbare Elemente

Zum Seitenanfang

Überlauf: Die Eigenschaft overflow

Im Allgemeinen ist der Inhalt einer Box höchstens so breit, wie der Inhalt der Box es erfordert. Das bedeutet, Inhalte werden so umbrochen beziehungsweise die Box wird so erweitert (zumeist in der Höhe), dass der Inhalt hineinpasst. In einigen Fällen kann es jedoch dazu kommen, dass der Inhalt einer Box aus dieser herausragt:

Eine Zeile kann oder soll nicht (beispielsweise weil white-space: nowrap; deklariert wurde) umbrochen werden, sodass die Zeilenbox breiter als die Contentbox ist.
Eine Blockbox ist breiter als ihr umschließender Block. Im folgenden Beispiel würde Box 2 aus Box 1 herausstehen:
```
<div class="box1" style="width: 300px;">
  Box 1
  <div class="box2" style="width: 500px">Box 2</div>
</div>
```
Die notwendige Höhe des Elementinhalts überschreitet die dem Block explizit (mittels der Eigenschaft height) zugeordnete Höhe, beziehungsweise die Höhe einer Box überschreitet die dem umschließenden Block explizit zugeordnete Höhe. Abbildung 7.26 zeigt ein entsprechendes Beispiel.
Eine Box ist derart positioniert, dass Teile außerhalb des umschließenden Blocks liegen. Oder anders ausgedrückt: Eine Box wurde aus ihrem umgebenden Block herauspositioniert.
Eine Box hat negative Randabstände, also negative Werte für die Eigenschaft margin, sodass Teile außerhalb ihres umgebenden Blocks liegen.

Die Eigenschaft overflow gibt an, wie überlaufender Inhalt von Nachkommenelementen dargestellt wird, also Inhalt, der aus der aktuellen Box hinauslaufen würde. overflow kann nur auf Blockelemente und ersetzte Elemente angewendet werden.

Werte	`visible`, `hidden`, `scroll`, `auto`, inherit
Initialwert	`visible`
Vererbung	nein
Anwendung	Blockelemente

Der Standardwert ist visible; überlaufender Inhalt wird vollständig dargestellt.

Beim Wert hidden wird der überlaufende Inhalt nicht dargestellt; das Nachkommenelement wird einfach abgeschnitten, sobald es die Content-Grenze erreicht.

Der Wert scroll sorgt dafür, dass der überlaufende Inhalt abgeschnitten wird, jedoch über Rollbalken erreichbar ist, die zwischen Padding- und Border-Bereich eingefügt und bei der Berechnung der Dimensionen der Box mit berücksichtigt werden. Rollbalken werden auch dann dargestellt, wenn sie nicht notwendig sind, es also kein Nachkommenelement gibt, das über die Content-Grenze hinausragen würde.

Der Wert auto schließlich überlässt es dem Browser zu entscheiden, wie überlaufender Inhalt dargestellt wird. In den meisten Fällen werden Rollbalken angeboten, sobald sie benötigt werden.

Abb. 7.30: Die Eigenschaft overflow

In Kapitel 7.6.2 habe ich erklärt, dass floatierte Boxen aus dem normalen Elementfluss herausgenommen werden. Wenn der umgebende Block eine geringere Höhe hat als die darin floatierte Box, ragt diese unten aus dem Block heraus. Um dies zu vermeiden, können Sie die Eigenschaft overflow einsetzen. Dieser Workaround funktioniert in allen Browsern, auch im Internet Explorer, wenn der umgebende Block »Layout« hat (siehe Kapitel 6.8.3). Die Kombination overflow: hidden; zusammen mit height: 1%; hat sich in diesem Zusammenhang bewährt.

Browserunterstützung

Die Eigenschaft overflow wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6: Überfließende Inhalte werden vollständig und richtig dargestellt, jedoch wird, abweichend von der Spezifikation, das umschließende Element dazu ausgedehnt. Das gilt auch für den Wert visible als Ausgangswert. Der Wert inherit wird nicht erkannt.
Internet Explorer 7: Der Wert inherit wird nicht erkannt.
Konqueror: Erkennt den Wert scroll nicht.

Zum Seitenanfang

Deckkraft: Die Eigenschaft opacity

Die Eigenschaft opacity gibt die Deckkraft eines Elements an.

Werte	<Zahl>, inherit
Initialwert	`1`
Vererbung	nein
Anwendung	alle Elemente

Die Deckkraft wird mit einem Wert von 0.0 bis 1.0 angegeben. Je höher der Wert, desto größer ist die Deckkraft, mit anderen Worten: Je geringer der Wert, desto höher ist die Transparenz des Elements, sodass überdeckte Elemente durchscheinen. Der Initialwert ist 1.0.

Die Eigenschaft opacity ist nicht Bestandteil von CSS bis Version 2.1, sondern Teil der noch nicht verabschiedeten W3C-Empfehlung CSS Color Module Level 3, die mit hoher Wahrscheinlichkeit Teil des CSS 3-Standards werden wird. opacity gehört zu den neuen CSS-Eigenschaften, die bereits von einigen Browsern unterstützt werden und daher schon verwendet werden können.

Auch für den Internet Explorer können Sie Transparenz mittels des proprietären Alpha-Filters erreichen. Dieser Filter ist allerdings in keiner CSS-Empfehlung enthalten; dessen Verwendung verstößt somit eindeutig gegen die Bedingungen der BITV und funktioniert auch nur im Internet Explorer. An dieser Stelle wird daher nur gezeigt, wie Sie den gleichen Effekt erzielen können wie mit opacity. Weitere Informationen zu Filtern erhalten Sie bei Microsoft oder SELFHTML.

Mit der Eigenschaft filter und dem Wert Alpha() können Sie die Transparenz von Elementen beeinflussen, indem Sie für den Parameter opacity einen Wert von 0 bis 100 angeben. Auch hierbei gilt: je geringer der Wert, desto höher die Transparenz.

Browserunterstützung

Die Eigenschaft opacity wird derzeit von aktuellen Gecko-Browsern und Opera 9 unterstützt. Ältere Gecko-Browser haben opacity in der Schreibweise -moz-opacity implementiert.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Die Eigenschaft 'opacity'</title>
    
    <style type="text/css">
      /* <![CDATA[ */
      div {
        color: black;
        padding: 50px 50px 150px 50px;
        width: 100px;
        text-align: center;
        position: absolute;
      }
      #box1 {
        border: 2px solid #466374;
        background-color: #D8E1E7;
      }
      #box2 {
        border: 2px solid #514B31;
        background-color: #746B46;
        top: 100px;
        left: 50px;opacity: .8;
        filter: Alpha(opacity = 80);
      }
      #box3 {
        border: 2px solid maroon;
        background-color: red;
        top: 200px;
        left: 100px;opacity: .5;
        filter: Alpha(opacity = 50);
      }
      /* ]]> */
    </style>
  </head>
  
  <body>
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
  </body>
</html>

Die Eigenschaft opacity

Abb. 7.31: Die Eigenschaft opacity

Zum Seitenanfang

Mauszeiger: Die Eigenschaft cursor

Die Eigenschaft cursor gibt den Typ des Mauszeigers an, der dargestellt wird, wenn ein Element mit der Maus berührt wird.

Werte	`auto`, `crosshair`, `default`, `pointer`, `move`, `e-resize`, `ne-resize`, `nw-resize`, `n-resize`, `se-resize`, `sw-resize`, `s-resize`, `w-resize`, `text`, `wait`, `progress`, `help`, <URI>, inherit
Initialwert	`auto`
Vererbung	ja
Anwendung	alle Elemente

auto: Welcher Mauszeiger angezeigt wird, ist abhängig vom Kontext.
crosshair: Ein einfaches Fadenkreuz.
default: Der Standardmauszeiger, häufig ein nach links geneigter Pfeil.
pointer: Ein Zeiger, häufig eine Hand mit ausgestrecktem Zeigefinger.
move: Kennzeichnet eine Bewegung.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: Zeiger, die beim Verschieben einer Fensterkante beziehungsweise beim Vergrößern oder Verkleinern eines Fensters angezeigt werden. n, e, s und w stehen für die vier Richtungen Nord (north), Ost (east), Süd (south) und West (west).
text: Gibt an, dass Text markiert werden kann.
wait: Zeigt einen Wartevorgang an, häufig in Form einer Sanduhr.
progress: Zeigt einen Wartevorgang an, bei dem der Benutzer noch mit dem Programm interagieren kann.
help: Zeigt ein Hilfesymbol an.
<URI>: Es kann eine Liste eigener Mauszeiger per URI eingebunden werden, wobei der Browser wie bei Schriftdeklarationen von links nach rechts vorgeht und den Zeiger dargestellt, den er verarbeiten kann. Am Ende der Liste sollte eines der oben genannten Schlüsselwörter stehen. Beispiel: E { cursor: url(foo.cur), url(bar.csr), auto; }

Browserunterstützung

Die Eigenschaft cursor wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Alle Browser: Nur aktuelle Browser unterstützen den Wert url().
Internet Explorer 7: Erst ab Version 7 interpretiert der IE die Eigenschaft, versteht jedoch den Wert inherit nicht.
Opera: Opera unterstützt ebenfalls nicht den Wert inherit bis Version 8.

http://jendryschik.de

UX, Usability und Webstandards

Sichtbarkeit: Die Eigenschaft visibility

Browserunterstützung

Überlauf: Die Eigenschaft overflow

Browserunterstützung

Deckkraft: Die Eigenschaft opacity

Browserunterstützung

Mauszeiger: Die Eigenschaft cursor

Browserunterstützung