CSS Visibility Property
Introduction to CSS Visibility Property
जब आप किसी webpage का निर्माण करते है तो कई बार यह आवश्यक हो जाता है की किसी element को hide किया जाए। ऐसा कई कारणों से हो सकता है। उदाहरण के लिए आप किसी div के content को initially hide करना चाहते है लेकिन जैसे ही कोई user उस पर mouse hover करें तो आप उस div के content को show करना चाहते है।
या फिर किसी condition के आधार पर भी elements को hide और show करने की आवश्यकता हो सकती है। जैसे की आप website के किसी page पर ऐसे users जिन्होंने आप की service के लिए pay किया हुआ उन्हें आप advanced options show करना चाहते है और जिन्होंने pay नहीं किया हुआ है या फिर जो free custormers है उन्हें आप limited options show करना चाहते है।
कारण कोई भी हो इस कार्य के लिए CSS में visibility property available है जिसके द्वारा आप elements को hide और show कर सकते है। आइये जानते है की visibility property क्या होती है?
CSS में visibility एक ऐसी property है जो किसी element को बिना उसके layout को change या effect किये हुए hide या show कर सकती है।
यँहा पर बिना layout को change या effect करने से मतलब यह है की यदि element visible नहीं है तो भी वह उतना space cover करेगा जितना की वह visible होने पर cover करता है। उस element के invisible होने पर white space show होगा और कोई भी दूसरा element उसके space में show नहीं हो सकता है।
यदि इस बात को आसान शब्दों में कहा जाए तो चाहे element visible हो या न हो लेकिन उसके लिए required white space अवश्य create होगा।
Difference Between CSS Display & Visibility Properties
CSS में display और visibility दोनों ही properties elements को hide करने के लिए use की जाती है। लेकिन आपको इससे confuse होने की आवश्यकता नहीं है क्योंकि ये दोनों ही properties अलग अलग तरह से elements को hide करती है।
जब display property के द्वारा किसी element को hide किया जाता है तो वह पूरी तरह hide हो जाता है और उसके लिए किसी प्रकार का white space भी create नहीं होता है। ऐसे elements के बाद वाले elements उस elements की जगह पर show हो जाते है।
लेकिन जैसा की आप जानते है की visibility property के साथ ऐसा नहीं होता है और element का white space create हो जाता है। इसलिए जब आपको layout को छोड़कर element को hide करना हो तो आपको visibility property use करनी चाहिए।
Syntax of CSS Visibility Property
Visibility property का general syntax निचे दिया जा रहा है।
visibility : hidden | visible | collapse | initial | inherit;
जैसा की आप ऊपर दिए गए syntax में देख सकते है visibility property की 5 possible values हो सकती है। आइये इनके बारे में जानने का प्रयास करते है।
Values of CSS Visibility Property
Visibility property की values के बारे में निचे बताया जा रहा है।
- hidden - इस value से element hide हो जाता है।
- visible - यह किसी भी element की default value होती है जिसमे element पूरी तरह visible होता है।
- collapse - यह value मुख्यतः tables के लिए use की जाती है। इस value से आप किसी particular row या column को hide कर सकते है। ऐसा करने से उस row या column की जगह दूसरे rows या columns ले लेते है। यदि इस value को दूसरे elements के साथ use किया जाता है तो यह hidden की तरह ही काम करती है।
- initial - यह value property को default value पर set कर देती है।
- inherit - यह value property को parent element की value से set करती है।
Example of CSS Visibility Property
CSS visibility property के use को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS Visibility Property Demo</title>
<style>
#firstP{
border: 1px solid green;
visibility:hidden;
width:300px;
}
#secondP{
border:1px solid green;
width:300px;
}
</style>
</head>
<body>
<p id="firstP">This is a paragraph and initially its hidden. But white space for this paragraph is created by browser. </p>
<p id="secondP">
This is another paragraph. This paragraph can not take space of above paragraph because above paragraph is hidden using visibility property.
</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
