Qu'est-ce que WebKit et comment est-il lié au CSS?

Plus récemment, j'ai vu des questions avec la balise "webkit". Ces questions ont généralement tendance à être des questions sur le Web concernant CSS, jQuery, les mises en page, les problèmes de compatibilité entre les navigateurs, etc.

Alors, quel est ce "webkit" et comment est-il lié au CSS? J'ai également remarqué de nombreuses -webkit-...propriétés dans le code source de divers sites Web. Ces deux-là sont-ils liés?

Mettre à jour

Donc, à partir des réponses jusqu'à présent ... WebKit est un moteur de rendu de navigateur Web HTML / CSS pour Safari / Chrome. Existe-t-il de tels moteurs pour IE / Opera / Firefox et quelles sont les différences, les avantages et les inconvénients de l'utilisation l'un par rapport à l'autre? Puis-je utiliser les fonctionnalités WebKit dans Firefox par exemple?

La question ultime ... WebKit est-il pris en charge par IE?

Update 2

Tous les principaux navigateurs utilisent différents moteurs de rendu. Je suppose que c'est une grande raison pour laquelle il y a tant de problèmes de compatibilité entre les navigateurs!

Alors, y a-t-il une sorte de projet ou de mouvement vers un moteur de rendu standard que TOUS les navigateurs utiliseront? HTML5 mettra-t-il fin aux problèmes de compatibilité entre les navigateurs?

Mise à jour: Donc apparemment, WebKit est un moteur de rendu de navigateur Web HTML / CSS pour Safari / Chrome. Existe-t-il de tels moteurs pour IE / Opera / Firefox et quelles sont les différences, les avantages et les inconvénients de l'utilisation l'un par rapport à l'autre? Puis-je utiliser les fonctionnalités WebKit dans Firefox par exemple?

Chaque navigateur est soutenu par un moteur de rendu pour dessiner la page Web HTML / CSS.

