क्या अपारदर्शिता: 0 में दृश्यता के समान ही प्रभाव है: छिपा हुआ


119

यदि हां, तो क्या यह प्रभावी रूप से visibilityसंपत्ति को अपदस्थ करता है?

(मुझे एहसास है कि इंटरनेट एक्सप्लोरर अभी तक इस CSS2 संपत्ति का समर्थन नहीं करता है।)
लेआउट इंजन की तुलना

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


4
और टैबरर के बारे में कैसे? यदि दृश्यमान = गलत है, तो नियंत्रण पर कोई ध्यान नहीं जाता है, लेकिन यदि अपारदर्शिता 0 है तो टैब कुंजी अभी भी नियंत्रणों के बीच पुनरावृत्त होती है?
स्टीफन

यह देखना दिलचस्प होगा कि पारदर्शी नियंत्रण से कैसे फोकस हो सकता है।
क्रिस नू

3
मैंने कोशिश की कि, (FF3)। अपारदर्शिता के साथ एक इनपुट तत्व: 0 का ध्यान प्रतिदर्श के अनुसार प्राप्त करता है, हालांकि कोई दृश्य संकेत नहीं है। कर्सर गायब हो जाता है। आप जो भी टाइप करते हैं, वह इनपुट तत्व के मूल्य में दर्ज किया जाता है। दबाने वाला टैब फिर से अगले फ़ील्ड पर जाता है। दिलचस्प।
क्रिस नू

जवाबों:


256

यहाँ विभिन्न उत्तरों से सत्यापित जानकारी का संकलन है।

इनमें से प्रत्येक सीएसएस गुण अद्वितीय है। दिखाई देने वाले किसी तत्व को प्रस्तुत करने के अलावा, उनके पास निम्नलिखित अतिरिक्त प्रभाव हैं:

  1. वह स्थान ढह जाता है जो तत्व सामान्य रूप से व्याप्त होता है
  2. घटनाओं के जवाब (उदाहरण के लिए, क्लिक करें, कीपर)
  3. टैबरर में भाग लेता है
                     पतन की घटनाओं taborder
अपारदर्शिता: 0 नहीं हां हां
दृश्यता: छिपा हुआ नहीं नहीं नहीं
दृश्यता: पतन हाँ * नहीं नहीं
प्रदर्शन: कोई नहीं हाँ नहीं नहीं

* एक तालिका तत्व के अंदर हाँ, अन्यथा नहीं।

मैंने यहां मार्कडाउन प्रलेखन का पालन करने की कोशिश की: daringfireball.net/projects/markdown/syntax
क्रिस नू

ठीक है, इसलिए SO जानबूझकर <table> का समर्थन नहीं करता है। इसलिए मैंने इसे अस्सी कर दिया।
क्रिस नू

3
इसके अलावा, "अस्पष्टता: 0" के साथ फ्लैश ऑब्जेक्ट्स का प्रतिपादन किया जाता है, और स्प्राइट के निर्माता को ट्रिगर किया जाता है, लेकिन "दृश्यता: छिपा हुआ" नहीं।
पेप्किन88

यदि आपका रेडियो / चेकबॉक्स काम नहीं कर रहा है visibility:hidden, तो आपको opacity: 0माउस क्लिक का पता लगाने के लिए इसके बजाय इसका उपयोग करने की आवश्यकता होगी ।
दिनूली

7
@ क्रिसनी: सारांश के लिए धन्यवाद। एक चीज जिसे आप जोड़ना चाह सकते हैं: मैंने अभी-अभी शोध किया कि कैसे माता-पिता के नोड को अदृश्य बनाया जाए, लेकिन बच्चे के नोड्स अभी भी दिखाई देते हैं, परिणाम: दृश्यमान बच्चों के लिए कोई मौका नहीं: opacity:0 या display:none, लेकिन यदि आप उपयोग visibility: hidden करते हैं तो आप बच्चों के साथ दिखाई दे सकते हैंvisibility: visible
मार्टिन

14

नहीं।

अस्पष्टता वाले तत्व नए स्टैकिंग संदर्भ बनाते हैं।

इसके अलावा, सीएसएस कल्पना इसे परिभाषित नहीं करती है, लेकिन opacity:0क्लिक करने योग्य तत्व हैं, और वे तत्व visibility:hiddenनहीं हैं।


