Was ist WebKit und wie hängt es mit CSS zusammen?

In letzter Zeit habe ich Fragen mit dem Stichwort “webkit” gesehen. Solche Fragen sind in der Regel webbasierte Fragen zu CSS, jQuery, Layouts, Cross-Browers-Kompatibilitätsproblemen usw.

Was ist das “Webkit” und wie verhält es sich mit CSS? Ich habe auch eine Menge von -webkit-... Eigenschaften im Quellcode für verschiedene Websites bemerkt. Sind diese zwei miteinander verwandt?

Aktualisieren

Aus 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 eines über dem anderen? Kann ich zum Beispiel WebKit-functionen in Firefox verwenden?

Die ultimative Frage … Wird WebKit vom IE unterstützt?

Update 2

Alle gängigen Browser verwenden unterschiedliche Rendering-Engines. Ich denke, das ist ein großer Grund, warum es so viele Cross-Browser-Kompatibilitätsprobleme gibt!

Also, gibt es irgendeine Art von Projekt oder Bewegung zu einer Standard-Rendering-Engine, die ALLE Browser benutzen werden? Wird HTML5 die Cross-Browser-Kompatibilitätsprobleme beenden?

Update: WebKit ist also anscheinend 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 eines über dem anderen? Kann ich zum Beispiel WebKit-functionen in Firefox verwenden?

Jeder Browser wird von einer Rendering-Engine unterstützt, um die HTML / CSS-Webseite zu zeichnen.

  • IE → Trident (abgesetzt)
  • Edge → EdgeHTML (Aufräumgabel von Trident)
  • Firefox → Gecko
  • Opera → Presto (benutzt Presto seit Februar 2013 nicht mehr, betrachte Opera = Chrome heutzutage)
  • Safari → WebKit
  • Chrome → Blinken (eine Verzweigung von WebKit).

Unter Vergleichen von Webbrowser-Engines finden Sie eine Liste von Vergleichen in verschiedenen Bereichen.

Die ultimative Frage … ist WebKit unterstützt von IE?

Nicht nativ.

Ergänzung zu dem, was @KennyTM gesagt hat:

  • IE
    • Motor: Dreizack
    • CSS-Präfix: -ms
  • Kante
    • Motor: EdgeHTML
    • CSS-Präfix: -ms
  • Feuerfuchs
    • Motor: Gecko
    • CSS-Präfix: -moz
  • Oper
    • Motor: Presto → Blinken 1
    • CSS-Präfix: -o (Presto) und -webkit (Blink)
  • Safari
    • Maschine: WebKit
    • CSS-Präfix: -webkit
  • Chrom
    • Engine: WebKit → Blinken 2
    • CSS-Präfix: -webkit

1) Am 12. Februar 2013 kündigt Opera (Version 15+) an , sich von ihrem eigenen Motor Presto zu WebKit namens Blink zu bewegen.

2) Am 3. April 2013 gibt Google (Chrome Version 28+) bekannt, dass sie die WebKit-basierte Blink- Engine verwenden werden.

Webkit ist eine Webbrowser-Rendering-Engine, die von Safari und Chrome verwendet wird (unter anderem sind dies die beliebtesten).

Das Präfix -webkit für CSS-Selektoren sind Eigenschaften, die nur von dieser Engine verarbeitet werden sollen und den Eigenschaften von -moz sehr ähnlich -moz . Viele von uns hoffen, dass dies -webkit-border-radius , zum Beispiel wird -webkit-border-radius durch den Standard- border-radius und Sie brauchen nicht mehrere Regeln für ein und dasselbe für mehrere Browser. Dies ist wirklich das Ergebnis von “Pre-Specification” -Features, die die Standardversion nicht stören sollen, wenn es dazu kommt.

Für Ihr Update: … Nein, es ist nicht mit IE wirklich verwandt, IE mindestens vor 9 verwendet eine andere Rendering-Engine namens Trident .

Dies wurde beantwortet und akzeptiert, aber wenn sich jemand immer noch fragt, warum die Dinge heute etwas durcheinander sind, musst du 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 zu dem aktuellen Zustand von verpatzten User-Agent-Strings geführt hat.

Zitieren des letzten Absatzes für TL; DR Zwecke:

Und dann baute Google Chrome, und Chrome verwendete Webkit, und es war wie Safari, und wollte Seiten, die für Safari erstellt wurden, und so vorgab, Safari zu sein. Und so verwendete Chrome WebKit und gab vor, Safari zu sein, und WebKit gab vor, KHTML zu sein, und KHTML gab vor, Gecko zu sein, und alle Browser gaben vor, Mozilla zu sein, und Chrome nannte sich Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13 , und die User-Agent-Zeichenfolge war ein komplettes Durcheinander, und Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13 nutzlos, und alle Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13 , als wären sie alle anderen, und Verwirrung war im Überfluss vorhanden.

Die ultimative Frage … Wird WebKit vom IE unterstützt?

So’ne Art. Sehen Sie sich Chrome Frame an , es ist ein Plugin für Internet Explorer, das die Verwendung der Webkit-Engine ermöglicht. Die einzige Eigenart ist, dass Sie Ihre Besucher dazu überreden müssen, das Plugin zu installieren.

