Navigateurs : les moteurs de rendu

Navigateurs : les moteurs de rendu

Après un long moment sans écrire sur ce blog, je reviens (certains dirons "enfin !"). Je n'ai pas rien fait durant tout ce temps et aujourd'hui je vais vous parler des différents moteurs de rendu qui existent, en tous cas ceux qui sont utilisés dans les navigateurs les plus répandus.

Lorsque l'on fait de l'intégration, on se dit qu'en testant sur deux ou trois navigateur on a tout bon... et pourtant l'affichage ne dépend pas du navigateur mais du moteur de rendu utilisé ! Subtile nuance qui fera tout la différence.

Pour que tout le monde soit d'accord, voici les navigateurs que j'estime répandus en ne considérant que Linux, Windows et Mac :

  • Chrome / Chromium (Linux, Windows, Mac)
  • Firefox (Linux, Windows, Mac)
  • Internet Exporer (Windows)
  • Opera (Linux, Windows, Mac)
  • Safari (Mac)

Ajoutons les variantes mobiles, en ne considérant que Android, iOS et Windows Mobile :

  • Chrome (Android, iOS, Windows)
  • Firefox (Android)
  • Internet Explorer (Windows Mobile)
  • Dolphin Browser (Android, iOS)
  • Navigateur natif (Android)
  • Safari (iOS)
  • Opera Mini (Android, Windows Mobile)

On a déjà une belle quantité de navigateurs, y a-t-il pour autant beaucoup de moteurs de rendu ? Je vous réserve quelques surprises dans la suite de cet article...

Bienvenue dans l'enfer des moteurs de rendu !

WebKit

Pour commencer, je vous présente WebKit, un des moteurs de rendu les plus connus. Un peu d'histoire : WebKit est un moteur de rendu développé initialement par Apple et Nokia. D'ailleurs WebKit et son logo sont des marques déposées par Apple... pas super pour un projet open souce. À la base, WebKit n'était disponible que pour Mac OS X, mais étant ouvert, le moteur de rendu a été porté sur Linux et Windows. Il est à noter qu'en développant WebKit ils étaient partis de KHTML, le moteur de rendu utilisé dans Konqueror. Ce dernier est mort depuis un long moment, KHTML n'est d'ailleurs plus utilisé dans les navigateurs web.

Un moteur de rendu est le couple HTML/CSS + JS. En effet, le JavaScript est inclus dans les moteurs de rendu dignes de ce nom. WebKit a donc un moteur JavaScript nommé... WebKit qui cèdera sa place à JavaScriptCore (encore appelé SquirrelFish ou Nitro) en 2008.

Beaucoup de monde pense que Webkit est utilisé par Safari et Chromium/Chrome dans toutes leurs versions... or ça n'est pas du tout le cas. Safari l'utilise en effet, ce serait le comble que d'avoir développé un logiciel et de l'abandonner ! Notez que la version de WebKit utilisée par Safari (donc sur Mac) n'est pas exactement la même que celle utilisée ailleurs, expliquant les différences de rendus obtenus.

Chromium (et donc Chrome) utilisait WebKit depuis sa naissance jusqu'à l'an dernier, en 2013, où Google en ayant marre de devoir maintenir le code utilisé par Apple a décidé de créer un nouveau moteur de rendu en partant de WebKit, un peu comme WebKit est né de KHTML : on parle d'un fork. Un fork c'est le fait de créer un nouveau projet en partant de l'instant T d'un autre. Google a ainsi créé Blink que nous verrons un peu plus tard.

A cet instant, tout le monde se dit logiquement que Chrome pour iOS utilise Blink et non WebKit. Sauf que... Apple n'autorise pas d'autres moteurs de rendus que le siens. C'est à dire que Chrome pour iOS utilise la même version de WebKit que celle utilisée par Safari, et même pire : Chrome n'est de fait qu'un conteneur d'une WebUI qui ne profite pas de l’accélération graphique du système. Ainsi, Chrome sur iOS est moins performant que Safari tandis que Chrome domine très largement Safari sur les ordinateurs.

Dolphin Browser, un navigateur mobile quelque peu répandu, est basé sur WebKit dans ses version Android et iOS.

Android a un navigateur natif dans ses version antérieures à la 4.0 qui est basé sur WebKit, puisque paru avant la création de Blink.

