Имеет ли opacity: 0 тот же эффект, что и видимость: скрыто

Question

Если это так, эффективно ли он устаревает для свойства visibility?

(я понимаю, что Internet Explorer пока не поддерживает это свойство CSS2.)
Сравнение компоновки двигателей

См. Также: В чем разница между видимостью: скрытый и отображаемый: нет

Answer 1

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

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

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

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse    *      No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Answer 2

номер

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

1. непрозрачность не наследуется, а видимость -

2. Непрозрачность является анимацией, а видимость - нет.
   (Ну, технически так и есть, но просто не определено поведение, скажем, для "37% разрушено и 63% скрыто", так что вы можете считать это неанимируемым.)

3. Используя прозрачность, вы не можете сделать дочерний элемент более непрозрачным, чем его родительский элемент. НАПРИМЕР. если у вас есть p с цветом: черный и непрозрачность: 0,5, вы не можете сделать ни одного из его дочерних элементов полностью черным. Допустимые значения непрозрачности - от 0 до 1, и для этого примера потребуется 2!
   Следовательно, согласно комментарию Мартина , у вас может быть видимый дочерний элемент (с видимостью: видимый) в невидимом родителе (с видимостью: скрытый). Это невозможно с непрозрачностью; если родитель имеет непрозрачность: 0; его дети всегда невидимы.

4. В ответе Корнеля упоминается, что значения непрозрачности меньше 1 создают собственный контекст стека; значение для видимости не имеет значения.
   (Хотелось бы придумать способ продемонстрировать это, но я не могу придумать ни одного способа показать контекст стекирования видимости: скрытый элемент.)

5. Согласно ответу philnash , элементы с непрозрачностью: 0 по-прежнему считываются программами чтения с экрана, а видимые: скрытые элементы - нет.

6. Согласно ответу Криса Ноа , видимость имеет больше опций (например, свертывание), а элементы, которые не видны, больше не реагируют на щелчки и не могут быть добавлены.

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

Answer 8

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

Answer 9

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

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

filter:alpha(opacity=0);