: अनिश्चित - सीएसएस-ट्रिक्स

:indeterminateCSS में एक छद्म श्रेणी का चयनकर्ता है जिसका नाम उस राज्य के लिए है जिसे न तो चेक किया गया है और न ही अनचेक किया गया है। यह राज्य के बीच में है कि हम "हाँ" और "नहीं" विकल्पों के बीच "शायद" पर विचार कर सकते हैं। राज्य पूरी तरह से निर्धारित नहीं है, इसलिए नाम: अनिश्चित।

अनिश्चित चेकबॉक्स

सबसे आम जगह जिसे हम खेल में देख सकते हैं वह एक रूप में चेकबॉक्स के साथ है:

:indeterminateजब यह चेकबॉक्स में खुदाई करने से पहले ध्यान देने योग्य है कि यह CSS में कैसे चुना जा सकता है, इसके बारे में कुछ विचित्र बातें हैं।

इसे HTML में सेट नहीं किया जा सकता है

सबसे पहले, HTML में एक अनिश्चित स्थिति में चेकबॉक्स सेट करने का कोई तरीका नहीं है। ऊपर दिए गए प्रारंभिक उदाहरण में, हम HTML में स्पष्ट रूप से ऐसा कहकर जाँच करने के लिए दूसरा चेकबॉक्स सेट करने में सक्षम थे।

केवल यह अनुमान करना तर्कसंगत है कि हम एक अनिश्चित स्थिति के साथ ऐसा कर सकते हैं:

लेकिन, दुख की बात है कि ऐसा नहीं है इसलिए अपने कोड में उस अंतिम उदाहरण का उपयोग न करें।

इस लेखन के समय, जावास्क्रिप्ट एक चेकबॉक्स पर एक अनिश्चित स्थिति की स्थापना के लिए एकमात्र साधन है। इसके बारे में जाने का एक तरीका आईडी द्वारा एक विशिष्ट चेकबॉक्स का चयन करना है:

var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

ऊपर दिए गए उदाहरण की सीमा यह है कि चेकबॉक्स एक अनिश्चित स्थिति में वापस नहीं आ सकता है क्योंकि यह दूसरे राज्य में बदल जाता है। इसके बजाय, हम जाँच, अनियंत्रित और अनिश्चित राज्यों के बीच घूम सकते हैं:

function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )

CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन रोटेट चेकबॉक्स स्टेट्स देखें।

यह विशुद्ध रूप से एक दृश्य अवस्था है

एक चेकबॉक्स अभी भी केवल गिना जाता है कि क्या यह चेक किया गया है या अनियंत्रित है, चाहे हमने एक अनिश्चित स्थिति को सक्रिय किया हो। दूसरे शब्दों में, अनिश्चितता चेकबॉक्स के वास्तविक मूल्य को मास्क करती है और इसके स्वयं के मूल्य के रूप में नहीं गिना जाता है।

यह डिफ़ॉल्ट रूप से संपूर्ण ब्राउज़र में असंगत है

संख्यात्मक इनपुट की तरह, एक अनिश्चित स्थिति हर ब्राउज़र में लगातार शैली नहीं करती है।

हालांकि, कुल मिलाकर, यहाँ अनिश्चित चेकबॉक्स का समर्थन है।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
२।	3.6	६	१२	६

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	4.4	12.2-12.4

अनिश्चित रेडियो बटन

:indeterminate समूह स्तर पर रेडियो बटन पर लागू किया जा सकता है, जहां कोई विकल्प नहीं चुने जाने पर पूरे समूह को एक अनिश्चित स्थिति में माना जाता है।

CodePen पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा पेन इंडर्मिनेट रेडियो बटन देखें।

हमें यह ध्यान रखना चाहिए कि :indeterminateउपयोगकर्ता अनुभव के अनुसार यह सबसे अच्छा विकल्प नहीं हो सकता है।

अनिश्चितकालीन प्रगति बार्स

हम :indeterminateउस तत्व पर भी लागू कर सकते हैं जहां HTML में कोई मूल्य स्पष्ट रूप से सेट नहीं किया गया है। जावास्क्रिप्ट के लिए कोई आवश्यकता नहीं है, लेकिन तत्व को स्टाइल करना एक मुश्किल काम है जिसे क्रॉस-ब्राउज़र संगतता के लिए बहुत सारे काम और विचार की आवश्यकता होती है।

CodePen पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा पेन इंडिनेटिनेट प्रोग्रेस एलिमेंट देखें।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
३ ९	५१	1 1	। ९	10.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	10.3

अधिक जानकारी

• सीएसएस सेलेक्टर्स लेवल 4 वर्किंग ड्राफ्ट
• अनिश्चित चेकबॉक्स
• अनिश्चित रेडियो बटन
• HTML5 प्रगति तत्व