Имеет ли opacity: 0 тот же эффект, что и visibility: hidden

119

Если да, то действительно ли это обесценивает visibilityсобственность?

(Я понимаю, что Internet Explorer еще не поддерживает это свойство CSS2.)
Сравнение механизмов компоновки

См. Также: В чем разница между visibility: hidden и display: none

html css

4

А как насчет taborder? Если visible = false, элемент управления не получает фокуса, но если непрозрачность равна 0, возможно, клавиша табуляции все еще повторяется между элементами управления?

— Стефан

Было бы интересно увидеть, как прозрачный элемент управления может получить фокус.

— Крис Ной,

3

Я пробовал это, (FF3). Элемент ввода с непрозрачностью: 0 получает фокус в соответствии с порядком табуляции, хотя визуальной индикации нет. Курсор просто исчезает. Все, что вы вводите, вводится в значение элемента ввода. При повторном нажатии табуляции происходит переход к следующему полю. Интересный.

— Крис Ной,

256

Вот подборка проверенной информации из различных ответов.

Каждое из этих свойств CSS уникально. Помимо того, что элемент не отображается, они имеют следующие дополнительные эффекты:

Сворачивает пространство, которое элемент обычно занимает
Реагирует на события (например, щелчок, нажатие клавиши)
Участвует в табуляторе

                     свернуть события taborder
непрозрачность: 0 Нет Да Да
видимость: скрыта Нет Нет Нет
видимость: свернуть Да * Нет Нет
дисплей: нет да нет нет

* Да внутри элемента таблицы, в противном случае - Нет.

— Крис Ноэ
источник

Я попытался ознакомиться с

— Крис Ной,

Итак, SO намеренно не поддерживает <table>. Итак, я сделал это ascii.

— Крис Ной,

3

Кроме того, с "opacity: 0" Flash-объекты визуализируются и конструктор спрайта запускается, но с "visibility: hidden" нет.

— pepkin88

Если ваше радио / флажки не работают visibility:hidden, вам нужно будет использовать opacity: 0вместо этого для обнаружения щелчка мыши.

— dayuloli

7

@ChrisNoe: спасибо за резюме. Одна вещь, которую вы, возможно, захотите добавить: я только что исследовал, как сделать родительский узел невидимым, но дочерние узлы все еще видимыми, результат: нет шансов для видимых дочерних узлов :opacity:0 или display:none, но если вы используете, visibility: hidden вы можете сделать детей видимыми с помощьюvisibility: visible

— Мартин

14

Нет.

Элементы с непрозрачностью создают новый контекст наложения.

Кроме того, спецификация CSS не определяет этого, но элементы с opacity:0кликабельными, а элементы с visibility:hiddenнет.

— Корнель
источник

12

Нет. Существует большая разница. Они похожи, потому что вы можете видеть сквозь элемент, если видимость скрыта или непрозрачность равна 0, однако

непрозрачность: 0 : вы не можете нажимать на элементы за ним.

видимость: скрытый : вы можете нажимать на элементы позади него.

— Nishant
источник

1

"Нет"? Означает ли это ответ на вопрос или ответ на один из существующих ответов? Если это позднее, то его следует добавить в качестве комментария под ответом, к которому он обращается.

— Крис Ной

9

Это ответ на вопрос: «Имеет ли opacity: 0 тот же эффект, что и visibility: hidden?»… Но разве это не очевидно?

— Nishant

5

Есть много различий между visibilityи opacity. В большинстве ответов упоминаются некоторые различия, но вот полный список.