• IE → Trident (abandonné)
• Bord → EdgeHTML (fourche de nettoyage de Trident)(Edge est passé à Blink en 2019)
• Firefox → Gecko
• Opera → Presto(n'utilise plus Presto depuis février 2013, pensez à Opera = Chrome, donc Blink de nos jours)
• Safari → WebKit
• Chrome → Blink (un fork de Webkit ).

Voir Comparaison des moteurs de navigateur Web pour une liste de comparaisons dans différents domaines.

La question ultime ... WebKit est-il pris en charge par IE?

Pas nativement.

Ajout à ce que @KennyTM a dit:

• C'EST À DIRE
  • Moteur: Trident
  • Préfixe CSS: -ms
• Bord
  • Moteur: EdgeHTML → Blink ³
  • Préfixe CSS: -ms
• Firefox
  • Moteur: Gecko
  • Préfixe CSS: -moz
• Opéra
  • Moteur: Presto → Blink ¹
  • Préfixe CSS: -o(Presto) et -webkit(Blink)
• Safari
  • Moteur: WebKit
  • Préfixe CSS: -webkit
• Chrome
  • Moteur: WebKit → Blink ²
  • Préfixe CSS: -webkit

¹⁾ Le 12 février 2013, Opera (version 15+) annonce qu'ils s'éloignent de leur propre moteur Presto pour WebKit nommé Blink .

²⁾ Le 3 avril 2013, Google (Chrome version 28+) annonce qu'ils vont utiliser le moteur Blink basé sur WebKit .

³⁾ Le 6 décembre 2018, Microsoft (Microsoft Edge 79+ stable) annonce qu'il va utiliser le moteur Blink basé sur WebKit .

Webkit est un moteur de rendu de navigateur Web utilisé par Safari et Chrome (entre autres, mais ce sont les plus populaires).

Le -webkitpréfixe sur les sélecteurs CSS sont des propriétés que seul ce moteur est destiné à traiter, très similaires aux -mozpropriétés. Beaucoup d'entre nous espèrent que cela disparaîtra, par exemple, -webkit-border-radiussera remplacé par la norme border-radiuset vous n'aurez pas besoin de plusieurs règles pour la même chose pour plusieurs navigateurs. C'est vraiment le résultat de fonctionnalités de "pré-spécification" qui sont destinées à ne pas interférer avec la version standard quand elle se présente.

Pour votre mise à jour: ... non ce n'est pas vraiment lié à IE, IE au moins avant 9 utilise un moteur de rendu différent appelé Trident .

Cela a été répondu et accepté, mais si quelqu'un se demande encore pourquoi les choses sont un peu gâchées aujourd'hui, vous devrez lire ceci:

http://webaim.org/blog/user-agent-string-history/

Il donne une bonne idée de l'évolution du gecko, du webkit et d'autres principaux moteurs de rendu et de ce qui a conduit à l'état actuel des chaînes d'agent utilisateur foirées.

Citant le dernier paragraphe à des fins TL; DR:

Et puis Google a construit Chrome, et Chrome a utilisé Webkit, et c'était comme Safari, et voulait des pages construites pour Safari, et donc prétendait être Safari. Et donc Chrome a utilisé WebKit, et a prétendu être Safari, et WebKit a prétendu être KHTML, et KHTML a prétendu être Gecko, et tous les navigateurs ont prétendu être Mozilla, et Chrome s'est appelé lui 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- même , et la chaîne d'agent utilisateur était un désordre complet, et presque inutile, et tout le monde prétendait être tout le monde, et la confusion abondait.

-webkit-est simplement un groupe dans lequel les navigateurs Chrome, Safari, Opera et iOS s'intègrent. Ils ont tous un ancêtre commun, si souvent leurs capacités / limitations (quand il s'agit d'exécuter CSS et Javascript) sont limitées au groupe.

Un développeur placera -webkit-suivi d'un code, ce qui signifie que le code ne fonctionnera que sur les navigateurs Chrome, Safari, Opera et iOS. Voici une liste complète:

-webkit- (Chrome, Safari, les nouvelles versions d'Opera, presque tous les navigateurs iOS (y compris Firefox pour iOS); en gros, tout navigateur WebKit)

-moz- (Firefox)

-o- (Anciennes versions pré-WebKit d'Opera)

-ms- (Internet Explorer et Microsoft Edge)

La question ultime ... WebKit est-il pris en charge par IE?

En quelque sorte. Découvrez Chrome Frame , c'est un plugin pour Internet Explorer qui lui fait utiliser le moteur Webkit. La seule bizarrerie est que vous devez persuader vos visiteurs d'installer le plugin.

Mettre à jour

Le cadre Chrome n'est plus maintenu ni pris en charge…

WebKit est un moteur de mise en page conçu pour permettre aux navigateurs Web d'afficher des pages Web. Le moteur WebKit fournit un ensemble de classes pour afficher le contenu Web dans les fenêtres et implémente des fonctionnalités de navigateur telles que les liens suivants lorsque l'utilisateur clique dessus, la gestion d'une liste en amont et la gestion d'un historique des pages récemment visitées.

WebKit a été initialement créé comme un fork de KHTML comme moteur de mise en page pour Safari d'Apple; il est portable sur de nombreuses autres plates-formes informatiques. Il est également utilisé dans le navigateur Chrome de Google.

Les composants WebCore et JavaScriptCore de WebKit sont disponibles sous la licence GNU Lesser General Public License, et le reste de WebKit est disponible sous une licence de type BSD.

Source Wikipedia

Pour plus d'informations sur les moteurs de mise en page, vous pouvez consulter ici

Webkit est un moteur de rendu HTML utilisé par Chrome et Safari.

Il prend en charge un certain nombre de propriétés CSS personnalisées préfixées par -webkit-.

Webkit est le moteur de rendu utilisé dans les navigateurs populaires Safari et Chrome, ainsi que dans d'autres.

Webkit est le moteur de rendu html / css utilisé dans le navigateur Safari d'Apple et dans Google Chrome. Les préfixes des valeurs css avec -webkit- sont spécifiques au webkit, ils sont généralement CSS3 ou d'autres fonctionnalités non standardisées.

pour répondre à la mise à jour 2, w3c est le corps qui essaie de normaliser ces choses, ils écrivent les règles, puis les programmeurs écrivent leur moteur de rendu pour interpréter ces règles. Donc, fondamentalement, w3c dit que les DIV devraient fonctionner "de cette façon", le rédacteur du moteur utilise ensuite cette règle pour écrire leur code, tout bogue ou mauvaise interprétation des règles provoquant des problèmes de compatibilité.

Un problème commun que j'ai rencontré en tant que concepteur de site Web est que beaucoup de gens utilisent IE6 +. Pas grand-chose en général, sauf en CSS, je dois ajouter plusieurs syntaxes de rendu pour analyser chaque demande, par navigateur. Ce serait très bien s'il y avait une configuration de rendu universelle pour CSS qu'IE peut lire aussi facilement que Chrome / FF / Opera et webkit. Le problème avec IE est que si je n'utilise PAS TOUS les styles CSS et le rendu appropriés, mes sites Web ont l'air et fonctionnent très bien avec tous les navigateurs sauf IE. Cela peut rendre un client IE mécontent et irrépressible.

Exemple: disons que j'ai besoin d'une bordure grise de 1px avec un rayon de bordure de 10%. Pour Chrome et autres, j'utilise la propriété webkit. Maintenant, pour IE, je dois ajouter des styles CSS séparés en utilisant les anciennes valeurs CSS simples de "border: 1px solid # E5E5E5" et "border-radius: 10%". Un résultat positif n'est pas toujours garanti sur toutes les versions du navigateur IE, mais pour la plupart, cette méthode fonctionne bien pour moi et pour beaucoup d'autres.

Même s'il s'agit d'une publication plus ancienne, il existe également une autre méthode de rendu pour les anciennes versions d'Internet Explorer. -webkit tout en étant un préfixe de fournisseur CSS, vous pouvez également télécharger quelques applications JS et les placer au bas de la tête HTML.

Essayez d'utiliser Modernizr, HTML5 Shiv et Respond.js. Il s'agit d'étonnants scripts de polyfill compatibles IE qui utilisent des polyfill et d'autres ressources qui aideront à mieux rendre les éléments HTML5 dans IE9 et ci-dessous.

Pour utiliser ces polyfills, ajoutez simplement une logique booléenne HTML pour les placer, SI le navigateur est inférieur à la version IE désirée. Exemple de code:

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

Une bonne documentation sur en WebEnginesparticulier webKitet ses développeurs que vous pouvez lire sur: WebKit

Webkit est le moteur de rendu utilisé dans les navigateurs populaires Safari et Chrome, ainsi que dans d'autres. Chaque navigateur est soutenu par un moteur de rendu pour dessiner la page Web HTML / CSS.

IE → Trident (discontinué) Edge → EdgeHTML (fourchette de nettoyage de Trident) Firefox → Gecko Opera → Presto (n'utilise plus Presto depuis février 2013, pensez à Opera = Chrome de nos jours) Safari → WebKit Chrome → Blink (une fourchette de WebKit) .