CSS visibility Property क्या हैं पूरी जानकारी हिंदी में?

इस Tutorial में हम आपको CSS visibility Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.

CSS Visibility Property का परिचय

कभी-कभी कुछ Information हम Users से छिपाना चाहते हैं. या हमारा कुछ Content Premium हैं जो सिर्फ Paid Users के लिए Available हैं. तो हमे Content को Temporary छिपाना पडता हैं. या कुछ शर्तों के साथ दिखाना पडता हैं.

Content को Hide करने के लिए CSS Visibility Property का इस्तेमाल किया जाता हैं. जिसके द्वारा Elements को Hide किया जा सकता हैं.

Elements की Visibility Hidden करने के बाद वह Particular Element छिप जाता हैं. लेकिन, उसका Whitespace दिखाई देता हैं.

Visibility Property से Website या Blog का Design प्रभावित नहीं होता हैं. इसलिए आप बेहिचक इस Propertyj का Use Elements को छिपाने के लिए कर सकते हैं.

CSS Visibility Property Values के विभिन्न प्रकार

Elements को Hide करने के लिए Visibility Property द्वारा विभिन्न Values उपलब्ध करवाई जाती हैं. ताकि Elements पर हमारा पूर्ण नियंत्रण रहे. हम नीचे Visibility Property की विभिन्न Values के नाम और उपयोग की जानकारी दे रहे हैं.

1. hidden – इस Value से Element छिप जाता हैं और इसका Content दिखाई नही देता हैं. लेकिन, इसकी खाली जगह (Whitespace) दिखाई देती हैं.
2. visible – यह Elements की Default Value होती हैं. इसमे Element दिखाई देता हैं.
3. collapse – इस Value का उपयोग अधिकतर Table Element में उपलब्ध किसी खास Row या Column को Hide करने के लिए किया जाता हैं. लेकिन, इसका उपयोग अन्य Elements पर भी किया जा सकता हैं. तब यह hidden Value की तरह Behave करती हैं.
4. initial – इस Value द्वारा Element की Default Value Apply होती हैं.
5. inherit – इस Value द्वारा Element पर उसके Parent Element की Value Apply होती हैं.

Visibility Property का Syntax

नीचे Visibility Property का Syntax दिया जा रहा हैं. ताकि आप CSS Visibility Property का सही तरीके से इस्तेमाल कर पाएं.

Visibility Property के Syntax के 3 भाग होते हैं:

1. selector – Selector का मतलब हैं HTML Element या आपके द्वारा Define Classes एवं IDs. मतलब आप जिस Element पर Visibility Property Apply करना चाहते हैं यहाँ उस Element को लिखा जाता हैं. जैसे आप Paragraph को छिपाना चाहते हैं तो यहाँ पर p लिखा जाएगा. Selector के बारे में अधिक जानकारी के लिए CSS Selector Tutorial को पढिए.
2. visibility – Visibility Property का नाम हैं. इसे लिखना जरूरी हैं.
3. value – यहाँ Visibility Property की उपलब्ध Values में से किसी एक को लिखा जाता हैं. हम पहले ही Visibility Property की सभी Values के बारे में ऊपर बता चुके हैं.

Visibility Property का Example

इसे Try कीजिए

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

Visibility और Display Property में अंतर

CSS में Elements को छिपाने के लिए दो Properties उपलब्ध हैं. इन दोनों Properties का कार्य Elements को अपने-अपने तरीके से Hide करना होता हैं.

इसे पढे: CSS display Property की पूरी जानकारी.

अक्सर नये सीखने वाले और कम अनुभवी इन दोनों Properties को उपयोग करने में Confuse हो जाते हैं. इसलिए हम Visibility और Display Property में अंतर बता रहे हैं. ताकि आपकी Confuse दूर हो जाए.

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 प्रभावित होता हैं.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Visibility Properties के बारे में पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की Visibility Values के बारे में जाना और उनका उपयोग करना भी सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital