Er is niet slechts één CSS-eigenschap waarnaar u reikt wanneer u dingen in CSS verbergt en weergeeft. Er zijn een aantal overwegingen die we in deze video zullen bespreken.
Er is bijvoorbeeld het displaypand waarin het display: none;heel effectief is om dingen te verbergen. Maar het zal dat element ook verbergen voor ondersteunende technologie, en dat wil je niet altijd, zoals een vervolgkeuzemenu (de vervolgkeuzemenu's zijn visueel verborgen maar mogen niet worden verborgen voor ondersteunende technologie).
En displayis ook niet overdraagbaar, dus als je dat element wilt in- / uitfaden transition, is dat uit. Tenzij u JavaScript gebruikt om die eigenschap pas toe te passen nadat de overgang heeft plaatsgevonden.
Wat is overdraagbaar? opacityis, en blijkt visibilityook. Deze combinatie is best handig samen, want als een element eenmaal heeft visibility: hidden;, interfereert het niet met gebeurtenissen zoals klikken / tikken. Deze combo haalt het element echter niet uit de paginastroom, wat nuttig of niet nuttig kan zijn. De positioneigenschap kan in die omstandigheden nuttig zijn.
Zien! Zoveel om over na te denken!