L'opacité: 0 a-t-elle exactement le même effet que la visibilité: masqué

Si tel est le cas, rend-il effectivement obsolète la visibilitypropriété?

(Je me rends compte qu'Internet Explorer ne prend pas encore en charge cette propriété CSS2.)
Comparaisons des moteurs de mise en page

Voir aussi: Quelle est la différence entre la visibilité: masquée et l'affichage: aucune

Voici une compilation d'informations vérifiées à partir des différentes réponses.

Chacune de ces propriétés CSS est unique. En plus de rendre un élément non visible, ils ont les effets supplémentaires suivants:

1. Réduit l'espace que l'élément occuperait normalement
2. Répond aux événements (par exemple, cliquez, appuyez sur une touche)
3. Participe à la taborder

                     réduire l'ordre des événements
opacité: 0 Non Oui Oui
visibilité: masqué Non Non Non
visibilité: réduire Oui * Non Non
affichage: aucun Oui Non Non

* Oui à l'intérieur d'un élément de table, sinon Non.

Non.

Les éléments avec opacité créent un nouveau contexte d'empilement.

De plus, les spécifications CSS ne le définissent pas, mais les éléments avec opacity:0sont cliquables et les éléments avec visibility:hiddenne le sont pas.

Non. Il y a une grosse différence. Ils sont similaires car vous pouvez voir à travers l'élément si la visibilité est masquée ou l'opacité est de 0, cependant

opacité: 0 : vous ne pouvez pas cliquer sur les éléments derrière.

visibilité: cachée : vous pouvez cliquer sur les éléments derrière.

Il existe de nombreuses différences entre visibilityet opacity. La plupart des réponses mentionnent quelques différences, mais voici une liste complète.

1. l'opacité n'hérite pas, contrairement à la visibilité

2. l'opacité est animable tandis que la visibilité ne l'est pas.
   (Eh bien, techniquement, c'est le cas, mais il n'y a tout simplement pas de comportement défini pour, par exemple, "37% réduit et 63% masqué", vous pouvez donc considérer cela comme non animable.)

3. En utilisant l'opacité, vous ne pouvez pas rendre un élément enfant plus opaque que son parent. EG si vous avez un ap avec couleur: noir et opacité: 0,5, vous ne pouvez rendre aucun de ses enfants entièrement noir. Les valeurs valides pour l'opacité sont comprises entre 0 et 1, et cet exemple nécessiterait 2!
   Par conséquent, selon le commentaire de Martin , vous pouvez avoir un enfant visible (avec visibilité: visible) dans un parent invisible (avec visibilité: caché). Ceci est impossible avec l'opacité; si un parent a l'opacité: 0; ses enfants sont toujours invisibles.

4. La réponse de Kornel mentionne que les valeurs d'opacité inférieures à 1 créent leur propre contexte d'empilement; aucune valeur pour la visibilité ne le fait.
   (J'aurais aimé pouvoir penser à un moyen de le démontrer, mais je ne vois aucun moyen de montrer le contexte d'empilement d'une visibilité: l'élément caché.)

5. Selon la réponse de philnash , les éléments avec l'opacité: 0 sont toujours lus par les lecteurs d'écran, alors qu'ils sont visibles: les éléments cachés ne le sont pas.

6. Selon la réponse de Chris Noe , la visibilité a plus d'options (comme la réduction) et les éléments qui ne sont pas visibles ne répondent plus aux clics et ne peuvent pas être tabulés.

(Faire de ce wiki un wiki communautaire, car emprunter des réponses existantes ne serait pas juste autrement.)

Je ne suis pas tout à fait sûr de cela, mais je pense que les lecteurs d'écran ne lisent pas les éléments dont la visibilité est masquée, mais ils peuvent lire des éléments quelle que soit leur opacité.

C'est la seule différence à laquelle je peux penser.

Je ne suis pas entièrement sûr, mais voici comment je fais la transparence du navigateur:

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

les objets avec visibilité: cachés ont toujours une forme, ils ne sont juste pas visibles. Les éléments d'opacité zéro peuvent toujours être cliqués et réagir à d'autres événements.

En créant un style d'utilisateur qui affecte les éléments dans a contenteditable, j'ai remarqué que si vous définissez quelque chose sur visibility: hidden, le curseur d'entrée ne veut pas vraiment interagir avec lui. Par exemple, si vous avez

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

... alors il semble que si vous vous concentrez sur ce div / span, vous ne pouvez pas réellement le taper. Alors qu'avec opacity: 0cela semble vous pouvez. Je n'ai pas testé cela de manière approfondie, mais j'ai pensé qu'il valait la peine de le mentionner ici, car personne d'autre sur cette page n'a parlé des effets sur la saisie de texte. Cela semble peut-être lié aux événements mentionnés ci-dessus.

Ce que dit Phil est vrai.

IE prend en charge l'opacité cependant:

filter:alpha(opacity=0);

Les propriétés ont des significations sémantiques différentes . Bien que le CSS sémantique semble ridicule, comme d'autres utilisateurs l'ont mentionné, il a un impact sur des appareils tels que les lecteurs d'écran - où la sémantique a un impact sur l'accessibilité d'une page.