Почему свойство перехода на псевдоэлементе заполнителя действует в Chrome?

Я смотрел с псевдоэлементом ::placeholder на Codepen (Chrome 59.0.3071), когда заметил что-то странное. (см. мой JSFiddle)

Вкратце, этот CSS не должен включать переход цвета ::placeholder через 2s:

Используя Firefox, переход цвета на 2-секундный интервал при наведении не происходит (это выглядит правильно в соответствии с в этом разделе W3C spec и этот раздел другого - следуйте за потоком в псевдоэлемент ::first-line), но вместо этого происходит немедленный переход цвета к зеленый;

Однако, тот же JSFiddle с использованием Chrome показывает переход цвета ::placeholder в течение 2 секунд, что, согласно спецификациям, кажется неправильным.

Является ли это ошибкой в этой версии Chrome (и если да, то она адресована?) или это обвинение в моем непонимании CSS?

Ответы

Ответ 1

В настоящее время кажется, что реализации Gecko и Webkit очень аналогичный. Набор разрешенных правил несколько отличается, и стилизация по умолчанию - это не одно и то же, но это явно разрешимые проблемы.

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

Нестандартный Эта функция нестандартная и не соответствует стандартам трек. Не используйте его на производственных площадках, обращенных к Интернету: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализации и поведение могут измениться в будущем.

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

Только подмножество свойств CSS, относящихся к ::first-lineпсевдоэлемент может использоваться в правиле с использованием ::placeholder в его селектор.

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

Но, по-видимому, и Chrome, и Firefox не применяют никаких переходов для ::first-line, как это видно из этого 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>

Ответ 2

Я не мог найти его в документах w3c. Похоже, что он работал в некоторых старых версиях Firefox.

Обходной путь с помощью css может быть:

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

Что работает в Chrome и Firefox.