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

277

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?

Hristo
quelle
1
Ihre letzte Frage lautet effektiv "Kann der IE angewiesen werden, Dinge zu rendern, für die er nicht programmiert wurde?", Und die Antwort lautet "Nein"
Gareth,
Die Rendering-Engine von Firefox heißt Gecko. dh verwendet ihre eigene Pripietary Engine.
Troelskn
@ Gareth ... danke. Genau das hatte ich gehofft, NICHT zu hören :) In diesem Fall hoffe ich, dass der IE bald kompatibel wird ... und dass die Leute den IE6 nicht mehr verwenden!
Hristo
6
Unter css3pie.com finden Sie einige Webkit-Funktionen, die dem IE über CSS hinzugefügt wurden.
Kenoyer130
WebKit ist die böseste HTML-Rendering-Engine aller Zeiten. Nicht schlecht bedeutet schlecht, um NWA zu zitieren, aber schlecht bedeutet gut.
Dagg Nabbit

Antworten:

168

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.

kennytm
quelle
.. danke für die Adressierung meines Updates. Wenn der IE WebKit nicht unterstützt und ich weiß, dass es die -moz-Eigenschaften nicht unterstützt ... wie kann ich den IE dazu bringen, CSS3-Stile zu akzeptieren?
Hristo
@Hristo: Je nachdem welchen Stil du brauchst.
Kennytm
Ich hatte keine besonderen Gedanken ... Ich weiß nur, dass der IE in Bezug auf die Cross-Browser-Kompatibilität scheiße ist, und ich habe mich gefragt, ob WebKit eine Möglichkeit ist, dieses Problem zu beheben.
Hristo
3
sollte aktualisiert werden. Chrome-Entwickler haben das Webkit gespalten, und die Oper verwendet Presto nicht mehr
Richard
1
EdgeHTML wurde nun ebenfalls eingestellt.
DreamTeK
115

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

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.

Jerone
quelle
2
.. das sind tolle Infos! Würden die verschiedenen Rendering-Engines diese Präfixe ignorieren? dh Would Firefox ignorieren -msie, -o, -webkit; Would Webkit ignorieren -moz, -o, -msie; etc...?
Hristo
1
@Hristo Ja, es erkennt keines von diesen als gültiges CSS, also ignoriert es sie
JKirchartz
1
JKirchartz ist richtig. Die anderen Browser ignorieren das CSS-Präfix des anderen.
Jerone
2
Und das WebKit, auf das Opera umstellt, ist die Chromium-Variante, die sich selbst in Blink verwandelt.
BoltClock
41

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 .

Nick Craver
quelle
2
Kann -webkit-also in wie Firefox für das erweiterte Rendern von CSS3-Funktionen verwendet werden?
Hristo
1
Nein, Firefox verwendet eine Rendering-Engine namens Gecko
Gareth
2
@Hristo - Firefox verwendet einige ähnliche Eigenschaften, aber sie heißen -moz(für Mozilla), es werden -webkitRollen beim Parsen von Stilen ignoriert :)
Nick Craver
35

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

CodeExpress
quelle
Besuchen Sie den obigen Link, sein informativer und endgültiger Höhepunkt ist lustig.
Arun Prasad ES
10

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

Tycholiz
quelle
9

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.

Kantenläufer
quelle
2
Chrome Frame wird nicht mehr unterstützt.
Eric Willigers
Ja. Es war bestenfalls eine Stop-Gap-Lösung. Nach 8 Jahren ist es an der Zeit, dass der IE den richtigen kompatiblen Browsern Platz macht.
Edgerunner
Microsoft möchte, dass der Internet Explorer verschwindet. Es wird aus Gründen der Abwärtskompatibilität mit Windows 10 bereitgestellt.
RJ Dunnill
8

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

Sotiris
quelle
7

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

SLaks
quelle
5

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

rekursiv
quelle
5

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.

JKirchartz
quelle
4

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.

AJADMIN.COM
quelle
3

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>

CoyoteCMS
quelle
1

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

hamidfzm
quelle
1

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

Nabeel Khan
quelle