In jüngerer Zeit habe ich Fragen mit dem Tag "Webkit" gesehen. Bei solchen Fragen handelt es sich normalerweise um webbasierte Fragen zu CSS, jQuery, Layouts, Cross-Browers-Kompatibilitätsproblemen usw.
Was ist dieses "Webkit" und in welcher Beziehung steht es zu CSS? Ich habe auch viele -webkit-...
Eigenschaften im Quellcode für verschiedene Websites bemerkt . Sind diese beiden verwandt?
Aktualisieren
Nach den bisherigen Antworten ... WebKit ist eine HTML / CSS-Webbrowser-Rendering-Engine für Safari / Chrome. Gibt es solche Engines für IE / Opera / Firefox und was sind die Unterschiede, Vor- und Nachteile der Verwendung übereinander? Kann ich beispielsweise WebKit-Funktionen in Firefox verwenden?
Die ultimative Frage ... Wird WebKit vom IE unterstützt?
Update 2
Alle gängigen Browser verwenden unterschiedliche Rendering-Engines. Ich denke, dies ist ein großer Grund, warum es so viele Probleme mit der Cross-Browser-Kompatibilität gibt!
Gibt es also eine Art Projekt oder Bewegung für eine Standard-Rendering-Engine, die ALLE Browser verwenden werden? Beendet HTML5 die Probleme mit der browserübergreifenden Kompatibilität?
quelle
Antworten:
Jeder Browser wird von einer Rendering-Engine unterstützt, um die HTML / CSS-Webseite zu zeichnen.
IE → Dreizack(abgesetzt)EdgeHTML (Reinigungsgabel von Trident)(Edge wechselte 2019 zu Blink )Oper → Presto(verwendet Presto seit Februar 2013 nicht mehr, betrachten Sie Opera = Chrome, daher Blink heutzutage)Eine Liste der Vergleiche in verschiedenen Bereichen finden Sie unter Vergleich von Webbrowser-Engines .
Nicht nativ.
quelle
-moz-
Eigenschaften nicht unterstützt ... wie kann ich den IE dazu bringen, CSS3-Stile zu akzeptieren?Ergänzung zu dem, was @KennyTM gesagt hat:
-ms
EdgeHTML→ Blinken 3-ms
-moz
Presto→ Blinken 1-o
(Presto) und-webkit
(Blink)-webkit
WebKit→ Blinken 2-webkit
1) Am 12. Februar 2013 gibt Opera (Version 15+) bekannt, dass sie von ihrer eigenen Engine Presto zu WebKit namens Blink wechseln .
2) Am 3. April 2013 gibt Google (Chrome Version 28+) bekannt, dass sie die WebKit-basierte Blink- Engine verwenden werden.
3) Am 6. Dezember 2018 gibt Microsoft (Microsoft Edge 79+ Stable) bekannt, dass sie die WebKit-basierte Blink- Engine verwenden werden.
quelle
-msie
,-o
,-webkit
; Would Webkit ignorieren-moz
,-o
,-msie
; etc...?Webkit ist eine Webbrowser-Rendering-Engine, die von Safari und Chrome verwendet wird (unter anderem, aber dies sind die beliebtesten).
Das
-webkit
Präfix für CSS-Selektoren sind Eigenschaften, die nur von dieser Engine verarbeitet werden sollen und die den-moz
Eigenschaften sehr ähnlich sind. Viele von uns hoffen, dass dies wegfällt, zum Beispiel-webkit-border-radius
durch den Standard ersetzt wirdborder-radius
und Sie nicht mehrere Regeln für dasselbe für mehrere Browser benötigen . Dies ist wirklich das Ergebnis von "Vorspezifikations" -Funktionen, die die Standardversion nicht beeinträchtigen sollen, wenn es darum geht.Für Ihr Update: ... nein, es hat nicht wirklich mit IE zu tun. IE verwendet mindestens vor 9 eine andere Rendering-Engine namens Trident .
quelle
-webkit-
also in wie Firefox für das erweiterte Rendern von CSS3-Funktionen verwendet werden?-moz
(für Mozilla), es werden-webkit
Rollen beim Parsen von Stilen ignoriert :)Dies wurde beantwortet und akzeptiert, aber wenn sich noch jemand fragt, warum die Dinge heute etwas durcheinander sind, müssen Sie Folgendes lesen:
http://webaim.org/blog/user-agent-string-history/
Es gibt eine gute Vorstellung davon, wie sich Gecko, Webkit und andere wichtige Rendering-Engines entwickelt haben und was zum aktuellen Status von durcheinandergebrachten User-Agent-Strings geführt hat.
Zitieren des letzten Absatzes für TL; DR-Zwecke:
quelle
-webkit-
ist einfach eine Gruppe, in die Chrome-, Safari-, Opera- und iOS-Browser passen. Sie alle haben einen gemeinsamen Vorfahren, so dass ihre Fähigkeiten / Einschränkungen (wenn es um das Ausführen von CSS und Javascript geht) häufig auf die Gruppe beschränkt sind.Ein Entwickler wird
-webkit-
gefolgt von einem Code platzieren, was bedeutet, dass der Code nur in Chrome-, Safari-, Opera- und iOS-Browsern ausgeführt wird. Hier ist eine vollständige Liste:-webkit-
(Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Browser (einschließlich Firefox für iOS); im Grunde jeder WebKit-basierte Browser)-moz-
(Feuerfuchs)-o-
(Alte Pre-WebKit-Versionen von Opera)-ms-
(Internet Explorer und Microsoft Edge)quelle
So'ne Art. Schauen Sie sich Chrome Frame an , ein Plugin für Internet Explorer, mit dem die Webkit-Engine verwendet wird. Die einzige Besonderheit ist, dass Sie Ihre Besucher davon überzeugen müssen, das Plugin zu installieren.
Aktualisieren
Chrome Frame wird nicht mehr gewartet oder unterstützt.
quelle
Quelle Wikipedia
Weitere Informationen zu Layout-Engines finden Sie hier
quelle
Webkit ist eine HTML-Rendering-Engine, die von Chrome und Safari verwendet wird.
Es unterstützt eine Reihe von benutzerdefinierten CSS-Eigenschaften, denen ein Präfix vorangestellt ist
-webkit-
.quelle
Webkit ist die Rendering-Engine, die in den gängigen Browsern Safari und Chrome sowie in anderen verwendet wird.
quelle
Webkit ist die HTML / CSS-Rendering-Engine, die im Safari-Browser von Apple und in Chrome von Google verwendet wird. CSS-Wertepräfixe mit -webkit- sind Webkit-spezifisch, normalerweise CSS3 oder andere nicht standardisierte Funktionen.
Um Update 2 zu beantworten, ist w3c der Körper, der versucht, diese Dinge zu standardisieren. Sie schreiben die Regeln. Dann schreiben Programmierer ihre Rendering-Engine, um diese Regeln zu interpretieren. Im Grunde sagt w3c, dass DIVs "auf diese Weise" funktionieren sollten. Der Engine-Writer verwendet diese Regel dann, um seinen Code zu schreiben. Fehler oder Fehlinterpretationen der Regeln verursachen Kompatibilitätsprobleme.
quelle
Ein häufiges Problem, auf das ich als Website-Designer gestoßen bin, ist, dass viele Leute IE6 + verwenden. Normalerweise keine große Sache, außer in CSS muss ich mehrere Rendering-Syntax hinzufügen, um jede Anfrage pro Browser zu analysieren. Es wäre sehr schön, wenn es ein universelles Rendering-Setup für CSS gäbe, das der IE genauso einfach lesen kann wie Chrome / FF / Opera und Webkit. Das Problem mit dem Internet Explorer ist, dass wenn ich NICHT ALLE richtigen CSS-Stile und Renderings verwende, meine Websites mit jedem Browser außer dem Internet Explorer gut aussehen und funktionieren. Dies kann zu einem unglücklichen, eingefleischten IE-Kunden führen.
Beispiel ist folgendes: Angenommen, ich benötige einen grauen Rand von 1 Pixel mit einem Randradius von 10%. Für Chrome und andere verwende ich die Webkit-Eigenschaft. Für IE muss ich jetzt separate CSS-Stile hinzufügen, indem ich die einfachen alten CSS-Werte "border: 1px solid # E5E5E5" und "border-radius: 10%" verwende. Ein positives Ergebnis ist nicht immer für alle IE-Browserversionen garantiert, aber zum größten Teil funktioniert diese Methode für mich und viele andere einwandfrei.
quelle
Obwohl dies ein älterer Beitrag ist, gibt es auch eine andere Methode zum Rendern für ältere Versionen von Internet Explorer. -webkit Als CSS-Vendor-Präfix können Sie auch einige JS-Anwendungen herunterladen und im unteren Bereich des HTML-HEAD platzieren.
Versuchen Sie es mit Modernizr, HTML5 Shiv und Respond.js. Dies sind erstaunliche IE-kompatible Polyfill-Skripte, die Polyfills verwenden, und andere Ressourcen, mit denen HTML5-Elemente in IE9 und darunter besser gerendert werden können.
Um diese Polyfills zu verwenden, fügen Sie einfach eine boolesche HTML-Logik hinzu, um sie zu platzieren, WENN der Browser kleiner als die gewünschte IE-Version ist. Beispielcode ist:
quelle
Eine gute Dokumentation über
WebEngines
insbesonderewebKit
und seine Entwickler finden Sie unter: WebKitquelle
Webkit ist die Rendering-Engine, die in den gängigen Browsern Safari und Chrome sowie in anderen verwendet wird. Jeder Browser wird von einer Rendering-Engine unterstützt, um die HTML / CSS-Webseite zu zeichnen.
IE → Trident (nicht mehr verfügbar) Edge → EdgeHTML (Bereinigungsgabel von Trident) Firefox → Gecko Opera → Presto (verwendet Presto seit Februar 2013 nicht mehr, betrachten Opera = Chrome heutzutage) Safari → WebKit Chrome → Blink (eine Abzweigung von WebKit) .
quelle