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.