सीएसएस गुण: प्रदर्शन बनाम दृश्यता

98

प्रदर्शन बनाम दृश्यता गुणों के बीच अंतर क्या है?

css

— सचिन आर
स्रोत

7

के संभावित डुप्लिकेट कोई भी: छिपा हुआ और प्रदर्शन: क्या दृश्यता के बीच अंतर है

— kennytm

1

@KennyTM: यह मान रहा है कि ओपी विशेष रूप से प्रत्येक संपत्ति के उन संबंधित मूल्यों की तुलना करने के लिए कह रहा है।

— BoltClock

111

visibilityसंपत्ति केवल ब्राउज़र एक तत्व को दिखाने या नहीं बताता है। यह या तो दृश्यमान है ( visible- आप इसे देख सकते हैं), या अदृश्य ( hidden- आप इसे देख नहीं सकते हैं)।

displayसंपत्ति ब्राउज़र बताता है कि कैसे आकर्षित और एक तत्व दिखाने के लिए, सब पर अगर करने के लिए है - चाहे वह एक के रूप में प्रदर्शित किया जाना चाहिए inlineतत्व या एक (यानी यह पाठ और अन्य इनलाइन तत्वों के साथ बहती है) blockस्तर के तत्व (यानी यह ऊंचाई और चौड़ाई गुण है कि आप सेट कर सकते हैं, यह तैरता है, आदि), या एक inline-block(यानी यह) कुछ अन्य लोगों (एक ब्लॉक बॉक्स की तरह काम करता है, लेकिन इनलाइन बजाय रखी है और list-item, table, table-row, table-cell, flex, आदि)।

आप के लिए एक तत्व सेट करते हैं display: block, लेकिन यह भी सेट visibility: hiddenअभी भी एक ब्लॉक तत्व के रूप में, ब्राउज़र व्यवहार करता है यह, को छोड़कर तुम सिर्फ यह नहीं दिख रहा। एक अदृश्य बॉक्स के ऊपर आप लाल बॉक्स को कैसे स्टैक करते हैं, इस तरह की तरह: लाल बॉक्स ऐसा लगता है जैसे यह मध्य हवा में तैर रहा है जब वास्तव में यह एक भौतिक बॉक्स के शीर्ष पर बैठा है जिसे आप नहीं देख सकते हैं।

दूसरे शब्दों में, इसका मतलब यह है displayकि इसके साथ तत्व noneअभी भी एक पृष्ठ में तत्वों के प्रवाह को प्रभावित नहीं करेंगे, भले ही वे दिखाई दे या नहीं। किसी तत्व के आसपास के बक्से display: noneऐसा व्यवहार करेंगे जैसे कि वह तत्व कभी था ही नहीं (हालाँकि यह DOM में रहता है)।

— बोल्टकॉक
स्रोत

1

.. डोम के साथ कुछ करने के लिए प्रदर्शन नहीं है? उदाहरण के लिए ... यदि आपके पास है display: none;, तो उस तत्व को DOM से हटा दिया जाता है? या मैं पूरी तरह से भ्रमित हूँ?

— हिस्टो

3

@ क्रिस: वास्तव में, यह नहीं है। आप अकेले DOM के साथ DOM में किसी तत्व की स्थिति या उपस्थिति को प्रभावित नहीं कर सकते ।

— BoltClock

@ बॉलकॉक ... हां, आप सही कह रहे हैं। मैंने महसूस किया है कि आप कभी भी DOM से एक तत्व नहीं निकाल सकते हैं, लेकिन केवल यह प्रभावित करते हैं कि DOM के संबंध में यह कैसे प्रदर्शित होता है। क्या यह ध्वनि अधिक सटीक है?

— हिस्टो

एक महत्वपूर्ण बात यह है कि jQuery के छिपाने () विधि का उपयोग करके, जो आंतरिक रूप से किसी को भी प्रदर्शित नहीं करता है, आप इस तत्व की स्थिति प्राप्त नहीं कर सकते। दृश्यता का उपयोग करके आप इसे करने में सक्षम हैं।

— p0rsche

21

दृश्यता: छिपी हुई;

