Wie kann man vermeiden IE11 „langsame“ Auswertung von CSS: ungültig und: gültige Pseudo-Selektoren

Question

Ich bin diese Frage bewusst, das zeigt: gültig und: ungültige Pseudo-Selektoren nicht in IE11 arbeiten:

CSS form:valid selector doesn't work in IE11

Und doch gibt es auch in diesem Beispiel von schwimmenden Etiketten:

https://snook.ca/archives/html_and_css/floated-label-pattern-css

hier anders verhält IE11. Zunächst scheint es nicht zu funktionieren. Sie geben die Felder des Formulars und des CSS ein, das angewendet werden soll, nicht, was sich von Chrome und Firefox unterscheidet.

Wenn Sie jedoch das Feld verlassen oder zum nächsten Feld wechseln, wird das CSS auch in IE11 angezeigt. Als ob es "eins hinter" wäre.

Ich bin mit genau diesem Problem in meiner eigenen Implementierung konfrontiert, die nicht öffentlich ist. Gibt es eine Lösung (nicht JS), um dieses merkwürdige Auswertungsverhalten von IE11 zu umgehen?

Answer 1

Nein, und da sie es in Edge behoben haben, werden sie wahrscheinlich nicht in IE11.

Ich habe eine Sache notiert, CSS-Änderungen funktionieren am Eingang selbst, also was ist, wenn Sie so etwas tun?

.field, .field label { 
 
    position: relative; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    font-family: arial; 
 
    font-size: 10px; 
 
} 
 
input { 
 
    position: absolute; 
 
    top: 0; 
 
    border: 1px solid #999; 
 
    padding: 3px 2px; 
 
    transition: top 0.5s; 
 
} 
 
input:focus { 
 
    outline: none; 
 
} 
 

 
form:valid, 
 
input:valid { 
 
    top: 18px; 
 
    transition: top 0.5s; 
 
}

<form> 
 
    <div class="field"> 
 
    <label>First Name</label> 
 
    <div> 
 
     <input type="text" pattern=".+" required="" placeholder="First Name"> 
 
    </div> 
 
    </div> 
 
</form>