12

नहीं, यह नहीं है। एक बड़ा अंतर है। वे समान हैं क्योंकि आप तत्व के माध्यम से देख सकते हैं यदि दृश्यता छिपी हुई है या अस्पष्टता 0 है, हालांकि

अपारदर्शिता: 0 : आप इसके पीछे के तत्वों पर क्लिक नहीं कर सकते

दृश्यता: छिपी : आप इसके पीछे तत्वों पर क्लिक कर सकते हैं


1
"नहीं, यह नहीं है"? क्या यह प्रश्न के उत्तर के रूप में है, या मौजूदा उत्तरों में से एक के जवाब के रूप में है? यदि यह बाद में है, तो इसे उस पते के तहत एक टिप्पणी के रूप में जोड़ा जाना चाहिए।
क्रिस नू

9
यह "क्या अपारदर्शिता: 0 का दृश्यता के समान प्रभाव है: छिपी हुई है?" का उत्तर है .... हालांकि यह स्पष्ट नहीं था?
निशांत

5

के बीच visibilityऔर कई अंतर हैं opacity। अधिकांश उत्तर कुछ अंतरों का उल्लेख करते हैं, लेकिन यहां एक पूरी सूची है।

  1. अपारदर्शिता विरासत में नहीं मिलती है, जबकि दृश्यता होती है

  2. दृश्यता अस्पष्ट है, जबकि दृश्यता नहीं है।
    (ठीक है, तकनीकी रूप से यह है, लेकिन इसके लिए कोई व्यवहार निर्धारित नहीं है, कहते हैं, "37% ढह गया और 63% छिपा हुआ है", इसलिए आप इसे गैर-एनिमेटेबल मान सकते हैं।)

  3. अपारदर्शिता का उपयोग करते हुए, आप एक बच्चे के तत्व को उसके माता-पिता की तुलना में अधिक अपारदर्शी नहीं बना सकते हैं। ईजी यदि आपके पास रंग के साथ एपी है: काला और अपारदर्शिता: 0.5, आप इसके किसी भी बच्चे को पूरी तरह से काला नहीं बना सकते हैं। अस्पष्टता के लिए मान्य मूल्य 0 और 1 के बीच हैं, और इस उदाहरण के लिए 2 की आवश्यकता होगी!
    नतीजतन, मार्टिन की टिप्पणी के अनुसार , आपके पास एक अदृश्य माता-पिता में एक दृश्यमान (दृश्यता के साथ) दृश्यमान बच्चा हो सकता है (दृश्यता के साथ: छिपा हुआ)। यह अस्पष्टता के साथ असंभव है; अगर किसी अभिभावक में अस्पष्टता है: 0; इसके बच्चे हमेशा अदृश्य रहते हैं।

  4. कोर्नेल के उत्तर में उल्लेख किया गया है कि अपारदर्शिता मान 1 से कम होने पर अपने स्वयं के स्टैकिंग संदर्भ बनाते हैं; दृश्यता के लिए कोई मूल्य नहीं है।
    (काश, मैं इसे प्रदर्शित करने के तरीके के बारे में सोच सकता था, लेकिन मैं दृश्यता: छिपे हुए तत्व के स्टैकिंग प्रसंग को दिखाने के लिए किसी भी माध्यम के बारे में नहीं सोच सकता।)

  5. पर्नाश के उत्तर के अनुसार , अस्पष्टता वाले तत्व: 0 अभी भी स्क्रीन पाठकों द्वारा पढ़े जाते हैं, जबकि दृश्यमान: छिपे हुए तत्व नहीं हैं।

  6. क्रिस नू के उत्तर के अनुसार , दृश्यता में अधिक विकल्प (जैसे पतन) हैं और जो तत्व दिखाई नहीं दे रहे हैं वे अब क्लिक्स का जवाब नहीं देते हैं और उन्हें टैब नहीं किया जा सकता है।

(इस समुदाय को विकि बनाना, क्योंकि मौजूदा उत्तरों से उधार लेना उचित नहीं होगा।)


4

मुझे इस पर पूरी तरह से यकीन नहीं है, लेकिन मुझे लगता है कि स्क्रीन रीडर छिपी हुई दृश्यता के लिए निर्धारित चीजों को नहीं पढ़ते हैं, लेकिन वे अपनी अस्पष्टता की परवाह किए बिना चीजों को पढ़ सकते हैं।

