2013-06-07 9 views
55

सीएसएस में विक्रेता-विशिष्ट छद्म-वर्गों और छद्म तत्वों (सर्वोत्तम क्रॉस-ब्राउज़र कवरेज प्राप्त करने के लिए) के संयोजन का उपयोग करके इनपुट के भीतर placeholder टेक्स्ट शैली बनाना संभव है।विक्रेता-विशिष्ट छद्म-तत्व/कक्षाओं को एक नियम सेट में गठबंधन करना क्यों संभव नहीं है?

ये सभी समान मूल गुण साझा करते हैं (यानी: टेक्स्ट स्टाइल और रंग घोषणाएं)।

हालांकि जब भी मैं अनिवार्य रूप से ब्राउज़र विक्रेता के बावजूद एक ही शैलियों को लागू करना चाहता हूं, तो इन्हें एक साथ अल्पविराम से अलग चयनकर्ता में जोड़ना संभव नहीं है (जैसा कि आप सीएसएस के किसी अन्य भाग के साथ चाहते हैं जहां आप चाहते हैं एक ही शैलियों को साझा करने के लिए दो चयनकर्ता)।

  • input:-moz-placeholder
  • input::-moz-placeholder
  • input:-ms-input-placeholder
  • input::-webkit-input-placeholder

(हालांकि :-moz-placeholderis being deprecated:

एक उदाहरण के रूप में, मैं चार निम्नलिखित चयनकर्ताओं का उपयोग कर प्लेसहोल्डर स्टाइल को लक्षित करने के लिए करते हैं ::-moz-placeholder के पक्ष में यह केवल फ़ायरफ़ॉक्स 1 9 के रिलीज के साथ हुआ था, इसलिए वर्तमान में बेहतर ब्राउज़र-समर्थन के लिए दोनों की आवश्यकता है)।

निराशाजनक बात यह है कि प्रत्येक (समान) शैली को घोषित करने और देने से सीएसएस के भीतर बहुत बार दोहराया जाता है।

तो, यह सुनिश्चित करें कि प्लेसहोल्डर पाठ दाएँ संरेखित और इटैलिक है बनाने के लिए, मैं के साथ खत्म हो जाएगा:

input:-moz-placeholder{ 
    font-style: italic; 
    text-align: right; 
} 
input::-moz-placeholder{ 
    font-style: italic; 
    text-align: right; 
} 
input:-ms-input-placeholder{ 
    font-style: italic; 
    text-align: right; 
} 
input::-webkit-input-placeholder{ 
    font-style: italic; 
    text-align: right; 
} 

क्या मैं सच में करना चाहते हैं उन्हें एक ही अल्पविराम से अलग गठबंधन करने के लिए है नियम इस तरह सेट है:

input:-moz-placeholder, 
input::-moz-placeholder, 
input:-ms-input-placeholder, 
input::-webkit-input-placeholder{ 
    font-style: italic; 
    text-align: right; 
} 

हालांकि, कुछ उचित अवसरों पर इसे करने के बावजूद, यह कभी काम नहीं करता है। यह मुझे चिंतित करता है कि सीएसएस का कुछ मौलिक हिस्सा है जिसे मैं समझ नहीं पा रहा हूं।

क्या कोई इस पर कोई प्रकाश डाल सकता है कि ऐसा क्यों होता है?

उत्तर

60

CSS2.1 states:

चयनकर्ता (भी selectors पर अनुभाग देखें) अप करने के लिए (लेकिन सहित नहीं) सब कुछ पहले बाईं घुंघराले ब्रेस के होते हैं ({)। एक चयनकर्ता हमेशा एक घोषणा ब्लॉक के साथ एक साथ चला जाता है।जब कोई उपयोगकर्ता एजेंट चयनकर्ता को पार्स नहीं कर सकता (यानी, यह मान्य सीएसएस 2.1 नहीं है), तो यह चयनकर्ता और निम्नलिखित घोषणा ब्लॉक (यदि कोई हो) ignore होना चाहिए।

ध्यान दें कि ब्राउज़र के मामले में "यह वैध सीएसएस 2.1 नहीं है" जिसका मतलब है CSS3 का मतलब वास्तव में "यह उपयोगकर्ता एजेंट द्वारा समझा नहीं जाता है"।

चूंकि एक विक्रेता का ब्राउज़र अन्य विक्रेताओं के उपसर्गों को समझ में नहीं आता है, इसलिए इसे ऐसे नियमों को छोड़ना पड़ता है जिनमें छद्म-वर्ग और छद्म-तत्व चयनकर्ताओं में उन अपरिचित उपसर्ग शामिल होते हैं।

क्यों इस तरह के एक नियम के स्थान पर रखा गया था के रूप में कुछ जानकारी के लिए, this answer देखते हैं।


ध्यान दें कि वेबकिट आंशिक रूप से इस नियम का उल्लंघन करने के लिए कुख्यात है: यह कोई परेशानी नहीं नियम जिसका चयनकर्ताओं उपसर्ग के छद्म तत्वों अपरिचित है (इस मामले में ::-moz-placeholder है) को पार्स है। उस ने कहा, आपके संयुक्त नियम में :-moz-placeholder छद्म-वर्ग इसे किसी भी तरह से तोड़ने का कारण बन जाएगा।

+0

धन्यवाद, बहुत अच्छी तरह से और सही समझ में आता है। अभी भी काफी निराशाजनक! बस आपके भविष्य के संदर्भ के लिए: ': -मोज़-प्लेसहोल्डर 'छद्म वर्ग [अपेक्षाकृत हाल ही में अवमूल्यित] [https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder) फ़ायरफ़ॉक्स 1 की शुरूआत के साथ, दुखद रूप से दोनों ': -मोज़-प्लेसहोल्डर' और दोहरे कॉलोन उत्तराधिकारी ':: - मोज़-प्लेसहोल्डर' का उपयोग वर्तमान में सर्वश्रेष्ठ ब्राउज़र कवरेज सुनिश्चित करने के लिए किया जाना चाहिए। – johnkavanagh

12

चश्मा कहते हैं कि यदि कोई उपयोगकर्ता एजेंट किसी चयनकर्ता के हिस्से को नहीं पहचानता है, तो उसे पूरे चयनकर्ता और उसके ब्लॉक को अनदेखा करना होगा।

http://www.w3.org/TR/css3-syntax/#rule-sets

चयनकर्ता (देखें चयनकर्ता मॉड्यूल [चयन करें]) (लेकिन सहित नहीं) अप करने के लिए सब कुछ के होते हैं पहला बाईं घुंघराले ब्रेस ({)। एक चयनकर्ता हमेशा {} -block के साथ एक साथ चला जाता है। जब कोई उपयोगकर्ता एजेंट चयनकर्ता को पार्स नहीं कर सकता (यानी, यह वैध CSS3 नहीं है), तो उसे {} -block को भी अनदेखा करना होगा।

+0

यहां लिंक मेरे लिए काम नहीं करता है (उद्धृत पाठ की ओर अग्रसर नहीं है); मुझे यह एक मिला: । आईएमओ, 'इनपुट: -मोज़-प्लेसहोल्डर, - - किसी भी अन्य-बोगस-चयनकर्ता 'जैसी _parse_ चयनकर्ता सूचियों में कोई समस्या नहीं होनी चाहिए, इसलिए नियम ** ** काम करना चाहिए, और ब्राउज़र जो इसे छोड़ते हैं उल्लंघन में ऐसा करते हैं नियमों का। – Tobias

संबंधित मुद्दे