Enfin, Opera a fait un rapide passage sur WebKit lorsqu'il a été annoncé l'abandon de Presto pour se joindre au développement de WebKit, mais n'est plus sur WebKit dans ses dernières versions.

En résumé à l'heure actuelle, WebKit est utilisé sur :

  • Safari (Mac)
  • Safari (iOS)
  • Chrome (iOS)
  • Dolphin Browser (Android, iOS)
  • Navigateur natif (Android)

Blink

Issu de la famille su-présentée, Blink est donc un clone de WebKit amélioré à la sauce Google. En effet, Google a travaillé dur pour nettoyer le code de WebKit sans se soucier de maintenir certaines compatibilités avec d'anciens systèmes d'Apple, supprimant ainsi quelque chose comme 70% de code mort ou factorisable. 

Opera a rejoint l'initiative de Google intégrant Blink dans son navigateur, ainsi que V8 : le moteur JavaScript développé par Google et également utilisé par Node.js.

Le projet NodeWebkit a également suivi le mouvement, gardant son nom trompeur mais profitant de la puissance de Blink.

Blink est utilisé actuellement sur :

  • Chromium / Chrome (Linux, Windows, Mac)
  • Chrome (Android)
  • Opera (Linux, Windows, Mac)
  • Opera Mini (Android, Windows Mobile)

Gecko

On ne parlera pas de lézards ici, mais bien du moteur de rendu développé par Mozilla. Qui dit développé par Mozilla dit utilisé par Firefox. Encore un peu d'histoire : Gecko est en réalité issu de la publication du code source de Netscape Navigator par Netscape qui crée alors la fondation Mozilla qui a bien évolué depuis. Gecko se veut initialement respectueux des standards du web (HTTP, PNG, XML, WCAG, ...) ainsi que les recommandations du W3C.

