Чи має непрозорість: 0 такий же ефект, як видимість: приховано

Якщо так, чи ефективно це застаріле visibilityмайно?

(Я розумію, що Internet Explorer ще не підтримує цю властивість CSS2.)
Порівняння механізмів компонування

Дивіться також: Яка різниця між видимістю: прихований та показ: ні

Ось збірка перевіреної інформації з різних відповідей.

Кожен із цих властивостей CSS унікальний. Крім того, що елемент відображається не видимим, вони мають такі додаткові ефекти:

1. Згортає простір, який зазвичай займає елемент
2. Відповідає на події (наприклад, клацання, натискання клавіші)
3. Бере участь у вкладці

                     колапс подій табору
непрозорість: 0 Ні Так Так
видимість: приховано Ні Ні Ні Ні
видимість: згортання Так * Ні Ні
дисплей: немає Так Ні Ні

* Так всередині елемента таблиці, інакше Ні.

Немає.

Елементи з непрозорістю створюють новий контекст укладання.

Крім того, специфікація CSS цього не визначає, але елементи, з opacity:0якими можна натискати, а елементи з visibility:hidden- ні.

Ні, це не є. Є велика різниця. Вони схожі, оскільки ви можете бачити через елемент, якщо видимість прихована або непрозорість дорівнює 0, однак

непрозорість: 0 : ви не можете натискати на елементи, що знаходяться за ним.

видимість: приховано : ви можете натиснути на елементи за ним.

Існує багато відмінностей між visibilityта opacity. Більшість відповідей згадують деякі відмінності, але ось повний перелік.

1. непрозорість не успадковується, а видимість - це

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

3. Використовуючи непрозорість, ви не можете зробити дочірній елемент більш непрозорим, ніж його батьківський. EG, якщо у вас є ap з кольором: чорний і непрозорість: 0,5, ви не можете зробити жодного з його дітей повністю чорним. Дійсні значення непрозорості становлять від 0 до 1, і для цього прикладу потрібно 2!
   Отже, згідно з коментарем Мартіна , ви можете мати видиму дитину (з видимістю: видиме) у невидимого батька (з видимістю: приховано). Це неможливо з непрозорістю; якщо у батьків є непрозорість: 0; її діти завжди невидимі.

4. Відповідь Корнеля зазначає, що значення непрозорості менше 1 створюють власний контекст укладання; ніякого значення для видимості не має.
   (Я б хотів, щоб я міг придумати спосіб продемонструвати це, але я не можу придумати жодних засобів, щоб показати контекст складання видимості: прихований елемент.)

5. Згідно з відповіддю Філнаша , елементи з непрозорістю: 0 все ще читаються екранами, а видимі: приховані елементи - ні.

6. Відповідно до відповіді Кріса Ноя , у видимості є більше варіантів (наприклад, згортання), а елементи, які не видно, більше не реагують на кліки і не можуть бути вкладені.

(Зробити це вікі спільноти, оскільки запозичення з існуючих відповідей не було б справедливим інакше.)

Я не зовсім впевнений у цьому, але думаю, що читачі екранів не читають речі, які налаштовані на видимість, приховану, але вони можуть читати речі незалежно від їх непрозорості.

Це єдина різниця, яку я можу придумати.

Я не впевнений повністю, але ось як я роблю перехресну прозорість браузера:

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 звучить так, що це може бути нерозумно, але інші користувачі згадували, це впливає на пристрої, такі як зчитувачі екрану - де семантика впливає на доступність сторінки.