Если да, то действительно ли это обесценивает visibility
собственность?
(Я понимаю, что Internet Explorer еще не поддерживает это свойство CSS2.)
Сравнение механизмов компоновки
См. Также: В чем разница между visibility: hidden и display: none
Если да, то действительно ли это обесценивает visibility
собственность?
(Я понимаю, что Internet Explorer еще не поддерживает это свойство CSS2.)
Сравнение механизмов компоновки
См. Также: В чем разница между visibility: hidden и display: none
Ответы:
Вот подборка проверенной информации из различных ответов.
Каждое из этих свойств CSS уникально. Помимо того, что элемент не отображается, они имеют следующие дополнительные эффекты:
свернуть события taborder непрозрачность: 0 Нет Да Да видимость: скрыта Нет Нет Нет видимость: свернуть Да * Нет Нет дисплей: нет да нет нет * Да внутри элемента таблицы, в противном случае - Нет.
visibility:hidden
, вам нужно будет использовать opacity: 0
вместо этого для обнаружения щелчка мыши.
opacity:0
или display:none
, но если вы используете, visibility: hidden
вы можете сделать детей видимыми с помощьюvisibility: visible
Нет. Существует большая разница. Они похожи, потому что вы можете видеть сквозь элемент, если видимость скрыта или непрозрачность равна 0, однако
непрозрачность: 0 : вы не можете нажимать на элементы за ним.
видимость: скрытый : вы можете нажимать на элементы позади него.
Есть много различий между visibility
и opacity
. В большинстве ответов упоминаются некоторые различия, но вот полный список.
непрозрачность не наследуется, а видимость -
прозрачность можно анимировать, а видимость - нет.
(Ну, технически это так, но просто не определено поведение, скажем, для «37% свернутых и 63% скрытых», поэтому вы можете считать это неанимируемым.)
Используя непрозрачность, вы не можете сделать дочерний элемент более непрозрачным, чем его родительский. Например, если у вас есть ap с цветом: черный и непрозрачностью: 0,5, вы не можете сделать ни один из его дочерних элементов полностью черным. Допустимые значения непрозрачности от 0 до 1, а в этом примере потребуется 2!
Следовательно, согласно комментарию Мартина , у вас может быть видимый дочерний элемент (с видимостью: видимый) в невидимом родителе (с видимостью: скрытый). Это невозможно с непрозрачностью; если у родителя непрозрачность: 0; его дети всегда невидимы.
В ответе Корнеля упоминается, что значения непрозрачности меньше 1 создают свой собственный контекст наложения; никакой ценности для видимости не имеет.
(Хотел бы я придумать способ продемонстрировать это, но я не могу придумать никаких средств, чтобы показать контекст наложения элемента visibility: hidden.)
Согласно ответу Филнаша , элементы с opacity: 0 по-прежнему читаются программами чтения с экрана, а элементы visible: hidden - нет.
Согласно ответу Криса Ноу , у видимости есть больше опций (например, сворачивание), а элементы, которые не видны, больше не реагируют на щелчки и не могут быть добавлены вкладками.
(Сделать это вики сообщества, поскольку в противном случае заимствование из существующих ответов было бы нечестным.)
Я не совсем уверен в этом, но я думаю, что программы чтения с экрана не читают вещи, для которых задана скрытая видимость, но они могут читать вещи независимо от их прозрачности.
Это единственная разница, о которой я могу думать.
Я не совсем уверен, но вот как я делаю кроссбраузерную прозрачность:
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
объекты с Видимостью: скрытые по-прежнему имеют форму, они просто не видны. Элементы с нулевой непрозрачностью по-прежнему можно нажимать и реагировать на другие события.
Создавая стиль пользователя, который влияет на элементы в a contenteditable
, я заметил, что если вы что-то устанавливаете visibility: hidden
, то курсор ввода на самом деле не хочет с ним взаимодействовать. Например, если у вас есть
<div contenteditable><span style='visibility: hidden;'></span></div>
... тогда кажется, что если вы сфокусируете этот div / span, вы не сможете его ввести. В то время opacity: 0
как, кажется, можно. Я не тестировал это подробно, но решил, что стоит упомянуть об этом здесь, поскольку никто на этой странице не говорил о влиянии на ввод текста. Возможно, это связано с упомянутыми выше событиями .
То, что говорит Фил, правда.
IE поддерживает непрозрачность:
filter:alpha(opacity=0);
Свойства имеют разное семантическое значение. Хотя семантический CSS может показаться глупым, как отмечали другие пользователи, он влияет на такие устройства, как программы чтения с экрана, где семантика влияет на доступность страницы.