Aktualisieren

Chrome Frame wird nicht mehr gewartet oder unterstützt …

WebKit ist eine Layout-Engine, die Web-Browsern das Rendern von Webseiten ermöglicht. Die WebKit-Engine stellt eine Reihe von classn zum Anzeigen von Web-Inhalt in Fenstern bereit und implementiert Browser-functionen, wie zum Beispiel folgende Links, wenn der Benutzer darauf klickt, eine Rückwärt-Liste verwaltet und einen Verlauf der zuletzt besuchten Seiten verwaltet.

WebKit wurde ursprünglich als Fork von KHTML als Layout-Engine für Apples Safari erstellt. Es ist zu vielen anderen Computerplattformen übertragbar. Es wird auch in Google Chrome Browser verwendet.

Die WebCit- und JavaScriptCore-Komponenten von WebKit sind unter der GNU Lesser General Public License und der Rest von WebKit unter einer BSD-ähnlichen Lizenz verfügbar.

Quelle Wikipedia

Weitere Informationen zu Layout-Engines erhalten Sie hier

Webkit ist eine HTML-Rendering-Engine, die von Chrome und Safari verwendet wird.

Es unterstützt eine Reihe von benutzerdefinierten CSS-Eigenschaften mit dem Präfix -webkit- .

Webkit ist die Rendering-Engine, die in den gängigen Browsern Safari und Chrome sowie anderen Browsern verwendet wird.

Webkit ist die HTML / CSS-Rendering-Engine, die in Apples Browser Safari und in Google Chrome verwendet wird. css-Werte Präfixe mit -webkit- sind Webkit-spezifisch, sie sind in der Regel CSS3 oder andere nicht-standardisierte functionen.

um update 2 zu beantworten w3c ist der Körper, der versucht, diese Dinge zu standardisieren, schreibt die Regeln, dann schreiben Programmierer ihre Rendering-Engine, um diese Regeln zu interpretieren. Also im Grunde w3c sagt DIVs sollte funktionieren “This way” der Engine-Writer verwendet dann diese Regel, um ihren Code zu schreiben, Fehler oder Fehlinterpretationen der Regeln verursachen die Kompatibilitätsprobleme.

Ein häufiges Problem, das ich als Website-Designer erlebt habe, ist, dass viele Leute IE6 + benutzen. In der Regel 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 IE so einfach lesen kann wie Chrome / FF / Opera und Webkit. Das Problem mit IE ist, dass, wenn ich nicht alle die richtigen CSS-Stile und Rendering verwenden, als meine Websites aussehen und gut funktionieren mit jedem Browser außer IE. Dies kann für einen unglücklichen, hartnäckigen IE-Kunden sorgen.

Beispiel ist dies: Sagen wir, ich brauche eine 1px, graue Grenze mit einem Rand-Radius von 10%. Für Chrome und andere verwende ich die Eigenschaft webkit. Jetzt, für IE, muss ich separate CSS-Stile mit den einfachen alten CSS-Werten von “border: 1px solid #Ilic” und “border-radius: 10%” hinzufügen. Ein positives Ergebnis ist nicht immer über alle IE-Browserversionen garantiert, aber diese Methode funktioniert größtenteils für mich und viele andere.

-webkit- ist einfach eine Gruppe, in die Chrome-, Safari-, Opera- und iOS-Browser passen. Sie alle haben einen gemeinsamen Vorfahren, ihre Fähigkeiten / Einschränkungen (wenn es darum geht, CSS und Javascript auszuführen) sind oft auf die Gruppe beschränkt.

Ein Entwickler wird -webkit- gefolgt von Code platzieren, was bedeutet, dass der Code nur in den Browsern Chrome, Safari, Opera und iOS 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); grundsätzlich jeder WebKit-basierte Browser) -moz- (Firefox) -o- (Old, pre-WebKit, Versionen von Opera ) -ms- (Internet Explorer und Microsoft Edge)

Auch wenn es sich um einen älteren Post handelt, gibt es für ältere Versionen von Internet Explorer auch eine andere Methode zum Rendern. -webkit Als CSS-Vendor-Präfix können Sie auch einige JS-Anwendungen herunterladen und im unteren Bereich des HTML-Headers ablegen.

Versuchen Sie es mit Modernizr, HTML5 Shiv und Respond.js. Dies sind erstaunliche IE-kompatible Polyfill-Skripte, die Polyfills und andere Ressourcen verwenden, die HTML5-Elemente in IE9 und Below besser darstellen.

Um diese Polyfills zu verwenden, fügen Sie einfach HTML-Boolesche Logik hinzu, um sie zu platzieren, WENN der Browser kleiner ist als die Wunsch-IE-Version. Beispielcode ist:

      

Eine gute Dokumentation zu WebEngines insbesondere webKit und seinen Entwicklern, finden Sie unter: WebKit

Webkit ist die Rendering-Engine, die in den gängigen Browsern Safari und Chrome sowie anderen Browsern 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 (Aufräumfunktion von Trident) Firefox → Gecko Opera → Presto (Presto wird seit Februar 2013 nicht mehr verwendet, Opera = Chrome heutzutage) Safari → WebKit Chrome → Blink (eine Abzweigung von WebKit) .