it-swarm.com.de

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

In letzter Zeit habe ich Fragen mit dem Tag "webkit" gesehen. Bei diesen Fragen handelt es sich in der Regel um webbasierte Fragen zu CSS, jQuery, Layouts, Kompatibilitätsproblemen mit anderen Browsern usw.

Was ist das "Webkit" und in welcher Beziehung steht es zu CSS? Ich habe auch viele -webkit-...-Eigenschaften im Quellcode für verschiedene Websites festgestellt. Sind diese zwei verwandt?

Aktualisieren

Also von 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 Vor- und Nachteile, wenn man eins über das andere setzt? Kann ich die WebKit-Funktionen beispielsweise in Firefox verwenden?

Die ultimative Frage ... Wird WebKit von 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! 

Gibt es eine Art Projekt oder eine Bewegung zu einer Standard-Rendering-Engine, die ALLE Browser verwenden werden? Wird HTML5 die Kompatibilitätsprobleme zwischen Browsern beenden?

214
Hristo

Update: Anscheinend ist WebKit eine HTML/CSS-Webbrowser-Rendering-Engine für Safari/Chrome. Gibt es solche Engines für IE/Opera/Firefox und was sind die Vor- und Nachteile, wenn man eins über das andere setzt? Kann ich die WebKit-Funktionen beispielsweise in Firefox verwenden?

Jeder Browser verfügt über eine Rendering-Engine, um die HTML/CSS-Webseite zu zeichnen.

  • IE → Dreizack (abgesetzt)
  • Edge → EdgeHTML (Bereinigungsgabel von Trident)
  • Firefox → Gecko
  • Oper → Presto (verwendet Presto nicht mehr seit Feb 2013, betrachten Sie Opera = Chrome heutzutage)
  • Safari → WebKit
  • Chrome → Blink (eine Abzweigung von WebKit).

Siehe Vergleich von Webbrowser-Engines für eine Liste von Vergleichen in verschiedenen Bereichen.

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

Nicht nativ.

130
kennytm

Zusatz zu dem, was @KennyTM sagte:

1) Am 12. Februar 2013 wechselte Opera (Version 15+) kündigt an von ihrer eigenen Engine Presto zu WebKit mit dem Namen Blink .

2) Am 3. April 2013 wird Google (Chrome-Version 28+) kündigt an die WebKit-basierte Blink -Engine verwenden.

3) Am 6. Dezember 2018 werden Microsoft (vorgefertigte Preview-Builds Anfang 2019) kündigt an die auf WebKit basierende Blink -Engine verwenden.

84
jerone

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

Das -webkit-Präfix bei CSS-Selektoren sind Eigenschaften, die von only, die diese Engine verarbeiten soll, sehr ähnlich sind wie -moz-Eigenschaften. Viele von uns hoffen, dass dies wegfällt. Beispielsweise wird -webkit-border-radius durch den Standard border-radius ersetzt, und Sie benötigen für mehrere Browser keine mehrfachen Regeln für das same. Dies ist wirklich das Ergebnis von "Pre-Specification" -Features, die die Standardversion nicht stören sollen, wenn sie zustande kommt.

Für Ihr Update: ... nein, es hängt nicht wirklich mit IE zusammen, IE verwendet mindestens vor 9 eine andere Rendering-Engine namens Trident .

31
Nick Craver

Dies wurde beantwortet und akzeptiert, aber wenn sich noch jemand wundert, warum die Dinge heute ein bisschen 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 zu dem aktuellen Stand der durcheinandergebrachten Benutzeragenten-Zeichenfolgen 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 stellte sich als Safari heraus. Und so benutzte 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 und in der Nähe nutzlos, und jeder gab vor, alle anderen zu sein, und die Verwirrung war groß.

31
CodeExpress

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

So'ne Art. Check out Chrome Frame ist ein Plugin für Internet Explorer, das die Verwendung der Webkit-Engine ermöglicht. Die einzige Besonderheit ist, dass Sie Ihre Besucher zur Installation des Plugins überreden müssen.

Aktualisieren

Chrome Frame wird nicht mehr gewartet oder unterstützt…

7
edgerunner

WebKit ist eine Layout-Engine für Webbrowsern das Rendern von Web erlauben Seiten. Die WebKit-Engine bietet eine Satz von Klassen zur Anzeige von Webinhalten in Windows und implementiert den Browser Funktionen wie die folgenden Links, wenn vom Benutzer angeklickt, ein .__ verwaltet. Zurück-Vorwärts-Liste und Verwalten einer Geschichte der zuletzt besuchten Seiten.

