Warum ist eine Übergangseigenschaft für das Platzhalter-Pseudoelement in Chrome gültig?

Ich habe mit dem Pseudoelement ::placeholder auf Codepen (Chrome 59.0.3071) herumgespielt, als ich etwas merkwürdiges bemerkte.Warum ist eine Übergangseigenschaft für das Platzhalter-Pseudoelement in Chrome gültig?

In Kürze (bitte meine JSFiddle sehen), sollte diese CSS nicht einen Übergang der ::placeholder Farbe über 2s aktivieren:

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

Firefox verwenden, gibt es keinen Farbübergang über einen Intervall von 2 Sekunden auf schweben (dies scheint nach this section einer W3C-Spezifikation und this section eines anderen korrekt zu sein - folgen Sie dem Thread zum Pseudoelement ::first-line, aber stattdessen gibt es einen sofortigen Farbübergang nach grün;

jedoch die gleiche JSFiddle mit Chrome besagt einen ::placeholder Farbübergang über einen Zeitraum von 2 Sekunden, was die Spezifikationen entsprechend, nicht korrekt zu sein scheint.

Ist das ein Fehler in dieser Version von Chrome (und wenn ja, wird es angesprochen?) Oder ist dies eine Anklage wegen meines fehlenden Verständnisses von CSS?

Quelle

2017-07-21 The One and Only ChemistryBlob

https://jsfiddle.net/09gc1wvd/ konnte ich 54 FF bekommen Übergänge zu tun Klammern anstatt '' ::, so vielleicht die Angaben falsch sind? –

@SamuelCook das sind ganz andere Dinge! Mit der Klammernotation wählen Sie das ursprüngliche Element und kein Pseudoelement aus. Der Selektor 'input: hover [placeholder]' bedeutet "das' input'-Element, das schwebt * und * hat ein 'placeholder'-Attribut ". So beweist Ihr Beispiel nicht, dass die Spezifikationen falsch sind w.r.t. _placeholder pseudo element_ (obwohl sie wahrscheinlich :) sind. –

Interessanterweise hat die Spezifikation ":: Platzhalter" alle Eigenschaften von ':: first-line', aber wenn Sie das gleiche Experiment an' :: first-line' durchführen, haben sowohl FF als auch Chrome keinen Übergang. Siehe [diese Geige] (https://jsfiddle.net/Auroratide/fr017m9L/1/) und beobachte den Unterschied. Wenn ich die Spezifikation sorgfältig lese, ist es mir unklar, ob die Menge von ':: Platzhalter'-Eigenschaften ein _Superset_ der' :: Erstlinien'-Eigenschaften oder genau gleich ist. – Auroratide

Ich konnte es nicht in der W3C-Dokumentation finden. Es scheint, als ob es in einigen älteren Firefox-Versionen funktioniert.

Eine Abhilfe mit CSS könnte sein:

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

, die in Chrome und Firefox funktioniert.

Quelle

2017-07-27 08:08:47 Benidorm

Ich verstehe nicht, was Sie hier vermitteln möchten. Die Frage zitiert die neueste Version der Spezifikation mit der Aussage, dass Übergänge nur für :: before und :: after Pseudo-Elemente gelten, nicht für das :: placeholder Pseudo-Element und den älteren Entwurf, den du zitierst - und ich weiß es nicht Warum haben Sie einen älteren Entwurf gewählt - * auch * sagt, dass es nur für Elemente gilt und ": vor und: nach Pseudoelementen". Sie scheinen zu versuchen, die Behauptung in der Frage zu widerlegen, aber die Quelle, die Sie anführen, bestätigt *, dass es in der Tat viel länger so war. – BoltClock

Sie haben eigentlich recht, ich habe die Dokumentation falsch gelesen. Ich werde meine Antwort bearbeiten, lassen Sie den Workaround hier. – Benidorm

Die Problemumgehung besteht darin, einfach keine Übergänge für das :: Platzhalter-Pseudoelement anzugeben. Aber darum geht es nicht. – BoltClock

Derzeit scheint es, dass die Implementierungen von Gecko und Webkit sind sehr ähnlich wie . Die Menge der erlaubten Regeln ist etwas anders und der Standardstyling ist nicht derselbe, aber das sind eindeutig lösbare Probleme.

- Diese Funktion ist Nicht-Standard- Von http://lists.w3.org/Archives/Public/www-style/2013Jan/0283.html

Nicht-Standard und ist nicht auf Standards Spur. Verwenden Sie es nicht auf Produktionsstandorten mit Blick auf das Web: Es wird nicht für jeden Benutzer arbeiten. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.

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

nur die Teilmenge von CSS-Eigenschaften, die das ::first-line Pseudoelement anwenden kann in der Regel ::placeholder in seinem Selektor verwendet werden.

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

Aber anscheinend beide Chrome und Firefox für ::first-line keine Übergänge anwenden, wie offensichtlich ist durch this JSfiddle machte ich.

Auch während ich im Netz nach Antworten gesucht, fand ich, dass die transition Eigenschaft für ::placeholder wurde in einer älteren Version von Firefox mit Lieferanten Präfixen arbeitet, die einfach die Linie von spec bestätigt erneut,

Verhalten kann Veränderung in der Zukunft.

Hier ist der Code für die 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>

Quelle

2017-07-28 09:28:45

Warum ist eine Übergangseigenschaft für das Platzhalter-Pseudoelement in Chrome gültig?

Antwort

Verwandte Themen