तत्व को चित्रित नहीं किया जाएगा और क्लिक / स्पर्श घटनाओं को पुनः प्राप्त नहीं किया जाएगा, लेकिन जो स्थान लेता है वह अभी भी व्याप्त है
क्योंकि यह अभी भी लेआउट उद्देश्यों के लिए है, आप इसे बिना देखे जाने के लिए माप सकते हैं
सामग्री को बदलने में अभी भी पृष्ठ को रीफ़्लो / लेआउट करने में समय लगेगा
दृश्यता विरासत में मिली है, इसलिए इसका अर्थ है कि आप उन्हें दृश्यता देकर दृश्यमान बना सकते हैं: दृश्यमान;

कुछ भी डिस्प्ले मत करो;

तत्व को प्रवाह / लेआउट में भाग नहीं लेगा
(उपयोग किए गए ब्राउजर के आधार पर) फ्लैश फिल्मों और iframes को मार सकता है (जो फिर से दिखाने पर पुनः आरंभ / पुनः लोड करेगा), हालाँकि आप इसे iframes के साथ होने से रोक सकते हैं
तत्व किसी भी स्थान को नहीं लेगा। लेआउट उद्देश्यों के लिए यह ऐसा है जैसे यह मौजूद नहीं है
कुछ ब्राउज़रों / उपकरणों (आईपैड की तरह) को सीधे उस तत्व द्वारा उपयोग की जाने वाली मेमोरी को वापस ले लेंगे, जिससे यदि आप एनिमेशन के दौरान किसी और के बीच स्विच नहीं करते हैं, तो छोटे हिकअप होते हैं।

अतिरिक्त नोट:

छिपी हुई सामग्री में छवियां: सभी लोकप्रिय ब्राउज़रों में छवियां अभी भी भरी हुई हैं, भले ही वे दृश्यता के साथ किसी भी तत्व के भीतर हों: छिपी हुई; या प्रदर्शन: कोई नहीं;
छिपी हुई सामग्री में फोंट: वेबकिट ब्राउज़र (क्रोम / सफारी) कस्टम फोंट लोड करने में देरी कर सकते हैं जो केवल दृश्य या प्रदर्शन के माध्यम से छिपे हुए तत्वों में उपयोग किया जाता है। यह उन तत्वों को मापने का कारण हो सकता है जो अभी भी कस्टम फ़ॉन्ट लोड होने तक फ़ॉलबैक फ़ॉन्ट का उपयोग कर रहे हैं।

— Spellcoder
स्रोत

19

प्रदर्शन: कोई भी HTML के प्रवाह से तत्व को नहीं निकालता है जबकि दृश्यता: छिपी नहीं है।

— matpol
स्रोत

2

कुछ भी डिस्प्ले मत करो; डोम तत्वों दृश्य शैली / डोम से भौतिक स्थान को हटा देगा, जबकि दृश्यता: छिपी; तत्व को नहीं हटाएगा, लेकिन बस इसे छिपाएगा। तो आपके DOM में वर्टिकल स्पेस के 300px पर कब्जा करने वाला एक डिविजन दृश्यता पर सेट होने पर ऊर्ध्वाधर चौड़ाई के 300px पर कब्जा कर लेगा: छिपा हुआ; लेकिन जब प्रदर्शित करने के लिए सेट: कोई नहीं; यह दृश्य शैली है और जिस स्थान पर यह व्याप्त है वह छिपी हुई है और एक बेहतर शब्द की कमी के कारण यह स्थान "मुक्त" हो गया है।

[संपादित करें] - यह कुछ समय पहले कि मैंने ऊपर लिखा था, और क्या मैं पर्याप्त रूप से जानकार नहीं था या बुरे दिन नहीं थे, मुझे नहीं पता, लेकिन वास्तविकता यह है कि तत्व कभी भी डोम पदानुक्रम से हटा दिया गया है। प्रदर्शन का उपयोग करते समय सभी ब्लॉक स्तर के प्रदर्शन 'शैलियों' पूरी तरह से 'छिपे हुए' हैं: कोई नहीं, जबकि दृश्यता के साथ: छिपा हुआ; तत्व स्वयं छिपा हुआ है, लेकिन यह अभी भी DOM में एक दृश्य स्थान रखता है। मै उम्मीद करता हू कि यह बातें अब साफ है

— SimonDowdles
स्रोत

4

जी नहीं, display: noneहोगा नहीं डोम से एक तत्व को हटा दें। तत्व अभी भी है, यह सिर्फ प्रदर्शित नहीं होता है ।

— BoltClock