CSS Visibility Property
कभी-कभी कुछ Information हम Users से छिपाना चाहते हैं। या हमारा कुछ Content Premium हैं जो सिर्फ Paid Users के लिए Available हैं। तो हमे Content को Temporary छिपाना पडता हैं। या कुछ शर्तों के साथ दिखाना पडता हैं। Content को Hide करने के लिए CSS Visibility Property का प्रयोग किया जाता हैं। जिसके द्वारा Elements को Hide किया जा सकता हैं। Elements की Visibility Hidden करने के बाद वह Particular Element छिप जाता हैं। लेकिन, उसका White Space दिखाई देता हैं। Visibility Property से Website या Blog का Design प्रभावित नहीं होता हैं।
Different CSS Visibility Property Values
Elements को Hide करने के लिए Visibility Property द्वारा विभिन्न Values उपलब्ध करवाई जाती हैं। ताकि Elements पर हमारा पूर्ण नियंत्रण रहे।
Visibility Property की विभिन्न Values के नाम और उपयोग की जानकारी दे रहे हैं।
- Hidden – इस Value से Element छिप जाता हैं और इसका Content दिखाई नही देता हैं। लेकिन, इसकी खाली जगह (White Space) दिखाई देती हैं।
- Visible – यह Elements की Default Value होती हैं। इसमे Element दिखाई देता हैं।
- Collapse – इस Value का उपयोग अधिकतर Table Element में उपलब्ध किसी खास Row या Column को Hide करने के लिए किया जाता हैं। लेकिन, इसका उपयोग अन्य Elements पर भी किया जा सकता हैं। तब यह hidden Value की तरह Behave करती हैं।
- Initial – इस Value द्वारा Element की Default Value Apply होती हैं।
- Inherit – इस Value द्वारा Element पर उसके Parent Element की Value Apply होती हैं।
Visibility Property of Syntax
Visibility Property का Syntax दिया जा रहा हैं-
selector {visibility: value;}
Visibility Property के Syntax के 3 भाग होते हैं:
- Selector – Selector का मतलब हैं HTML Element या आपके द्वारा Define Classes एवं IDs. मतलब जिस Element पर Visibility Property Apply करना चाहते हैं यहाँ उस Element को लिखा जाता हैं। जैसे Paragraph को छिपाना चाहते हैं तो यहाँ पर p लिखा जाएगा।
- Visibility – Visibility Property का नाम हैं। इसे लिखना जरूरी हैं।
- Value – यहाँ Visibility Property की उपलब्ध Values में से किसी एक को लिखा जाता हैं। हम पहले ही Visibility Property की सभी Values के बारे में ऊपर बता चुके हैं।
Visibility Property का Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility Property Example</title>
<style type=”text/css”>#div3 {
visibility: hidden;
}
</style>
</head>
<body>
<p>नीचे हम 4 Div Define कर रहे हैं। जिसमे से हम Div3 को छिपाएंगे।</p>
<div id=”div1″>This is Div1</div>
<div id=”div2″>This is Div2</div>
<div id=”div3″>This is Div3</div>
<div id=”div4″>This is Div4</div>
</body>
</html>
Difference Between Visibility & Display Property
CSS में Elements को छिपाने के लिए दो Properties उपलब्ध हैं। इन दोनों Properties का कार्य Elements को अपने-अपने तरीके से Hide करना होता हैं।
1. Visibility Property द्वारा Elements को Hide करने पर Element Hide होता हैं। उसका Whitespace Visible रहता हैं। जबकि Display Property में Element के साथ उसका Whitespace भी Hide रहता हैं।
2. Visibility द्वारा Hide Element की जगह पर उसके बाद वाला Element Show नहीं होता हैं। वहीं Display Property द्वारा Element Hide करने पर उसकी जगह पर दूसरा Element (आगे वाल Element) Show होता हैं।
3. Visibility Property से Website तथा Blog का Layout प्रभावित नहीं होता हैं। लेकिन, Display Property से Layout एवं Design प्रभावित होता हैं।
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment