CSS/Tutorials/visibility
Mit der Eigenschaft visibility wird festgelegt, ob ein Element sichtbar oder unsichtbar dargestellt wird. Ein unsichtbares Element hat dabei dieselben Auswirkungen auf nachfolgende Elemente wie ein sichtbares Element.
Inhaltsverzeichnis
Die visibility
-Eigenschaft
Die Eigenschaft visibility
kann folgende Werte besitzen:
-
visible
: Standardwert; Das Element wird sichtbar dargestellt. -
hidden
: Das Element wird unsichtbar dargestellt. -
collapse
: Eine Tabellenzeile oder -spalte wird ausgeblendet; wirkt bei anderen Elementen wiehidden
-
inherit
: Der Wert dervisibility
-Eigenschaft des Elternelements wird geerbt.
Der Wert der visibility
-Eigenschaft wird automatisch vererbt. Da der Standardwert visible
ist, sind zunächst alle Elemente sichtbar.
Erhält die visibility
-Eigenschaft eines Elements den Wert hidden
, so wird das Element unsichtbar. Genauer: Die von einem Element erzeugten Boxen werden unsichtbar.
#lückentext em { visibility: hidden; }
<h2>Rätsel</h2>
<p id="lückentext">Das Beispiel <em>Lückentext</em> zeigt die Wirkung der
<code>visibility</code>-<em>Eigenschaft</em> anhand von Inline-Elementen.
Die Eigenschaft wirkt aber auch bei <em>Blockelementen</em>.</p>
<h2>Lösung</h2>
<p>Das Beispiel <em>Lückentext</em> zeigt die Wirkung der
<code>visibility</code>-<em>Eigenschaft</em> anhand von Inline-Elementen.
Die Eigenschaft wirkt aber auch bei <em>Blockelementen</em>.</p>
Die Werte hidden
und collapse
besitzen identische Auswirkungen. Traditionell wird jedoch nur der Wert hidden
verwendet, um Elemente unsichtbar darzustellen, da der Wert collapse
bei Tabellenzeilen und -spalten eine andere Wirkung besitzt als der Wert hidden
.
Tabellenzeilen und -spalten ausblenden
Der Wert collapse
wird verwendet, um Zeilen, Zeilengruppen, Spalten oder Spaltengruppen einer Tabelle auszublenden.
In diesem Fall werden die betroffenen Zeilen oder Spalten nicht einfach unsichtbar gemacht, sondern vollständig ausgeblendet. Das bedeutet, dass der zuvor beanspruchte Platz frei wird, die Tabelle sich aber nicht an die neuen Platzverhältnisse anpasst.
Dieser Vorgang hat noch weitere Auswirkungen: Verläuft z. B. eine Zelle von einer sichtbaren in eine ausgeblendete Spalte, so bleibt der Inhalt der Zelle zwar sichtbar, wird aber an den Grenzen der Spalte abgeschnitten.
td { border: 1px inset gray; }
#information { visibility: hidden; }
#summe { visibility: collapse; }
<h2>Tabelle mit unsichtbarer Zeile</h2>
<table>
<tbody>
<tr><td>Spalte 1</td><td rowspan="2">Spalte 2</td><td>Spalte 3</td></tr>
<tr id="information"><td>Spalte 1</td><td>Spalte 2</td><td rowspan="2">Spalte 3</td></tr>
<tr><td>Spalte 1</td><td>Spalte 2</td></tr>
</tbody>
</table>
<h2>Tabelle mit ausgeblendeter Zeile</h2>
<table>
<tbody>
<tr><td>Spalte 1</td><td rowspan="2">Spalte 2</td><td>Spalte 3</td></tr>
<tr id="summe"><td>Spalte 1</td><td>Spalte 2</td><td rowspan="2">Spalte 3</td></tr>
<tr><td>Spalte 1</td><td>Spalte 2</td></tr>
</tbody>
</table>
visibility
-Eigenschaft auf eine Tabellenzeile: Der von den Zellen benötigte Platz bleibt bei unsichtbaren Zeilen erhalten. Zellen, die in eine unsichtbare Zeile hineinragen, bleiben vollständig sichtbar.Eine ausgeblendete Zeile dagegen wird „wie sie ist“ aus der Tabelle herausgelöst. Zellen, die in eine ausgeblendete Zeile hineinragen, werden teilweise ausgeblendet, ihr Inhalt bleibt aber identisch vorhanden (vergleichen Sie die Position des Inhalts bei beiden Tabellen). Die Höhe der Zellen wird nicht neu berechnet. Gegebenenfalls kann auf diese Zellen die
overflow
-Eigenschaft angewendet werden, um sich überlappende Inhalte zu vermeiden.collapse
, verarbeiten ihn aber auch bei Tabellenzeilen- und Spalten wie hidden
(Stand November 2016).border-collapse: collapse;
) werden im Mozilla Firefox zwar korrekt ausgeblendet, die von der Tabelle gezeichneten Rahmen bleiben jedoch unverändert bestehen. (Stand November 2016).Wiederherstellen der Sichtbarkeit
Nachfahren eines unsichtbaren Elements erben automatisch die Unsichtbarkeit von ihrem Elternelement. Die Sichtbarkeit der Nachfahrenelemente kann aber mit Hilfe der visibility
-Eigenschaft wiederhergestellt werden.
.verpackung { padding: 1em; background-color: brown; }
.schutzschicht { padding: 1em; background-color: lightblue; }
.inhalt { padding: 1em; background-color: orange; }
.hidden { visibility: hidden; }
.hidden .inhalt { visibility: visible; }
<h2>Beispiel ohne unsichtbare Elemente</h2>
<div class="verpackung">
<div class="schutzschicht">
<div class="inhalt"></div>
</div>
</div>
<h2>Beispiel mit unsichtbarem Element</h2>
<div class="verpackung">
<div class="schutzschicht hidden">
<div class="inhalt"></div>
</div>
</div>>
Abgrenzung zur display
-Eigenschaft
Die Eigenschaft display wird verwendet um festzulegen, welche Art von Box(en) ein Element erzeugt (z. B. eine Block- oder Inline-Box). Die visibility
-Eigenschaft legt dagegen fest, ob die erzeugte Box sichtbar oder unsichtbar dargestellt wird.
Ein Element behält seine Auswirkung auf den Elementfluss bei, wenn es mit visibility: hidden
unsichtbar gemacht wurde. Zudem besteht die Möglichkeit, Nachfahren eines unsichtbaren Elements mit visibility: visible
sichtbar zu machen. Beides ist bei Elementen mit display: none
nicht der Fall.
visibility: hidden;
) oder nicht dargestellt. (display: none;
)Abgrenzung zur opacity
-Eigenschaft
Die opacity-Eigenschaft legt die Durchsichtigkeit eines Elements fest. Der Grad der Durchsichtigkeit kann dabei einen Wert zwischen 0% und 100% annehmen.
Theoretisch entspricht visibility: hidden
einer Durchsichtigkeit von 100% und visibility: visible;
einer Durchsichtigkeit von 0%. Tatsächlich können beide Eigenschaften aber beliebig kombiniert werden. Ein (teilweise) durchsichtiges Element kann visible
sein und ein undurchsichtiges Element kann hidden
sein.
Im Gegensatz zur visibility
-Eigenschaft, kann die mit Hilfe der opacity
-Eigenschaft festgelegte Durchsichtigkeit bei Nachfahrenelementen nicht wiederhergestellt werden.
Elemente, die die opacity
-Eigenschaft besitzen, erzeugen einen neuen „stacking context“, welcher Einfluss auf die Überlappung verschiedener Elemente besitzt. Bei Elementen mit der visibility
-Eigenschaft ist dies nicht der Fall.
visibility
-Eigenschaft unsichtbar gemacht werden. Trotz der Unsichtbarkeit bleibt der von den versteckten Elementen benötigte Platz erhalten.