display: none
display: none प्रॉपर्टी एलिमेंट को पूरी तरह छिपा देती है और वह डॉक्यूमेंट फ्लो से हट जाता है। यह कोई जगह नहीं घेरता, और स्क्रीन रीडर्स भी इसे नहीं पढ़ते।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h3 { display: none; }
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading does not take up space even after hiding it since we have used display: none;.</p>
</body>
</html>visibility: hidden
visibility: hidden प्रॉपर्टी एलिमेंट को छिपा देती है, लेकिन यह अभी भी डॉक्यूमेंट फ्लो में अपनी जगह घेरता रहता है (लेआउट प्रभावित होता है)। स्क्रीन रीडर्स इसे पढ़ सकते हैं।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h3 { visibility: hidden; }
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading takes up space even after hiding it.</p>
</body>
</html>तुलना तालिका
| प्रॉपर्टी | जगह घेरता है | इवेंट्स प्राप्त करता है | एक्सेसिबिलिटी |
|---|---|---|---|
display: none | नहीं | नहीं | छिपा हुआ (स्क्रीन रीडर्स नहीं पढ़ते) |
visibility: hidden | हां | नहीं | छिपा हुआ लेकिन स्पेस रहता है |