On retrouvera donc Gecko sur Firefox ou encore Thunderbird. Firefox OS (le système d'exploitation pour mobile) utilise également Gecko absolument partout, puisque l'interface du système est rendue depuis le trio HTML/CSS/JS.

En terme de navigateurs on aura donc :

  • Firefox (Linux, Windows, Mac)
  • Firefox (Android)

Trident

En parlant de trio, voici Trident ! Encore un nom étrange, parfois nommé à tord MSHTML, il est le moteur de rendu développé par Microsoft pour Internet Exporer depuis la version 4 d'IE (1997, ça date...). Et pourtant, toutes ses versions ne se valent pas... IE6 est un vrai calvaire qui tend à disparaître mais qui nous aura bien cassé les pieds. La version de Trident utilisée par IE9 est bien meilleure, IE 10 et 11 sont d'ailleurs de bons navigateurs au niveau du rendu HTML/CSS et de l’interprétation du JavaScript.

Notons que le moteur JavaScript répondant au doux nom de Chakra est plutôt très bon dans ce qu'il fait, Microsoft a donc rattrapé son retard, enfin !

  • Internet Explorer (Windows)
  • Internet Explorer (Windows Mobile)

Presto

J'en parle ici, mais il n'a plus vraiment de raison d'être. Presto est l'ancien moteur de rendu développé et utilisé par Opera, qui est passé sur le couple Blink/V8 pour rappel. Plus aucun navigateur ne l'utilise actuellement.

Résumons-nous !

Suite à toutes ces explications, résumons les navigateurs à tester pour vos futurs sites.

Navigateurs de bureau

Tout d'abord pour un site compatible sur les navigateurs de bureau, vous devrez tester :

  • Chromium OU Chrome OU Opera
  • Internet Explorer (Windows seulement)
  • Firefox
  • Safari (Mac seulement)

Avec ces 4 navigateurs, vous couvrez les moteurs de rendus actuels. À noter qu'un test de Chrome sur un des OS supporté devrait renvoyer le même rendu sur les autres OS. Si vous voulez un site compatible avec les anciennes version d'IE ou d'Opera, il faudra vous amuser à tester chacune des versions. Personnellement, je ne considère plus que ces navigateurs là (et encore, Safari je l'oublie un peu en considérant le rendu de Chrome, n'ayant pas Mac sous la main).

Navigateurs mobiles

Si vous développez un site adapté aux mobiles, qu'il soit dédié ou responsive, vous devrez tester :

  • Safari OU Chrome OU Dolphin Browser (iOS seulement)
  • Internet Explorer (Windows Mobile seulement)
  • Chrome (Android, Windows Mobile)
  • Firefox (Android seulement)
  • Navigateur natif (Android seulement)
  • Dolphin Browser (Android seulement)

J'ai bien mis Navigateur natif et Dolphin séparément car j'ai pu constater durant certaines intégrations des différences entre les deux.

Comment tester ?

Je n'ai pas de solution miracle pour tous les navigateurs mais globalement, il vous faudra faire des sacrifices...

Pour les navigateurs de bureau, vous pouvez les installer sur la même machine, mais vous ne pourrez pas tester Safari ou Internet Explorer (ou les deux pour les linuxiens). En effet, la version de Safari proposée pour Windows n'est plus maintenue et n'est donc pas vraiment représentative de la version Mac (qui est déjà différente à la base puisque basée sur l'API WebKit de Mac et ayant donc une architecture différente).

Pour les navigateurs mobiles, il y a plusieurs cas de figure :

  • Vous êtes l'heureux possesseur d'un iPhone relativement récent, vous serez dans la meilleure position puisque vous pourrez tester Safari via votre appareil, tandis que vous pourrez profiter d'une machine virtuelle Android sur votre ordinateur pour tester les navigateurs disponibles sur Android.
  • Vous possédez un smartphone sous Android 4.X, vous pourrez tester les navigateurs Android directement, bien que le navigateur natif ne soit pas disponible : installez une VM Android d'une version antérieure :)
  • Vous possédez un Windows Phone, vous êtes dans le même cas que les possesseurs d'iPhone, sauf qu'IE a une part de marché bien moins importante... dommage !

Vous l'aurez bien compris, pour Internet Explorer, à part avoir un Windows Phone sous la main, vous n'y pourrez rien (à part redimensionner IE sur votre Windows en espérant que le rendu sera identique). Pour Safari, vous devrez vendre un organe pour vous offrir un appareil estampillé d'une pomme.

Pour ceux qui souhaitent installer des VM Android, je vous conseil l'excellent GenyMotion qui permet de télécharger et de lancer des VM Android très simplement et avec la version que vous souhaitez. Ainsi, il vous sera possible d'installer une ancienne version pour tester le navigateur natif, et une version récente pour tester Chrome, Firefox et Dolphin Browser.

Pour vos intégrations, je vous conseille d'utiliser une application telle que Prepros qui permet entre autres d'avoir un rechargement à la modification du CSS (un peu comme LiveReload) mais sans extension navigateur (du JS est injecté dans la page). Vous pourrez ainsi observer le comportement de votre design en quasi temps réel sur tous vos supports disponibles. Pour ma part j'ai bien souvent Firefox, Chrome et Chrome Android qui tournent en même temps et qui me permettent d'avoir une vue d'ensemble des navigateurs principaux.

Je vous invite à lire mon article dédié aux outils utiles pour le développement front-end pour en savoir plus sur les outils que j'utilise au quotidien.

J'espère que cet article vous aura été utile et que j'aurais réussi à vous éclaircir sur les méandres des moteurs de rendus ! N'hésitez pas à me corriger en commentaire si j'ai dit quelque chose de faux.

Votre gravatar
Gravatar de Girgias Girgias
Article très intéressant, heureusement que j'ai de tout chez moi, (à part un PC Mac mais bon au pire).
Répondre
Gravatar de Yahya Yahya
Super article Alex (y)
Répondre
Gravatar de edimitchel edimitchel
Hey, super article (avec quelques fautes .. :P).
Je crois que Google Chrome avait la possibilité de tester son site sous différents User Agent.. mais je vois que l'option n'est plus disponible.. ça devait être au temps du WebKit :)
Répondre
Gravatar de Alex-D Alex-D
Si tu avais l'amabilité de me les signaler via le formulaire de contact ce serait super :)

Merci en tous cas !
Répondre
Gravatar de Brandon-xprodeur Brandon-xprodeur
Vraiment sympa comme nouveau article :)
Répondre
Gravatar de DarkHexagon DarkHexagon
Enfin un nouvel article ;)
Répondre