CSS Hide Elements
In this page:
selector {
display: none; /* removed from layout */
visibility: hidden; /* space is kept */
}display: none Flow से हटा देता है
display: none set करना किसी element को page से पूरी तरह हटा देता है। browser इसे render नहीं करता, इसके लिए कोई जगह reserve नहीं करता, और screen readers इसे पूरी तरह skip कर देते हैं। hidden element के आस-पास की हर चीज़ gap भरने के लिए reflow हो जाती है, बिल्कुल वैसे जैसे उस element को HTML से delete कर दिया गया हो।
- Accepted values:
- display: none — element को layout से हटा देता है
- visibility: hidden — इसे hide करता है लेकिन जगह रखता है
- opacity: 0 — invisible लेकिन फिर भी clickable
- hidden attribute — किसी element को छुपाने का HTML तरीका
- position: absolute के साथ left: -9999px — off-screen लेकिन screen readers के लिए पढ़ने लायक
उदाहरण: display: none Removes From Flow
<style>
.hidden {
display: none;
}
</style>
<p>Before</p>
<p class="hidden">Completely removed, no space reserved</p>
<p>After (moves up to fill the gap)</p>visibility: hidden जगह रखता है
visibility: hidden किसी element को invisible बना देता है लेकिन उसका box बिल्कुल वहीं छोड़ देता है जहाँ वह था, इसलिए आस-पास का content reflow नहीं होता। यह display: none से key difference है, और यह तब मायने रखता है जब आप layout को jump कराए बिना कुछ छुपाना चाहते हैं।
- Accepted values:
- hidden — invisible लेकिन फिर भी जगह लेता है
- visible — normally दिखाया जाता है (initial value)
- collapse — table rows या columns को layout बदले बिना हटाता है; कहीं और hidden की तरह काम करता है
- opacity — 0 से 1, यह भी इसे invisible बनाता है लेकिन clickable रहता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: visibility: hidden Keeps the Space
<style>
.hidden {
visibility: hidden;
}
</style>
<p>Before</p>
<p class="hidden">Invisible but space still reserved</p>
<p>After (does not move up)</p>opacity: 0 Interactive रहता है
opacity: 0 किसी element को पूरी तरह transparent बनाता है जबकि उसे layout में रखता है AND उसे clickable और focusable भी रखता है, बाकी दो methods के उलट। यह custom-styled form controls के लिए उपयोगी है जहाँ आप native input को visually छुपाते हैं लेकिन फिर भी उसे clicks और keyboard focus मिलते रहना चाहते हैं।
- Accepted values:
- opacity: <number> — 0 (transparent) से 1 (opaque); percentage भी काम करता है
- visibility: hidden — invisible, जगह लेता है, clickable नहीं
- display: none — layout से पूरी तरह हटाया गया
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: opacity: 0 Stays Interactive
<style>
.transparent {
opacity: 0;
}
</style>
<button class="transparent">Invisible but still clickable and focusable</button>Screen Reader और SEO में अंतर
display: none और visibility: hidden दोनों को screen readers skip कर देते हैं, इसलिए उनका content assistive technology के लिए invisible है। opacity: 0 content को screen readers अभी भी announce करते हैं भले ही sighted users इसे न देख पाएँ, जो एक common accessibility mistake है जब developers मान लेते हैं कि opacity: 0 बाकी दोनों जैसा behave करता है।
उदाहरण: Screen Reader and SEO Differences
<style>
.gone { display: none; }
.invisible { visibility: hidden; }
.transparent { opacity: 0; }
</style>
<p class="gone">Skipped by screen readers</p>
<p class="invisible">Skipped by screen readers</p>
<p class="transparent">Still announced by screen readers</p>सही Method चुनना
display: none इस्तेमाल करें जब आप चाहते हैं कि element बिना किसी trace और बिना किसी layout gap के गायब हो जाए, जैसे किसी mobile menu को बंद करना।
visibility: hidden इस्तेमाल करें जब आपको layout को स्थिर रखना हो, जैसे कोई table cell जिसमें कभी-कभी कोई icon नहीं होता। opacity: 0 सिर्फ तभी इस्तेमाल करें जब आपको specifically element को interactive या animatable बनाए रखना हो।
उदाहरण: Choosing the Right Method
<style>
.menu-closed { display: none; }
.icon-slot { visibility: hidden; }
.custom-input { opacity: 0; }
</style>
<nav class="menu-closed">Mobile menu, fully gone</nav>
<span class="icon-slot">Icon slot, layout stays stable</span>
<input class="custom-input" type="checkbox">- उस element पर
display: noneइस्तेमाल करना जिसकी screen readers को ज़रूरत है, जबकि यह उन्हें भी element से hide कर देता है। visibility: hiddenइस्तेमाल करना और उम्मीद करना कि जगह गायब हो जाएगी, जबकि यह अपनी जगह बनाए रखता है।opacity: 0इस्तेमाल करना और यह भूल जाना कि element अभी भी click किया जा सकता है।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: