क्या मुझे सीएसएस का उपयोग करना चाहिए: अक्षम छद्म-वर्ग या [अक्षम] विशेषता चयनकर्ता या क्या यह राय का विषय है?

मैं एक अक्षम इनपुट शैली बनाने की कोशिश कर रहा हूँ। मैं उपयोग कर सकता हूं:

.myInput[disabled] { }

या

.myInput:disabled { }

Is the attribute selectया the modern CSS3 way and the way to go fयाward? I used to use the pseudo-class, but I can't find any info on whether they are the old way and won't be suppयाted या whether they're both equal and you can use whatever you like best.

I have no need to suppयाt older browsers (it's an intranet application), so is it:

  • विशेषता नई और बेहतर है
  • छद्म वर्ग अभी भी
  • जाने का तरीका है
  • जो भी आपको सबसे अच्छा लगे
  • दूसरे पर एक का उपयोग करने का तकनीकी कारण है
51

2 उत्तर

क्या विशेषता आधुनिक CSS3 तरीके और अग्रेषित करने का तरीका है?

      
  • विशेषता नई और बेहतर है
  •   

नहीं; असल में, विशेषता चयनकर्ता CSS2 , और disabled </कोड> विशेषता स्वयं HTML 4 के बाद से मौजूद है। जहां तक ​​मुझे पता है, : अक्षम छद्म-वर्ग चयनकर्ताओं 3 में पेश किया गया था </ए>, जो छद्म-वर्ग को नया बनाता है।

      
  • दूसरे पर एक का उपयोग करने का तकनीकी कारण है
  •   

हाँ, कुछ हद तक।

एक विशेषता चयनकर्ता के साथ, आप इस ज्ञान पर भरोसा कर रहे हैं कि आपके द्वारा स्टाइल किए जाने वाले दस्तावेज़ अक्षम फ़ील्ड को इंगित करने के लिए अक्षम विशेषता का उपयोग करते हैं। सैद्धांतिक रूप से, यदि आप कुछ ऐसा स्टाइल कर रहे थे जो HTML नहीं था, अक्षम फ़ील्ड को अक्षम विशेषता का उपयोग करके प्रदर्शित नहीं किया जा सकता है, उदा। यह सक्षम = "झूठा" या ऐसा कुछ हो सकता है। एचटीएमएल के भविष्य के संस्करण भी नए तत्व पेश कर सकते हैं जो सक्षम/अक्षम राज्य का प्रतिनिधित्व करने के लिए विभिन्न विशेषताओं का उपयोग करते हैं; वे तत्व [अक्षम] विशेषता चयनकर्ता से मेल नहीं खाते हैं।

: अक्षम छद्म-वर्ग उस दस्तावेज़ से चयनकर्ता को रद्द कर देता है जिसके साथ आप काम कर रहे हैं। Spec बस यह कहता है कि यह अक्षम तत्वों को लक्षित करता है, और यह कि कोई तत्व सक्षम है, अक्षम है, या न ही,

परिभाषित किया गया है इसके बजाए दस्तावेज़ भाषा द्वारा :

एक सक्षम स्थिति, एक अक्षम राज्य, और उपयोगकर्ता इंटरफ़ेस तत्व का गठन भाषा-निर्भर है। एक सामान्य दस्तावेज़ में अधिकांश तत्व न तो : सक्षम और न ही : अक्षम होंगे।

दूसरे शब्दों में, जब आप छद्म-वर्ग का उपयोग करते हैं, तो UA स्वचालित रूप से पता लगाता है कि कौन से तत्व स्टाइल कर रहे दस्तावेज़ के आधार पर मेल खाते हैं, इसलिए आपको यह बताना नहीं है कि कैसे।

डीओएम के संदर्भ में, मेरा मानना ​​है कि एक डीओएम तत्व पर अक्षम प्रॉपर्टी को सेट करना HTML तत्व के disabled विशेषता को भी संशोधित करता है, जिसका अर्थ है कि डीओएम मैनिपुलेशन के साथ चयनकर्ता के बीच कोई अंतर नहीं है। मुझे यकीन नहीं है कि यह ब्राउज़र-निर्भर है, लेकिन यहां एक पहेली है जो इसे सभी प्रमुख ब्राउज़रों के नवीनतम संस्करणों में प्रदर्शित करता है:

// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;

आप शायद एचटीएमएल स्टाइल होने जा रहे हैं, इसलिए इनमें से कोई भी आपके लिए कोई फर्क नहीं पड़ता है, लेकिन यदि ब्राउज़र संगतता कोई मुद्दा नहीं है तो मैं : सक्षम और : अक्षम </कोड> से अधिक : नहीं ([अक्षम]) और [अक्षम] बस क्योंकि छद्म-वर्ग अर्थशास्त्र लेते हैं कि विशेषता चयनकर्ता नहीं करता है। मैं उस तरह एक शुद्धवादी हूँ।

57
जोड़ा
अच्छा उत्तर! क्या आप कैसे "UA के बारे में अधिक जानकारी दे सकते हैं, स्वचालित रूप से यह पता लगाता है कि कौन से तत्व मेल खाते हैं"? उदाहरण के लिए, एक्सएमएल के एक स्वतंत्र स्वाद के साथ काम करते हुए, : disabled छद्म-वर्ग के साथ चयन करने के लिए तत्वों को कैसे निर्दिष्ट किया जाएगा?
जोड़ा लेखक chharvey, स्रोत
@Chharvey: मुझे यकीन नहीं है कि क्या आप एक्सएसडी के साथ सक्षम/अक्षम सेमेन्टिक्स निर्दिष्ट करने में सक्षम हैं। यह असंभव हो सकता है। कभी-कभी यह व्यवहार ब्राउज़र में दिए गए भाषा (एचटीएमएल, आदि) के लिए बनाया जाता है।
जोड़ा लेखक BoltClock, स्रोत
एचटीएमएल फ़ील्ड तत्व पर अक्षम संपत्ति का प्रभाव भी माना जाना चाहिए। एफएफ और क्रोम (लेकिन आईई नहीं) में, अवरुद्ध नियंत्रणों के अक्षम स्थिति (: disabled द्वारा प्रतिबिंबित) लागू होगा, हालांकि न तो सामग्री विशेषता मौजूद होगी और न ही आईडीएल विशेषता (संपत्ति) सच हो। jsfiddle.net/UH2S4/12 देखें
जोड़ा लेखक Alohci, स्रोत
हुह। इसके बारे में उस तरीके से कभी नहीं सोचें। लेकिन यह सच है कि मैंने एमएक्सएमएल (फ्लैश यूआई भाषा) के साथ-साथ एचटीएमएल (हालांकि पूर्व में शायद ही कभी उपयोगी कुछ भी समर्थित है)
जोड़ा लेखक Katana314, स्रोत

यह पता चला है कि इंटरनेट एक्सप्लोरर 10 और 11 कुछ तत्वों पर : disabled स्यूडोक्लस को पहचानने में विफल रहता है और केवल विशेषता चयनकर्ता वाक्यविन्यास के साथ ठीक काम करता है।

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }
<form>
:disabled

