Die visibilityEigenschaft in CSS hat zwei verschiedene Funktionen. Es verbirgt Zeilen und Spalten einer Tabelle und ein Element, ohne das Layout zu ändern.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityhat vier gültige Werte: visible, hidden, collapse, und inherit. Wir werden jeden von ihnen durchgehen, um mehr zu erfahren.
sichtbar
So wie es sich anhört, visiblemacht es Dinge sichtbar. Standardmäßig ist nichts ausgeblendet, daher bewirkt dieser Wert nichts, es sei denn, Sie haben hiddendieses oder ein übergeordnetes Element dieses Elements festgelegt.
versteckt
Der hidden Wert verbirgt Dinge. Dies unterscheidet sich von der Verwendung display: none, da hidden nur Elemente visuell ausgeblendet werden. Das Element ist immer noch vorhanden und nimmt immer noch Platz auf der Seite ein, aber Sie können es nicht mehr sehen (ähnlich wie beim Drehen der Deckkraft auf 0). Interessanterweise erbt diese Eigenschaft nicht standardmäßig. Das bedeutet, dass Sie im Gegensatz zu den display oder opacity -Eigenschaften ein Element erstellen hiddenund dennoch eines seiner untergeordneten Elemente visiblewie folgt haben können:
Beachten Sie, dass das übergeordnete Element, obwohl es ausgeblendet ist, das nicht auslöst :hover.
Zusammenbruch
Dieser wirkt sich nur auf Tabellenzeilen ( ), Zeilengruppen (wie ), Spalten ( ), Spaltengruppen ( ) oder Elemente aus, die so erstellt wurden display).
Im Gegensatz hiddendazu verbirgt dieser Wert das Tabellenunterelement, ohne den Platz dort zu belassen, wo er war. Wenn es irgendwo anders als in einem Tabellenunterelement verwendet wird, verhält es sich wie folgt visibility: hidden.
Es gibt so viele Macken, dass man kaum weiß, wo man anfangen soll. Nur als Vorspeise:
- Chrome / Safari reduziert eine Zeile, aber der belegte Platz bleibt erhalten. Und wenn die Tabellenzellen im Inneren einen Rand hatten, wird dieser am oberen Rand zu einem einzigen Rand zusammenfallen.
- Chrome / Safari reduziert keine Spalte oder Spaltengruppe.
- Safari reduziert eine Tabellenzelle (falsch), Chrome jedoch nicht (richtig).
- Wenn sich eine Zelle in einem Browser in einer Spalte befindet, die reduziert ist (unabhängig davon, ob sie tatsächlich reduziert ist oder nicht), wird der Text in dieser Zelle nicht angezeigt.
- Opera (vor WebKit) wird den Mist aus allem zusammenbrechen, außer einer Tabellenzelle (die korrekt ist).
Es gibt noch mehr, aber im Grunde: Verwenden Sie dies niemals.
erben
Der Standardwert. Dies bewirkt einfach, dass das Element den Wert seines übergeordneten Elements erbt.
Flexbox
visibility: collapse; wird auch in Flexbox verwendet und ist genauer definiert.
Browser-Unterstützung
Die Grundlagen, ohne alle Macken beim Zusammenbruch zu berücksichtigen:
| Irgendein | Irgendein | Irgendein | 4+ | 4+ | Irgendein | Irgendein |
IE 7- unterstützt collapseoder nicht inherit.