В visibilityимота в CSS има две различни функции. Той скрива редове и колони на таблица и също така скрива елемент, без да променя оформлението.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityима четири валидни стойности: visible, hidden, collapse, и inherit. Ще преминем през всеки от тях, за да научим повече.
видими
Точно както звучи, visibleправи нещата видими. По подразбиране нищо не е скрито, така че тази стойност не прави нищо, освен ако не сте задали hiddenтози или родител на този елемент.
скрити
В hidden стойността крие неща. Това е различно от използването display: none, защото hidden само визуално скрива елементи. Елементът все още е там и все още заема място на страницата, но вече не можете да го видите (нещо като превръщане на непрозрачността в 0). Интересното е, че това свойство не наследява по подразбиране. Това означава, че за разлика от display или opacity свойствата, можете да направите елемент hiddenи все пак да имате едно от неговите деца като visible, като това:
Забележете, че докато е скрит, родителският елемент не задейства :hover.
колапс
Това само въздейства върху редове на таблица ( ), групи редове (като ), колони ( ), групи колони ( ) или елементи, направени да бъдат направени по този начин чрез display).
За разлика от hiddenтова, тази стойност скрива поделемента на таблицата, без да оставя мястото, където е била. Ако се използва навсякъде, но не в поделемент на таблица, той действа като visibility: hidden.
Има толкова много странности с това, че е трудно да се знае откъде да започнем. Точно като предястие:
- Chrome / Safari ще свие ред, но мястото, което заема, ще остане. И ако клетките на таблицата вътре са имали граница, това ще се свие в една граница по горния ръб.
- Chrome / Safari няма да свие колона или група колони.
- Safari свива клетка на таблица (грешно), но Chrome няма (правилно).
- Във всеки браузър, ако клетка е в колона, която е свита (независимо дали всъщност се свива), текстът в тази клетка няма да бъде показан.
- Opera (преди WebKit) ще свие глупостите от всичко, с изключение на клетка на таблица (което е правилно).
Има и повече, но основно: не използвайте това никога.
наследявам
Стойността по подразбиране. Това просто кара елемента да наследява стойността на своя родител.
Flexbox
visibility: collapse; се използва и във Flexbox и е по-добре дефиниран.
Поддръжка на браузър
Основите, без да се вземат предвид всички странности с колапс:
| Всякакви | Всякакви | Всякакви | 4+ | 4+ | Всякакви | Всякакви |
IE 7- не поддържа collapseили inherit.