यही एकमात्र अंतर है जिसके बारे में मैं सोच सकता हूं।


फिर इसका परिणाम कैसे होगा? डोम में क्या शामिल है के संदर्भ में शायद? मेरे परीक्षण मामलों से पता चलता है कि मोज़िला दृश्यता को दूर नहीं फेंक रहा है: छिपे हुए तत्व।
क्रिस नू

तत्व सीएसएस शैली की परवाह किए बिना डोम में होंगे, मेरा मतलब है कि स्क्रीन रीडर सॉफ़्टवेयर का उपयोग करने वाले नेत्रहीन उपयोगकर्ताओं के पास अस्पष्टता में पाठ हो सकता है: 0 तत्व उन्हें पढ़ा जाता है, जबकि वे नहीं होते यदि उसी तत्व में दृश्यता होती थी: छिपी। यह वास्तव में एक पहुंच की चिंता है, क्योंकि परिणाम अलग है।
दर्शन

उपयोगी बिंदु, यह दृश्यता को छुपाने के लिए सेट करने के परिणाम में से एक है, लेकिन यह सिर्फ हिमशैल के टिप है। अधिक विशेष रूप से, दृश्यता: छिपा हुआ (प्रतीत होता है) डोम से गायब हो जाता है, जबकि पृष्ठ पर अभी भी इसका लेआउट बनाए रखता है।
निशांत

4

Im पूरी तरह से यकीन नहीं है, लेकिन यह है कि मैं कैसे पार ब्राउज़र पारदर्शिता है:

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

दृश्यता वाले ऑब्जेक्ट: छिपे हुए अभी भी आकार हैं, वे बस दिखाई देते हैं। अस्पष्टता शून्य तत्व अभी भी क्लिक किया जा सकता है और अन्य घटनाओं पर प्रतिक्रिया कर सकता है।


आकार होने और अदृश्य होने का क्या मतलब है?
क्रिस नॉ

@ क्रिस, इसका मतलब है कि वे अभी भी पृष्ठ पर जगह लेते हैं
मितेल सेलर्स

2
अपारदर्शिता का उपयोग यह तय करने के लिए किया जाता है कि पृष्ठभूमि के तत्व को कैसे खींचा गया है। ओपैक्टी सेट के साथ 0 तत्व स्वाभाविक रूप से जगह लेता है लेकिन कुछ भी नहीं खींचा जाता है क्योंकि तत्व का 0% रंग 100% पृष्ठभूमि के साथ मिलाया जाता है जिसके परिणामस्वरूप कुछ भी नया नहीं दिखाई देता है। छिपे हुए और समान मित्रों का मतलब है कि जब ड्राइंग होती है तो तत्व छोड़ दिया जाता है।
एम.पी.

2

एक उपयोगकर्ता नाम बनाते समय जो तत्वों को प्रभावित करता है contenteditable, मैंने देखा कि यदि आप कुछ सेट करते हैं visibility: hidden, तो इनपुट कैरेट वास्तव में इसके साथ सहभागिता नहीं करना चाहता है। जैसे अगर आपके पास है

<div contenteditable><span style='visibility: hidden;'></span></div>

... तो ऐसा लगता है कि यदि आप उस div / अवधि पर ध्यान केंद्रित करते हैं, तो आप वास्तव में उसमें टाइप नहीं कर सकते। जबकि इसके साथ opacity: 0लगता है कि आप कर सकते हैं। मैंने इसका बड़े पैमाने पर परीक्षण नहीं किया है, लेकिन लगा कि यह यहाँ उल्लेख के लायक है क्योंकि इस पृष्ठ पर किसी और ने पाठ इनपुट पर प्रभावों के बारे में बात नहीं की है। यह संभवतः ऊपर वर्णित घटनाओं के सामान से संबंधित लगता है ।



0

गुणों के विभिन्न अर्थ अर्थ हैं। जबकि शब्दार्थ सीएसएस लगता है जैसे यह मूर्खतापूर्ण हो सकता है, जैसा कि अन्य उपयोगकर्ताओं ने उल्लेख किया है कि इसका स्क्रीन पाठकों जैसे उपकरणों पर प्रभाव पड़ता है - जहां शब्दार्थ एक पृष्ठ की पहुंच को प्रभावित करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.