Heeft dekking:0 precies hetzelfde effect als zichtbaarheid:verborgen

Zo ja, wordt de eigenschap visibilityeffectief afgekeurd?

(Ik realiseer me dat Internet Explorer deze CSS2-eigenschap nog niet ondersteunt.)

Vergelijkingen van layout-engines

Zie ook: Wat is het verschil tussen zichtbaarheid:hidden en weergave :geen

Antwoord 1, autoriteit 100%

Hier is een compilatie van geverifieerde informatie van de verschillende antwoorden.

Elk van deze CSS-eigenschappen is uniek. Naast het niet zichtbaar maken van een element, hebben ze de volgende extra effect(en):

1. Samengevouwende ruimte die het element normaal gesproken zou innemen
2. Reageert op gebeurtenissen(bijv. klik, toetsaanslag)
3. Neemt deel aan de taborder

tabvolgorde gebeurtenissen samenvouwen
dekking: 0 Nee Ja Ja
zichtbaarheid: verborgen Nee Nee Nee
zichtbaarheid: inklappen Ja* Nee Nee
weergave: geen Ja Nee Nee
* Ja binnen een tafelelement, anders Nee.

Antwoord 2, autoriteit 5%

Nee.

Elementen met dekking creëren een nieuwe stapelcontext.

Ook de CSS-specificatie definieert dit niet, maar elementen met opacity:0zijn klikbaar en elementen met visibility:hiddenniet.

Antwoord 3, autoriteit 4%

Nee, dat doet het niet. Er is een groot verschil.
Ze lijken op elkaar omdat je door het element heen kunt kijken als de zichtbaarheid verborgen is of als de dekking 0 is

dekking: 0: u kunt niet klikkenop elementen erachter.

zichtbaarheid: verborgen: u kunt klikkenop elementen erachter.

Antwoord 4, autoriteit 2%

Er zijn veel verschillen tussen visibilityen opacity. De meeste antwoorden vermelden enkele verschillen, maar hier is een volledige lijst.

1. ondoorzichtigheid wordt niet geërfd, terwijl zichtbaarheid dat wel doet

2. Dekking kan worden geanimeerd, terwijl zichtbaarheid dat niet is.
   (Nou, technischis het dat wel, maar er is gewoon geen gedrag gedefinieerd voor, laten we zeggen, “37% samengevouwen en 63% verborgen”, dus je kunt dit als niet-animeerbaar beschouwen.)

3. Als u dekking gebruikt, kunt u een onderliggend element niet ondoorzichtiger maken dan het bovenliggende element. E.G. als je een p hebt met kleur: zwart en dekking: 0,5, kun je geen van zijn kinderen volledig zwart maken. Geldige waarden voor dekking liggen tussen 0 en 1, en voor dit voorbeeld zijn er 2 nodig!
   Volgens Martin’s opmerkingkan een zichtbaar kind hebben (met zichtbaarheid:zichtbaar) in een onzichtbare ouder (met zichtbaarheid:verborgen). Dit is onmogelijk met dekking; als een ouder dekking heeft: 0; zijn kinderen zijn altijd onzichtbaar.

4. Kornels antwoordvermeldt dat dekkingswaarden kleiner dan 1 hun eigen stapelcontext creëren; geen waarde voor zichtbaarheid.
   (Ik wou dat ik een manier kon bedenken om dit aan te tonen, maar ik kan geen manier bedenken om de stapelcontext van een zichtbaarheid:verborgen element te laten zien.)

5. Volgens het antwoord van philnashworden elementen met dekking:0 nog steeds gelezen door schermlezers, terwijl ze zichtbaar zijn: verborgen elementen zijn dat niet.

6. Volgens Het antwoord van Chris Noeheeft zichtbaarheid meer opties (zoals samenvouwen) en elementen die dat niet zijn zichtbaar reageert niet meer op klikken en kan niet met tabbladen worden weergegeven.

(Van dit een community-wiki maken, aangezien lenen van de bestaande antwoorden anders niet eerlijk zou zijn.)

Antwoord 5, autoriteit 2%

Ik ben hier niet helemaal zeker van, maar ik denk dat schermlezers geen dingen lezen die zijn ingesteld op zichtbaarheid verborgen, maar ze kunnen dingen lezen, ongeacht hun dekking.

Dat is het enige verschil dat ik kan bedenken.

Antwoord 6

Ik weet het niet helemaal zeker, maar dit is hoe ik cross-browser transparantie doe:

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

objecten met Visibility:hidden hebben nog steeds vorm, ze zijn alleen niet zichtbaar. opaciteit nul elementen kunnen nog steeds worden aangeklikt en reageren op andere gebeurtenissen.

Antwoord 7

Terwijl ik een gebruikersstijl maakte die van invloed is op elementen in een contenteditable, merkte ik dat als je iets instelt op visibility: hidden, het invoerteken niet echt wil ermee omgaan. Bijvoorbeeld als je

. hebt

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

…dan lijkt het erop dat als je die div/span focust, je er niet echt in kunt typen. Terwijl het met opacity: 0lijkt te kunnen. Ik heb dit niet uitgebreid getest, maar vond het de moeite waard om dit hier te vermelden, aangezien niemand anders op deze pagina heeft gesproken over de effecten op tekstinvoer. Dit lijkt echter mogelijk verband te houden met de hierboven genoemde evenementendingen.

Antwoord 8

Wat Phil zegt is waar.

IE ondersteunt echter dekking:

filter:alpha(opacity=0);

Antwoord 9

De eigenschappen hebben verschillende semantischebetekenissen. Hoewel semantische CSS misschien gek klinkt, heeft het, zoals andere gebruikers al zeiden, een impact op apparaten zoals schermlezers — waar semantiek de toegankelijkheid van een pagina beïnvloedt.