प्लेसहोल्डर छद्मीकरण पर क्रोम में एक संक्रमण संपत्ति क्यों वैध है?

Question

मैं कोडपेन (क्रोम 59.0.3071) पर ::placeholder छद्म रूप के साथ घूम रहा था जब मैंने कुछ अजीब देखा।

संक्षेप में (कृपया मेरी JSFiddle देखें), इस सीएसएस 2s से अधिक ::placeholder रंग का एक संक्रमण सक्षम नहीं करना चाहिए:

input::placeholder {color:red;transition:2s;} 
input:hover::placeholder {color:green} 

फ़ायरफ़ॉक्स का उपयोग करना, वहाँ होवर होने पर 2 सेकंड अंतराल पर कोई रंग संक्रमण (है यह एक डब्ल्यू 3 सी स्पेक के this section और this section के अनुसार एक अलग के अनुसार सही प्रतीत होता है - ::first-line छद्म-तत्व पर थ्रेड का पालन करें), लेकिन इसके बजाय हरे रंग में तत्काल रंग संक्रमण होता है;

हालांकि, एक ही JSFiddle क्रोम का उपयोग कर 2 सेकंड की अवधि है, जो की विशेषताओं के अनुसार, गलत प्रतीत हो रहा पर एक ::placeholder रंग संक्रमण प्रदर्शित करता है।

क्या यह क्रोम के इस संस्करण में एक बग है (और यदि ऐसा है, तो इसे संबोधित किया जा रहा है?) या क्या यह सीएसएस की समझ की कमी का आरोप है?

Answer 1

मुझे इसे w3c दस्तावेज़ों में नहीं मिला। ऐसा लगता है कि यह कुछ पुराने फ़ायरफ़ॉक्स संस्करणों में काम करता था।

सीएसएस के साथ एक वैकल्पिक हल हो सकता है:

input[placeholder]{color:red; transition:color 2.1s;} 
input:focus[placeholder]{color:blue} 

कौन सा क्रोम और फ़ायरफ़ॉक्स में काम करता है।

Answer 2

वर्तमान में, ऐसा लगता है कि गेको और वेबकिट के कार्यान्वयन बहुत समान हैं। अनुमत नियमों का सेट थोड़ा अलग है और डिफ़ॉल्ट स्टाइल समान नहीं है लेकिन वे स्पष्ट रूप से हल करने योग्य समस्याएं हैं।

-http://lists.w3.org/Archives/Public/www-style/2013Jan/0283.html से

गैर मानक यह सुविधा अमानक है और एक मानकों पटरी पर नहीं है। वेब का सामना करने वाली उत्पादन साइटों पर इसका उपयोग न करें: यह प्रत्येक उपयोगकर्ता के लिए काम नहीं करेगा। कार्यान्वयन के बीच बड़ी असंगतता भी हो सकती है और भविष्य में व्यवहार बदल सकता है।

-https://developer.mozilla.org/en/docs/Web/CSS/::-moz-placeholder

से केवल सीएसएस गुण है कि ::first-line छद्म तत्व पर लागू की सबसेट एक नियम के अपने चयनकर्ता में ::placeholder का उपयोग करने में इस्तेमाल किया जा सकता।

- से https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

लेकिन जाहिरा तौर पर Chrome और Firefox दोनों ::first-line के लिए कोई बदलाव लागू होते हैं, के रूप में स्पष्ट है this JSfiddle के माध्यम से मैं बनाया है।

इसके अलावा, जबकि मैं जवाब के लिए नेट पर खोज रहा था, मैंने पाया कि ::placeholder के लिए transition संपत्ति एक पुराने जो केवल कल्पना से लाइन reconfirms विक्रेता उपसर्गों के साथ Firefox के संस्करण में काम कर रहा था,

व्यवहार हो सकता है भविष्य में बदलें।

जेएसफ़िल्ड के लिए कोड यहां दिया गया है।

input::-webkit-input-placeholder { 
 
    color: red; 
 
    transition: 2s; 
 
} 
 

 
input:hover::-webkit-input-placeholder { 
 
    color: green 
 
} 
 

 
p::first-line { 
 
    color: red; 
 
    transition: 2s; 
 
} 
 

 
p:hover::first-line { 
 
    color: green 
 
}

<input placeholder="Sup"> 
 
<br /> 
 

 
<p style="display:inline-block">This is the first line.</br> Check it out</p>