बीच क्या अंतर है visibility:collapseऔर display:none?
जवाबों:
लघु संस्करण:
पूर्व का उपयोग तालिका तत्वों को पूरी तरह से छिपाने के लिए किया जाता है। बाद वाले का उपयोग पूरी तरह से बाकी सब कुछ छिपाने के लिए किया जाता है।
लंबा संस्करण :
visibility: collapseएक तत्व को पूरी तरह से छुपाता है (ताकि यह लेआउट में किसी भी स्थान पर कब्जा न करे), लेकिन केवल तब जब तत्व तालिका तत्व हो ।
यदि तालिका तत्वों के अलावा अन्य तत्वों पर उपयोग किया जाता है, तो visibility: collapseयह कार्य करेगा visibility: hidden। यह एक तत्व को अदृश्य बनाता है, लेकिन यह अभी भी लेआउट में स्थान पर कब्जा कर लेगा।
display: noneएक तत्व को पूरी तरह से छुपाता है , इसलिए यह लेआउट में किसी भी स्थान पर कब्जा नहीं करता है, लेकिन इसका उपयोग टेबल तत्वों पर नहीं किया जाना चाहिए।
display: none;का एक अच्छा कारण यह है कि यह उपयोग करने वाली तालिकाओं को तोड़ता है colspanऔर rowspan।
visibility: collapsevisibility: hiddenअधिकांश स्वरूपण संदर्भों में बिल्कुल वैसा ही व्यवहार करता है : तत्व के लिए आवश्यक स्थान लेआउट में 'आरक्षित' है, लेकिन तत्व खुद को प्रदान नहीं किया जाता है, खाली स्थान छोड़कर जहां यह होता है।
तीन अपवाद हैं जो मुझे पता है: टेबल-पंक्तियाँ, टेबल-कॉलम और फ्लेक्स आइटम, जिसमें visibility: collapseव्यवहार होता है display: none, लेकिन एक प्रमुख अंतर के साथ: 'अकड़'। आप अकड़ को शून्य-आकार के प्लेसहोल्डर के रूप में सोच सकते हैं, जो लेआउट प्रक्रिया में स्वयं के किसी भी स्थान का दावा नहीं करता है, लेकिन फिर भी प्रारूपण संरचना का हिस्सा है और कुछ आकार की गणनाओं में भाग लेता है।
उदाहरण के लिए, एक ढह गई तालिका-पंक्ति, तालिका में किसी भी ऊर्ध्वाधर स्थान पर कब्जा नहीं करेगी, लेकिन तालिका स्तंभ अभी भी ढल चुकी पंक्ति के रूप में 'as-if' आयामित होंगे और उनकी सामग्री वास्तव में दिखाई दे रही थी। यह कॉलम को 'वॉबलिंग' से रोकने के लिए है क्योंकि पंक्तियों को अंदर और बाहर टॉगल किया जाता है। इसी तरह, एक ध्वस्त फ्लेक्स आइटम मुख्य अक्ष के साथ किसी भी स्थान पर कब्जा नहीं करता है, लेकिन फिर भी फ्लेक्स लाइन क्रॉस-आकार में योगदान देता है।
' display: noneतालिकाओं के साथ उपयोग न करें ' अंगूठे का एक मूल्यवान नियम है, लेकिन यह पूरी कहानी नहीं बताता है।
display: noneयदि आप अपने छिपे हुए तत्वों को तालिका (या फ्लेक्स लाइन) लेआउट प्रक्रिया में किसी भी तरह से भाग नहीं लेना चाहते हैं तो उपयोग करें ।visibility: collapseयदि आप तालिका (या फ्लेक्स लाइन) लेआउट को अस्थिर किए बिना तत्वों को गतिशील रूप से दिखाना और छिपाना चाहते हैं तो उपयोग करें ।यहां एक टेबल स्निपेट एक टेबल रो के बीच display: noneऔर उसके बीच के अंतर को प्रदर्शित करता है visibility: collapse:
visibility:collapseसफारी में तालिकाओं के लिए काम नहीं करता है। मुझे display:noneटेबल की पंक्तियों पर (सफारी सहित) ठीक काम करने के लिए मिला, हालांकि स्तंभ की चौड़ाई के बारे में उपरोक्त टिप्पणियां सही हैं
visibility:collapseकेवल तालिकाओं पर उपयोग किया जाना चाहिए। अन्य तत्वों पर यह एक के रूप में कार्य करेगा visibility:hidden।
visibility:hiddenतत्व को छिपाएं लेकिन फिर भी तत्व का स्थान ले लें, जबकि display:noneवह स्थान भी नहीं रखेगा।
संसाधन:
उसी विषय पर:
display: noneटेबल तत्वों पर उपयोग नहीं किया जाना चाहिए, एक अच्छा जोड़ होगा।