visibilityसीएसएस में संपत्ति दो अलग-अलग कार्य करती है। यह एक तालिका की पंक्तियों और स्तंभों को छुपाता है, और यह लेआउट को बदले बिना एक तत्व को भी छुपाता है।
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityचार वैध मान हैं: visible, hidden, collapse, और inherit। हम अधिक जानने के लिए उनमें से प्रत्येक के माध्यम से जाएंगे।
दिखाई
जैसा लगता है, वैसा ही visibleदिखता है। डिफ़ॉल्ट रूप से कुछ भी छिपा नहीं है, इसलिए यह मान तब तक कुछ नहीं करता है जब तक कि आपने hiddenइस या इस तत्व के माता-पिता को सेट नहीं किया है।
छिपा हुआ
hidden मूल्य बातें छुपाता है। यह उपयोग करने से अलग है display: none, क्योंकि hidden केवल नेत्रहीन तत्वों को छिपाता है। तत्व अभी भी है, और अभी भी पृष्ठ पर जगह लेता है, लेकिन आप इसे अब नहीं देख सकते हैं (जिस तरह की अपारदर्शिता को 0 में बदलना)। दिलचस्प है, यह संपत्ति डिफ़ॉल्ट रूप से विरासत में नहीं मिलती है। इसका मतलब है कि, display या opacity गुणों के विपरीत , आप एक तत्व बना सकते हैं hidden, और अभी भी इसके बच्चों में से एक है visible, जैसे:
ध्यान दें कि, छिपाए जाने पर, मूल तत्व ट्रिगर नहीं होता है :hover।
ढहने
यह केवल तालिका पंक्तियों ( ), पंक्ति समूहों (जैसे ), स्तंभों ( ), स्तंभ समूहों ( ), या उस तरह से बने तत्वों को प्रभावित करता है display)।
इसके विपरीत hidden, यह मान तालिका उप-तत्व को छिपाता है, उस स्थान को छोड़ने के बिना जहां यह था। यदि कहीं भी उपयोग किया जाता है, लेकिन एक तालिका उप-तत्व पर, यह काम करता है visibility: hidden।
इसके साथ बहुत सारे प्रश्न हैं, यह जानना मुश्किल है कि कहां से शुरू करें। बस एक क्षुधावर्धक के रूप में:
- क्रोम / सफारी एक पंक्ति को ध्वस्त कर देगा, लेकिन जिस स्थान पर कब्जा है वह बना रहेगा। और अगर टेबल सेल्स के अंदर एक बॉर्डर था, जो टॉप एज के साथ सिंगल बॉर्डर में समा जाएगा।
- Chrome / Safari किसी स्तंभ या स्तंभ समूह को नहीं ढहाएगा।
- सफारी एक टेबल सेल (गलत) को ध्वस्त करती है लेकिन क्रोम (दाएं) नहीं होगा।
- किसी भी ब्राउज़र में, यदि कोई सेल किसी स्तंभ में है जो ढह गया है (चाहे वह वास्तव में ढह गया हो या नहीं) तो उस सेल का टेक्स्ट प्रदर्शित नहीं होगा।
- ओपेरा (पूर्व WebKit) एक टेबल सेल (जो सही है) को छोड़कर, सभी चीज़ों से बकवास को समाप्त कर देगा।
वहाँ अधिक है, लेकिन मूल रूप से: यह कभी भी उपयोग न करें।
इनहेरिट
डिफ़ॉल्ट मान। यह बस तत्व को उसके माता-पिता के मूल्य का कारण बनता है।
फ्लेक्सबॉक्स
visibility: collapse; फ्लेक्सबॉक्स में भी उपयोग किया जाता है, और अधिक अच्छी तरह से परिभाषित किया गया है।
ब्राउज़र का समर्थन
मूल बातें, पतन के साथ सभी झगड़ों पर विचार नहीं:
| कोई | कोई | कोई | 4+ | 4+ | कोई | कोई |
IE 7- समर्थन नहीं करता है collapseया inherit।