Firefox Unterstützung von Webkit Verkäufer Präfixe

Question

ich diesen SCSS Code haben:

.gradient-text { 
    color: mix(#cea427, #fbe758); // Fallback to average of 2 colors 
    background: -webkit-linear-gradient(0deg, #cea427, #fbe758); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

Fiddle

Zuerst wollte ich nur diesen Code Arbeit in Webkit-basierten Browsern machen und dann anderen Ansatz hinzu firefox, aber ich habe herausgefunden, dass zumindest die neueste Nacht Firefox diesen Code auch läuft, auch wenn es für Webkit-Anbieter-Präfix ist.

Ich werde mich nicht sorgen, wenn es nur eine Eigenschaft gab, die entweder von Firefox unterstützt werden kann oder nicht. Aber mit 2 Eigenschaften macht mich nervös über die Situation, wo nur einer von ihnen arbeitet. Zum Beispiel, unterstützt -webkit-linear-gradient und nicht unterstützte -webkit-background-clip wird weit abweichen von meinen Erwartungen. Also, gibt es eine Möglichkeit, die Browser-Unterstützung für mehrere CSS-Regeln zu überprüfen und zu Fallback wechseln, wenn mindestens einer von ihnen fehlt?

Und gibt es auch eine Liste der ausländischen Hersteller Präfixe Unterstützung (wie -webkit- Präfix Unterstützung in FF)?

Answer 1

In solchen Situationen finde ich es immer sehr hilfreich, MDN zu überprüfen. In diesem Fall können Sie die Artikel für linear-gradient, background-clip und -webkit-text-fill-color überprüfen. In der Nähe des unteren, gibt es immer einen Abschnitt mit dem Titel Browser-Kompatibilität. Es listet in einer Tabelle Browser auf, die die CSS-Regeln unterstützen und in Fußnoten in Details eingehen. Zum Beispiel über die -webkit-text-fill-color, heißt es, dass

[1] Diese Funktion hinter der Präferenz implementiert layout.css.prefixes.webkit, säumige zu false. Seit Gecko 49 (Firefox 49.0/Thunderbird 49.0/SeaMonkey 2.46) lautet die Voreinstellung standardmäßig true.

Dies sollte Ihre Frage beantworten, warum die -webkit- vorfixierte Version unterstützt wird, und seit wann. Beachten Sie auch, dass der Artikel oben erwähnt

Diese Funktion ist nicht Standard und ist nicht auf einem Standard-Track. Verwenden Sie es nicht auf Websites, die mit dem Internet verbunden sind: Es funktioniert nicht für jeden Benutzer. Es kann auch zu großen Inkompatibilitäten zwischen den Implementierungen kommen und das Verhalten kann sich in Zukunft ändern.

Also: ihr seid gewarnt.

In diesem speziellen Fall können Sie zumindest in Firefox und Chrome mit dem, was Sie tun möchten, durchkommen. Andere Browser ... das ist kniffliger.

Ihre andere Frage ist, ob Sie elegant zu einem Fallback wechseln können, wenn eine Regel nicht unterstützt wird. Leider ist dies in reinem CSS nicht möglich. Es ist möglich, rules that specifically target Chrome oder Firefox zu schreiben, aber ich würde davon abraten, diese zu verwenden. Sie können vielleicht mithilfe von JavaScript nach Unterstützung suchen, aber das ist etwas, von dem ich von ganzem Herzen abraten.

---

Schließlich „gibt es eine Liste der ausländischen Anbieter Präfixe Unterstützung (wie -webkit- Präfix Unterstützung in FF)?“ Sort of. Auch hier ist MDN in der Regel sehr vollständig und aktuell. Ich hoffe, das hilft.