WebKit wurde ursprünglich als .__ erstellt. Gabel von KHTML als Layout-Engine für Apples Safari; es ist für viele portabel andere Rechnerplattformen. Es ist auch wird im Google Chrome Browser verwendet.

WebKore und JavaScriptCore von WebKit Komponenten sind unter der GNU .__ verfügbar. Lesser General Public License und die Rest von WebKit ist unter einer .__ verfügbar. BSD-artige Lizenz.

Quelle Wikipedia

Weitere Informationen zu den Layout-Engines finden Sie hier

6
Sotiris

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

Es unterstützt eine Reihe von benutzerdefinierten CSS-Eigenschaften, denen -webkit- vorangestellt ist.

5
SLaks

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

Ein Entwickler platziert -webkit- gefolgt von etwas Code, was bedeutet, dass der Code nur auf Chrome-, Safari-, Opera- und iOS-Browsern ausgeführt werden kann. 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)

4
Tycholiz

Webkit ist die Rendering-Engine, die in den beliebten Browsern Safari und Chrome und anderen verwendet wird.

4
recursive

Webkit ist die HTML-/Css-Rendering-Engine, die in Apples Safari-Browser verwendet wird. In Google Chrome sind die Präfixe für .ss.ss.

um das Update 2 zu beantworten w3c ist der Körper, der versucht, diese Dinge zu standardisieren, sie schreiben die Regeln und dann schreiben die Programmierer ihre Rendering-Engine, um diese Regeln zu interpretieren. Im Grunde sagt W3C, dass DIVs auf diese Weise funktionieren sollten. Dann schreibt der Engine-Writer diese Regel, um ihren Code zu schreiben. Fehler oder Fehlinterpretationen der Regeln verursachen Kompatibilitätsprobleme.

4
JKirchartz

Ein häufiges Problem, auf das ich als Website-Designer gestoßen bin, ist, dass viele Leute IE6 + verwenden. In der Regel keine große Sache, außer in CSS muss ich mehrere Rendering-Syntax hinzufügen, um jede Anforderung per Browser zu analysieren. Es wäre sehr schön, wenn es ein universelles Rendering-Setup für CSS gäbe, das IE so einfach wie Chrome/FF/Opera und Webkit lesen kann. Das Problem bei IE ist, dass meine Websites mit allen Browsern außer IE gut aussehen und funktionieren, wenn ich NICHT ALLE richtigen CSS-Stile und Rendering verwende. Dies kann zu einem unglücklichen, hartgesottenen IE -Kunden führen.

Ein Beispiel ist folgendes: Nehmen wir an, ich brauche einen 1px grauen Rand mit einem Grenzradius von 10%. Für Chrome und andere verwende ich die Webkit-Eigenschaft. Für den Internet Explorer muss ich nun separate CSS-Stile hinzufügen, indem ich die einfachen alten CSS-Werte von "border: 1px solid # E5E5E5" und "border-radius: 10%" verwendet. Ein positives Ergebnis ist nicht immer für alle IE Browserversionen garantiert, aber diese Methode funktioniert größtenteils gut für mich und viele andere.

3
AJADMIN.COM

Obwohl dies ein älterer Beitrag ist, gibt es auch eine andere Methode zum Rendern für ältere Versionen von Internet Explorer. -webkit können Sie, während Sie ein CSS-Herstellerpräfix sind, auch einige JS-Anwendungen herunterladen und sie unten im HEAD von HTML platzieren. 

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

Um diese Polyfills zu verwenden, fügen Sie einfach eine boolesche HTML-Logik hinzu, WENN der Browser weniger 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>

2
CoyoteCMS

Eine gute Dokumentation über WebEngines, insbesondere webKit und seine Entwickler, finden Sie unter: WebKit

0
Hamid FzM

Webkit ist die Rendering-Engine, die in den gängigen Browsern Safari und Chrome sowie in anderen .__ verwendet wird. Jeder Browser verfügt über eine Rendering-Engine, um die HTML/CSS-Webseite zu zeichnen.

IE → Trident (nicht fortgeführt) Edge → EdgeHTML (Bereinigungsgabel von Trident) Firefox → Gecko Opera → Presto (verwendet Presto seit Februar 2013 nicht mehr; betrachten Sie Opera = Chrome heutzutage) Safari → WebKitChrome → Blink (eine Abzweigung von WebKit).

0
Nabeel khan