爲什麼在Chrome中佔位符僞元素的transition屬性有效？

當我注意到一些奇怪的東西時，我在Codepen（Chrome 59.0.3071）上僞裝::placeholder pseudoelement。（請參閱我的JSFiddle）爲什麼在Chrome中佔位符僞元素的transition屬性有效？

總之，這個CSS不應啓用::placeholder顏色的超過2秒的轉變：

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

使用Firefox瀏覽器，有超過上懸停2秒的時間間隔內沒有色彩過渡（這似乎是正確的根據W3C規範的this section和另一個不同的this section - 遵循::first-line僞元素的線程），但相反，有一個立即顏色過渡到綠色;

但是，使用鉻相同的jsfiddle不顯示在2秒的週期，而根據規格，似乎不正確一個::placeholder顏色過渡。

這是這個版本的Chrome中的錯誤（如果是這樣，它是否被解決？）或者這是對我對CSS缺乏理解的控告？

來源

2017-07-21 The One and Only ChemistryBlob

https://jsfiddle.net/09gc1wvd/我能得到FF 54使用括號做過渡，而不是''::，所以也許規格是錯了嗎？ –

@SamuelCook這些是完全不同的東西！使用括號表示法，您可以選擇原始元素，而不是僞元素。選擇器'input：hover [placeholder]'表示「懸停的'input'元素*，*具有'佔位符屬性」。所以你的例子並不能證明規範是錯誤的w.r.t. _placeholder僞元素_（儘管它們可能是:)。 –

有趣的是，該規範要求':: placeholder'具有'::第一line'的所有屬性，但是當你做同樣的實驗上'::第一line'，既FF和Chrome都沒有變。看[這個小提琴]（https://jsfiddle.net/Auroratide/fr017m9L/1/）並觀察其差異。仔細閱讀規範，我不清楚':: placeholder'屬性的集合是':: first-line'屬性的_superset_還是完全相等。 – Auroratide

我在w3c文檔中找不到它。它看起來像過去在一些較舊的Firefox版本中工作。

與CSS中的解決方法可以是：

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

在Chrome和Firefox其中一期工程。

來源

2017-07-27 08:08:47 Benidorm

我不明白你試圖在這裏傳達的東西。這個問題引用了該規範的最新版本，指出過渡只適用於:: before和::之後的僞元素，而不是:: placeholder僞元素，以及您引用的較舊的草稿 - 而且我不知道爲什麼你選擇了一個較老的草案 - *也*表示它只適用於元素和「：之前和之後：僞元素之後」。你似乎試圖反駁這個問題的主張，但你引用的來源*證實了*事實上，這種方式已經持續了很長時間。 – BoltClock

你其實是對的，我誤解了文檔。我將編輯我的答案，在這裏留下解決方法。 – Benidorm

解決方法是簡單地不指定::佔位符僞元素上的轉換。但這不是問題的要求。 – BoltClock

目前看來，Gecko的和Webkit的實現非常類似，都是。允許的規則集略有不同，並且默認樣式不同，但這些都是明顯可解決的問題。

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

非標準此功能是非標準的，而不是一個標準軌道。不要在面向Web的生產站點上使用它：它不會對每個用戶都適用。實現之間也可能存在大的不兼容性，並且行爲可能在將來發生變化。

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

只適用於該::first-line 僞元素的CSS屬性的子集可以在其選擇使用::placeholder規則使用。

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

但很顯然，Chrome和Firefox都沒有申請轉換爲::first-line，因爲證據是，this JSfiddle我做了。

而且當我在網上尋找答案搜索，我發現transition屬性::placeholder與供應商前綴的舊版本Firefox瀏覽器只是再次確認從規範行是工作，

行爲可能將來改變。

下面是對的jsfiddle的代碼。

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>

來源

2017-07-28 09:28:45

爲什麼在Chrome中佔位符僞元素的transition屬性有效？

回答

相關問題