<edit> Ich habe tatsächlich geahnt, dass dies passieren würde, aber nur wenige Sekunden nach der Veröffentlichung habe ich eine Flagge für "mögliches Duplikat" bekommen, was nicht angemessen ist! Diese Frage bezieht sich auf CSS-Werte und NICHT auf CSS-Eigenschaftsnamen und es handelt sich also nicht um eine Häufung von dies oder diese Frage !!! Es ist auch nicht eine Art von diesem , weil ich bin nach einer generischen Lösung fragen.
Wenn Sie immer noch nicht überzeugt oder unsicher sind, worum es in diesem Beitrag geht, werfen Sie vielleicht einen Blick auf das Ende dieser Frage: "Wonach ich nicht suche" und "Wer bekommt den Job nicht" </edit>
Gibt es eine Möglichkeit, bei Bedarf einen geeigneten clientseitigen CSS-Wert mit Herstellervorgaben über JavaScript zu setzen?
zum Beispiel: background: -prefix-linear-gradient{...}
Ich würde gerne eine generische Lösung erhalten, wie man clientseitige CSS-Werte mit Herstellervorgaben über JavaScript setzt. Welches spezifische Herstellerpräfix (% co_de%, -webkit- , -ms- , etc.) das ist wohlbekannt und so gar nicht im Rahmen meiner Frage. Diese Frage bezieht sich auf diese Clientseite und nicht als Teil des Buildprozesses.
Aber ich freue mich auch über Hinweise auf
Wie Sie sehen können, habe ich bereits selbst eine Antwort gegeben. Aber ich suche immer noch nach besseren Lösungen, da Autoprefixer mit einer hohen Nutzlast von ungefähr 626 KB kommt!
Oder stellen Sie sich etwas wie
vor %Vor%sollte etwas wie
sein %Vor%stattdessen.
zum Beispiel: -moz-
Das Thema, wie Verkäufer-Präfixe auf CSS-Property-Namen zu verwenden sind, wird genug diskutiert (und nicht das, wonach ich suche).
HINWEIS: Mir ist auch völlig klar, dass pre- & amp; Postprozessoren, die als Teil des Build-Prozesses verwendet werden. Mein gesamter CSS-Workflow basiert auf "Grunt: SASS: Autoprefixer", also dazu keine Vorschläge!
Um das zu tun, was Sie fragen, benötigen Sie einen Verweis, um den aktuell verwendeten Browser mit den benötigten Präfixen zu vergleichen. wie caniuse . Oder Sie könnten einige Mixins mit der CSS-Regel @supports erstellen, aber das könnte sein mehr Ärger als es wert ist.
Es gibt eine bestehende Lösung, autoprefixer , aber Sie müssten postcss verwenden. Die README enthält Beispiele für verschiedene Build-Tool-Plugins. Ich benutze SCSS und Autoprefixer, und ich lebe den Traum.
Sie können document.styleSheets iterieren, "cssRules" und "style" Eigenschaft von CSSStyleDeclaration , wenn der Wert der Eigenschaft mit einer Variablen übereinstimmt, z. B. RegExp , verwenden Sie .replace() , um ein Präfix voran zu stellen Wert
Wenn Sie nicht sicher sind, ob dieses Thema für Sie relevant ist, lesen Sie bitte zuerst den Abschnitt "Empfehlung | Wichtige Hinweise für Anfänger" am Ende dieser Antwort.
Dank an Ari für seine Antwort , die mich zumindest in die richtige Richtung wies. Diese Lösung nutzt den Autoprefixer , den die meisten von Ihnen wahrscheinlich zusammen mit einem Task-Runner als Teil Ihres Build-Setups verwenden ( was auch für mich gilt).
Leider konnte ich keine Informationen zur Verwendung von Autoprefixer als clientseitige Standalone-Version erhalten. Also habe ich mir einfach Webseiten angesehen, von denen ich weiß, dass sie die gleiche Aufgabe erledigen, die ich auch erreichen möchte (nämlich Autoprefixer | UI , CodePen , Sassmeister und JS Bin ).
Die beste Quelle dafür war der offizielle Autoprefixer | UI und alles in allem - eigentlich war es keine große Sache. Also hier gehen wir mit einem sehr grundlegenden Modell, das in der Lage ist zu veranschaulichen ...
Eigentlich ist autoprefixer.process( sInput ).css alles was wir brauchen.
Aber lassen Sie dies zu einem realistischeren Anwendungsszenario führen.
linear-gradient , radial-gradient usw.) und nicht CSS-Property-Namen (zB background ). Sehr wahrscheinlich ist dies der Fall für Plugin-Autoren, die auf browserübergreifende CSS3-Funktionen zurückgreifen. PS: Nachdem ich alle Ressourcen überprüft habe, wurde mir klar, dass Ссылка auch in die richtige Richtung zeigt.
Tags und Links javascript html css3 client-side vendor-prefix