Qu'est-ce que WebKit et comment est-il lié au CSS?
Plus récemment, je voyais des questions avec la balise "webkit". De telles questions tendent généralement à être des questions Web relatives aux CSS, à jQuery, aux mises en page, aux problèmes de compatibilité croisés, etc.
Alors, quel est ce "webkit" et quel est son rapport avec CSS? J'ai également remarqué de nombreuses propriétés -webkit-... dans le code source de divers sites Web. Est-ce que ces deux sont liés?
Mettre à jour
Donc, à partir des réponses à ce jour ... 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 les uns par rapport aux autres? Puis-je utiliser les fonctionnalités WebKit dans Firefox par exemple?
La question ultime ... WebKit est-il pris en charge par IE?
Mise à jour 2
Tous les principaux navigateurs utilisent différents moteurs de rendu. J'imagine que c'est l'une des principales raisons pour lesquelles il y a tant de problèmes de compatibilité entre navigateurs!
Alors, existe-t-il une sorte de projet ou de migration vers un moteur de rendu standard que TOUS les navigateurs utiliseront? HTML5 va-t-il mettre fin aux problèmes de compatibilité entre 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 les uns par rapport aux autres? 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(discontinué)- Edge → EdgeHTML (fourche de nettoyage de Trident)
- Firefox → Gecko
Opéra → Presto(n'utilise plus Presto depuis février 2013, considérez Opera = Chrome de nos jours)- Safari → WebKit
- Chrome → Blink (un fork de WebKit).
Voir Comparaison des moteurs de navigateur Web pour une liste des 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
- Edge
- Firefox
- Moteur: Gecko
- Préfixe CSS:
-moz
- Opera
- Safari
- Moteur: WebKit
- Préfixe CSS:
-webkit
- Chrome
1) Le 12 février 2013, Opera (version 15+) annonce ils s'éloignent de leur propre moteur Presto pour WebKit nommé Blink .
2) Le 3 avril 2013, Google (version 28+) de annonce va utiliser le moteur Blink de WebKit.
3) Le 6 décembre 2018, Microsoft (la version préliminaire sera prête au début de 2019) annonce ils vont 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 préfixe -webkit sur les sélecteurs CSS sont des propriétés que seulement ce moteur est destiné à traiter, très similaires aux propriétés -moz. Beaucoup d'entre nous espèrent que cela disparaîtra. Par exemple, -webkit-border-radius sera remplacé par le border-radius standard et vous n'aurez pas besoin de plusieurs règles pour la même chose same pour plusieurs navigateurs. C’est vraiment le résultat de fonctionnalités de "pré-spécification" qui ne doivent pas interférer avec la version standard quand elle se présentera.
Pour votre mise à jour: ... non ce n'est pas lié à IE vraiment, 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 toujours pourquoi les choses sont un peu foirées aujourd'hui, vous devrez lire ceci:
http://webaim.org/blog/user-agent-string-history/
Cela donne une bonne idée de la façon dont gecko, webkit et autres moteurs de rendu majeurs ont évolué et de ce qui a conduit à l'état actuel des chaînes d'agent utilisateur désordonnées.
Citant le dernier paragraphe aux fins de TL; DR:
Et puis Google a construit Chrome, et Chrome a utilisé Webkit, et c'était comme Safari, il voulait des pages conçues pour Safari et prétendait être Safari. Ainsi, Chrome a utilisé WebKit et a prétendu être Safari. WebKit a prétendu être KHTML. KHTML a prétendu être Gecko. Tous les navigateurs ont prétendu être Mozilla. Chrome s'est appelé lui-même
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, et la chaîne de l'agent utilisateur était un désordre complet, et presque inutile, et tout le monde a prétendu être tout le monde, et la confusion a abondé.
La question ultime ... WebKit est-il pris en charge par IE?
Genre de. Découvrez Chrome Frame, c'est un plugin pour Internet Explorer qui lui permet d'utiliser le moteur Webkit. Le seul problème est que vous devez persuader vos visiteurs d'installer le plugin.
Mettre à jour
Chrome Frame n'est plus maintenu ni pris en charge…
WebKit est un moteur de mise en page conçu pour autoriser les navigateurs Web à rendre Web pages. Le moteur WebKit fournit un fichier ensemble de classes permettant d'afficher du contenu Web dans Windows, et implémente navigateur des fonctionnalités telles que les liens suivants lorsque cliqué par l'utilisateur, gestion d'un fichier liste de renvoi, et gestion d’un fichier historique des pages récemment visitées.
WebKit a été créé à l'origine en tant que fork de KHTML en tant que moteur de mise en page pour Apple Safari; il est portable pour beaucoup autres plates-formes informatiques. C'est aussi utilisé dans le navigateur Chrome de Google.
WebCore et JavaScriptCore de WebKit les composants sont disponibles sous GNU Lesser General Public License, et le le reste de WebKit est disponible sous un Licence de style 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 tout simplement un groupe auquel appartiennent les navigateurs Chrome, Safari, Opera et iOS. Ils ont tous un ancêtre commun, si souvent leurs capacités/limitations (lorsqu'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, versions plus récentes d'Opera, presque tous les navigateurs iOS (y compris Firefox pour iOS); en gros, tout navigateur WebKit)
-moz- (Firefox)
-o- (Anciennes versions de Opera, versions antérieures à WebKit)
-ms- (Internet Explorer et Microsoft Edge)
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. Dans Google Chrome, les préfixes de valeurs . Css avec -webkit- sont spécifiques à Webkit. Ils sont généralement CSS3 ou d'autres fonctionnalités non normalisé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 doivent fonctionner "de cette façon", le rédacteur du moteur utilise ensuite cette règle pour écrire son code, tout bogue ou mauvaise interprétation des règles causant 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 requête, par navigateur. Ce serait très bien s'il y avait une configuration de rendu universelle pour CSS qui IE puisse se lire aussi facilement que Chrome/FF/Opera et webkit. Le problème avec IE est que, si je n'utilise PAS TOUS les styles et rendus CSS appropriés, mes sites Web ont l'air et fonctionnent parfaitement avec tous les navigateurs sauf IE. Cela peut faire pour un client mécontent et inflexible IE.
Voici un exemple: Disons que j’ai besoin d’une bordure grise de 1 px avec un rayon de 10%. Pour Chrome et autres, j'utilise la propriété webkit. Maintenant, pour IE, je dois ajouter des styles CSS distincts 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 dans l’ensemble IE versions de navigateur, mais pour l’essentiel, cette méthode fonctionne bien pour moi et beaucoup d’autres.
Bien qu'il s'agisse 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 HEAD du HTML.
Essayez d’utiliser Modernizr, HTML5 Shiv et Respond.js. Ce sont d’excellents scripts polyfill compatibles avec IE, qui utilisent polyfill, ainsi que d’autres ressources qui aideront à améliorer le rendu des éléments HTML5 dans IE9 et les versions antérieures.
Pour utiliser ces polyfill, ajoutez simplement une logique HTML booléenne pour les placer, SI le navigateur est inférieur à la version souhaitée IE. Exemple de code est:
<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 WebEngines surtout webKit et ses développeurs que vous pouvez lire à: WebKit
Webkit est le moteur de rendu utilisé dans les navigateurs populaires Safari et Chrome, ainsi que dans d’autres Chaque navigateur est géré par un moteur de rendu permettant de dessiner la page Web HTML/CSS.
IE → Trident (discontinué) Edge → EdgeHTML (fourche de nettoyage de Trident) Firefox → Gecko Opera → Presto (n'utilise plus Presto depuis février 2013, considérons Opera = Chrome aujourd'hui). Safari → WebKitChrome → Blink (un fork de WebKit).