为什么占位符伪元素上的过渡属性在Chrome中有效? [英] Why is a transition property on the placeholder pseudoelement valid in Chrome?

问题描述

当我发现奇怪的东西时，我正忙着在Codepen(Chrome 59.0.3071)上使用::placeholder伪元素. (请参阅我的 JSFiddle )

I was goofing around with the ::placeholder pseudoelement on Codepen (Chrome 59.0.3071) when I noticed something odd. (please see my JSFiddle)

简而言之，此CSS不应在2秒内启用::placeholder颜色的过渡:

In brief, this CSS should not enable a transition of the ::placeholder color over 2s:

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

使用Firefox，悬停在2秒钟的间隔内没有颜色转换(根据本部分和此的另一部分-跟随线程到::first-line伪元素)，但立即有一个颜色过渡为绿色；

Using Firefox, there is no color transition over a 2 second interval on hover (this appears to be correct according to this section of a W3C spec and this section of a different one - follow the thread to the ::first-line pseudo-element), but instead there is an immediate color transition to green;

但是，使用Chrome的同一JSFiddle 确实在2秒钟的时间内显示了::placeholder颜色过渡，根据规格，这似乎是不正确的.

However, the same JSFiddle using Chrome does show a ::placeholder color transition over a period of 2 seconds, which according to the specs, appears to be incorrect.

这是此版本的Chrome中的错误(如果是，是否已解决?)还是因为我对CSS缺乏了解而提出的起诉?

推荐答案

目前，Gecko和Webkit的实现似乎非常 相似的.允许的规则集略有不同，并且 默认样式并不相同，但是这些显然是可以解决的问题.

Currently, it seems that Gecko's and Webkit's implementations are very similar. The set of allowed rules are slightly different and the default styling isn't the same but those are clearly solvable issues.

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

非标准此功能是非标准的，不是标准的 追踪.不要在面向Web的生产站点上使用它: 为每个用户服务.两者之间也可能存在很大的不兼容性 的实现方式和行为将来可能会改变.

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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

仅适用于::first-line的CSS属性的子集 伪元素可以在规则中使用::placeholder的规则中使用 选择器.

Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.

-来自 https ://developer.mozilla.org/en-US/docs/Web/CSS/::占位符

但是显然，Chrome和Firefox都没有为::first-line应用任何过渡，这可以通过此JSfiddle 显而易见. a>我做了.

But apparently both Chrome and Firefox apply no transitions for ::first-line, as is evident through this JSfiddle I made.

另外，当我在网上搜索答案时，我发现::placeholder的transition属性在具有供应商前缀的Firefox较旧版本中运行，该前缀只是重新确认了规范中的行

Also while I was searching on the net for answers, I found that the transition property for ::placeholder was working in an older version of Firefox with vendor prefixes which simply reconfirms the line from spec,

未来的行为可能会改变.

behaviour may change in the future.

这是JSfiddle的代码.

Here's the code for the 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>

这篇关于为什么占位符伪元素上的过渡属性在Chrome中有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！