Was ist WebKit und in welcher Beziehung steht es zu CSS?

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?

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 übereinander? Kann ich beispielsweise WebKit-Funktionen in Firefox verwenden?

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

• IE → Dreizack (abgesetzt)
• Kante → EdgeHTML (Reinigungsgabel von Trident)(Edge wechselte 2019 zu Blink )
• Firefox → Gecko
• Oper → Presto(verwendet Presto seit Februar 2013 nicht mehr, betrachten Sie Opera = Chrome, daher Blink heutzutage)
• Safari → WebKit
• Chrome → Blink (eine Abzweigung von Webkit ).

Eine Liste der Vergleiche in verschiedenen Bereichen finden Sie unter Vergleich von Webbrowser-Engines .

Die ultimative Frage ... wird WebKit vom IE unterstützt?

Nicht nativ.

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

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

¹⁾ Am 12. Februar 2013 gibt Opera (Version 15+) bekannt, dass sie von ihrer eigenen Engine Presto zu WebKit namens Blink wechseln .

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

³⁾ Am 6. Dezember 2018 gibt Microsoft (Microsoft Edge 79+ Stable) 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, aber dies sind die beliebtesten).

Das -webkitPräfix für CSS-Selektoren sind Eigenschaften, die nur von dieser Engine verarbeitet werden sollen und die den -mozEigenschaften sehr ähnlich sind. Viele von uns hoffen, dass dies wegfällt, zum Beispiel -webkit-border-radiusdurch den Standard ersetzt wird border-radiusund 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 .

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:

Und dann baute Google Chrome, und Chrome verwendete Webkit, und es war wie Safari, und wollte Seiten, die für Safari erstellt wurden, und gab so vor, 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 selbst 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 Zeichenfolge des Benutzeragenten war ein komplettes Durcheinander Fast nutzlos, und jeder gab vor, jeder andere zu sein, und die Verwirrung war groß.

-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)

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

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.

WebKit ist eine Layout-Engine, mit der Webbrowser Webseiten rendern können. Die WebKit-Engine bietet eine Reihe von Klassen zum Anzeigen von Webinhalten in Fenstern und implementiert Browserfunktionen wie das Folgen von Links, wenn der Benutzer darauf klickt, das Verwalten einer Rückwärtsvorwärtsliste und das Verwalten des Verlaufs der kürzlich besuchten Seiten.

WebKit wurde ursprünglich als Gabel von KHTML als Layout-Engine für Apples Safari erstellt. Es ist auf viele andere Computerplattformen portierbar. Es wird auch im Chrome-Browser von Google verwendet.

Die WebCore- und JavaScriptCore-Komponenten von WebKit sind unter der GNU Lesser General Public License verfügbar, und der Rest von WebKit ist unter einer BSD-Lizenz erhältlich.

Quelle Wikipedia

Weitere Informationen zu Layout-Engines finden Sie hier

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-.

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

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.

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.

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:

<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
  </script>
  <script src="path/to/respond.js" type="text/javascript">
  </script>
<![endif]-->
</head>

Eine gute Dokumentation über WebEnginesinsbesondere webKitund seine Entwickler finden Sie unter: WebKit

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) .