[disabled]
</form>
</div> </div>

आईई में प्रस्तुत किए गए कोड को इस तरह से प्रस्तुत किया गया है:

जब तक आप केवल इनपुट तत्वों को स्टाइल कर रहे हों, आपको किसी भी तरह से ठीक होना चाहिए। फिर भी उन सभी ब्राउज़रों में अंतिम परिणाम की जांच करना एक अच्छी सलाह है, जिन्हें आप समर्थन देना चाहते हैं।

11
जोड़ा
@ ट्रीसिस धन्यवाद, अपडेट देखें।
जोड़ा लेखक GOTO 0, स्रोत
आईई का कौन सा संस्करण?
जोड़ा लेखक trysis, स्रोत
इससे आपके उदाहरण में कोई फर्क नहीं पड़ता है, लेकिन disabled जैसे गुण उनके नाम, खाली स्ट्रिंग या कुछ भी नहीं लेते हैं, यहां तक ​​कि = के बिना भी। यहां, disabled = "true" डालने के बजाय, आप disabled = "disabled" या बस disabled डाल देंगे। यही कारण है कि आईई असफल रहा है, हालांकि मुझे शक है।
जोड़ा लेखक trysis, स्रोत
मैं नवीनतम माइक्रोसॉफ्ट एज (25.10586.672.0) चला रहा हूं और यह अन्य ब्राउज़रों के समान काम करता है। यदि संदेह है, तो मैं इसका उपयोग कर सकता हूं: caniuse.com/#feat=css-sel3
जोड़ा लेखक Saborknight, स्रोत