непрозрачность не наследуется, а видимость -
прозрачность можно анимировать, а видимость - нет.
(Ну, технически это так, но просто не определено поведение, скажем, для «37% свернутых и 63% скрытых», поэтому вы можете считать это неанимируемым.)
Используя непрозрачность, вы не можете сделать дочерний элемент более непрозрачным, чем его родительский. Например, если у вас есть ap с цветом: черный и непрозрачностью: 0,5, вы не можете сделать ни один из его дочерних элементов полностью черным. Допустимые значения непрозрачности от 0 до 1, а в этом примере потребуется 2!
Следовательно, согласно комментарию Мартина , у вас может быть видимый дочерний элемент (с видимостью: видимый) в невидимом родителе (с видимостью: скрытый). Это невозможно с непрозрачностью; если у родителя непрозрачность: 0; его дети всегда невидимы.
В ответе Корнеля упоминается, что значения непрозрачности меньше 1 создают свой собственный контекст наложения; никакой ценности для видимости не имеет.
(Хотел бы я придумать способ продемонстрировать это, но я не могу придумать никаких средств, чтобы показать контекст наложения элемента visibility: hidden.)
Согласно ответу Филнаша , элементы с opacity: 0 по-прежнему читаются программами чтения с экрана, а элементы visible: hidden - нет.
Согласно ответу Криса Ноу , у видимости есть больше опций (например, сворачивание), а элементы, которые не видны, больше не реагируют на щелчки и не могут быть добавлены вкладками.

(Сделать это вики сообщества, поскольку в противном случае заимствование из существующих ответов было бы нечестным.)

— Г-н Листер
источник

4

Я не совсем уверен в этом, но я думаю, что программы чтения с экрана не читают вещи, для которых задана скрытая видимость, но они могут читать вещи независимо от их прозрачности.

Это единственная разница, о которой я могу думать.

— philnash
источник

Как тогда это повлияет на результат? Может быть, с точки зрения того, что входит в DOM? Мои тестовые примеры показывают, что Mozilla не отказывается от видимости: скрытых элементов.

— Крис Ной,

Элементы будут в DOM независимо от стиля CSS, я имею в виду, что слепые пользователи, использующие программу чтения с экрана, могут читать текст в элементе opacity: 0, тогда как они бы этого не сделали, если бы тот же элемент имел visibility: hidden. На самом деле это проблема доступности, потому что результат другой.

— philnash

Полезный момент, это один из результатов установки скрытой видимости, но это лишь верхушка айсберга. В частности, visibility: hidden заставляет его (по-видимому) исчезнуть из dom, сохраняя при этом свой макет на странице.

— Nishant

4

Я не совсем уверен, но вот как я делаю кроссбраузерную прозрачность:

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

объекты с Видимостью: скрытые по-прежнему имеют форму, они просто не видны. Элементы с нулевой непрозрачностью по-прежнему можно нажимать и реагировать на другие события.

— Эндрю Баллок
источник

Что значит иметь форму и быть невидимым?

— Крис Ной,

@chris, это означает, что они все еще занимают место на странице

— Митчел Селлерс

2

непрозрачность используется, чтобы решить, как элемент будет отображаться поверх фона. Если opactiy установлено в 0, элемент, естественно, занимает место, но ничего не отображается, потому что 0% цвета элемента смешивается со 100% фона, в результате чего ничего нового не появляется. скрытые и похожие друзья означают, что элемент пропускается при рисовании.

— М.П.

2

Создавая стиль пользователя, который влияет на элементы в a contenteditable, я заметил, что если вы что-то устанавливаете visibility: hidden, то курсор ввода на самом деле не хочет с ним взаимодействовать. Например, если у вас есть

<div contenteditable><span style='visibility: hidden;'></span></div>

... тогда кажется, что если вы сфокусируете этот div / span, вы не сможете его ввести. В то время opacity: 0как, кажется, можно. Я не тестировал это подробно, но решил, что стоит упомянуть об этом здесь, поскольку никто на этой странице не говорил о влиянии на ввод текста. Возможно, это связано с упомянутыми выше событиями .

— MalcolmOcean
источник

0

То, что говорит Фил, правда.

IE поддерживает непрозрачность:

filter:alpha(opacity=0);

— Диодей - Джеймс Макфарлейн
источник

0

Свойства имеют разное семантическое значение. Хотя семантический CSS может показаться глупым, как отмечали другие пользователи, он влияет на такие устройства, как программы чтения с экрана, где семантика влияет на доступность страницы.

— Зак Человек
источник