L'essentiel des CSS

Adopter le préfixage

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Afin de faciliter l'intégration et la prise en compte des nouveaux modules en cours de développement, les fournisseurs (navigateurs et autres lecteurs de contenu) adoptent le préfixage. Détaillez-en leur mise en place.
06:19

Transcription

On pourrait se demander pourquoi tous les navigateurs n'affichent pas les CSS de la même manière ? Simplement, c'est qu'ils ne s'appuient pas sur les mêmes moteurs de rendus. Les moteurs de rendus, ce sont ces petits programmes à l'intérieur des navigateurs, qui vont gérer l'affichage des éléments en fonction des CSS, qui sont donnés, entre autres, car ça peut gérer la vidéo, ça peut gérer tout ce qui va être rendu, pixélisé sur l'interface. Dans les principaux moteurs, d'un côté, on a par exemple, la famille Microsoft, avec Internet Explorer, ou le navigateur AOL, qui se base sur Trident. Et, le tout nouveau moteur de Edge, qui est EdgeHTML, qui se base pour avoir une rétrocompatibilité historique avec Trident, mais qui tend à s'orienter vers un mode d'affichage purement Webkit. Microsoft annonce même que si parfois, il y avait quelque chose de WebKit qui ne fonctionnait pas sur Edge, c'est qu'il s'agissait d'un bug, et qu'il fallait le corriger. Donc, cela donne du baume au cœur sachant qu'il y aura plus de problématiques qu'on a pu avoir par le passé, avec Microsoft Internet Explorer. Geko, qui est un moteur historique utilisé par la fondation Mozilla équipe donc aussi bien Firefox, Pale Moon, ou Grifon, qui eux vont gérer tous les rendus de la fondation Mozilla. Opera, s'est souvent appuyé sur son son propre moteur, jusqu'à la version quinze qui était Presto ; et puis, à partir de la version quinze, il est passé sur Webkit, et maintenant sur Blink, version dérivée de Webkit utilisée par Chrome... Lui, s'est appuyé également sur Webkit, mais qui maintenant s'appuie sur Blink. Webkit, pour l'historique, est le moteur utilisé par Konqueror sur Linux qui était KHTML, le moteur de rendu. Donc Safari avec Apple, a récupéré ce moteur, l'a adapté, et peu à peu, en voulant le séparer des liaisons avec le KDE, a créé sa propre librairie, donc c'est devenu Webkit. Webkit a continué à être développé. Et puis, Google a eu besoin de développer sur Webkit, sa propre librairie, et maintenant, est parti avec Blink, (qui est un gros dérivatif de Webkit), pour y développer ses propres librairies. Dans la famille Chrome, il faut comprendre qu'à l'origine, c'est Chromium, qui est la start-up ayant développé le navigateur. Google, l'a récupéré, pour y développer ses propres algorithmes de suivis et de traçages d'informations, pour faire des statistiques, des profils : ainsi, google Chrome est né, et Google Chrome Canari, qui est la toute dernière version, « toute chaude sortie du four,» non encore débuguée. Si vous voulez vraiment tester ce que va devenir Blink, vous pouvez le tester avec Canari. Sinon, si vous voulez travailler avec Chrome, la partie Webkit Blink, sans avoir le côté Google, vous pouvez travailler avec Chromium. Voilà, donc ! vous voyez quand même, qu'il y a une grosse convergence vers Webkit, d'un côté ; d'un autre côté, vers Geko, les navigateurs de Firefox. Donc, on verra qu'il y a peu d'animosités entre les deux moteurs de rendu mais qu'on est quand même obligé quelque part, de passer par ce qu'on appelle le préfixage. Alors, qu'est ce que le préfixage ? Le préfixage, c'est de pouvoir dire : il va y avoir des propriétés, qu'on va aller explorer dans des zones en working draft ; on ne sait pas encore comment ça va être au final ? On a envie de donner la possibilité aux utilisateurs et aux développeurs de jouer avec, seulement, ça peut créer quelques soucis. Par exemple, si je suis ici, dans une description d'une section, je vais pouvoir décrire mes propriétés en disant tiret Webkit, tiret Propriétés. Bien entendu, il faut remplacer Propriété par le nom de la fameuse Propriété qui devient un terrain d'exploration, un terrain de bac à sable. Alors ici, en disant Webkit, ça va être de dire, comment Webkit va-t-il interpréter cette propriété ? Donc, maintenant, on va pouvoir faire la même chose avec KHTML, on va pouvoir faire la même chose avec Moz, pour le moteur de Mozilla, la même chose avec Microsoft, pour les anciennes versions. Et puis O pour Opéra, afin de voir comment ils vont être complémentaires. Alors, c'est vrai qu'aujourd'hui, on va plutôt graviter autour de Webkit-Mozilla, généralement KHTML, bien sûr. Mais c'est vrai, quand Apple a développé Webkit, il a fait énormément de retours d'ascenseurs vers KHTML, pour lui permettre de pouvoir passer les tests acides, et donc, de pouvoir monter en capacité de restitution. Alors ici, tout cela, va reposer sur des propriétés. Mais il faut penser, quand vous allez décrire votre règle, à rappeler que Webkit-Propriété, voilà la valeur, KHTML-Propriété, voilà la valeur. Voici, comment tout ça est approché par chacun de ces moteurs de rendu. Bien sûr, il faut révéler la propriété elle-même, pour que le jour où elle passe en mode recommandation, le navigateur puisse l'interpréter. Donc, si vous possédez une ancienne propriété Webkit, utilisée pour les tests qui d'un coup a été validée, à cause de la cascade (on la verra après) la propriété va être citée en dernier c'est elle qui remportera la mise et pourra le jouer. Là, on peut le jouer sur les propriétés pour chacun de ces moteurs de rendus. On peut aussi le jouer sur des valeurs, c'est-à-dire, on pourrait dire : attention ! la propriété, c'est Webkit- approche telle manière d'écrire la valeur ou telle manière est approchée par Mozilla, etc. Bien entendu, toujours finir par le type de valeurs qui sera la recommandation dernière. Alors, on peut définir comme ça, les propriétés et les valeurs, mais on peut aussi définir des mots clés comme @-Webkit-Keyframes-Animation. On explore certaines données dans l'animation qui sont dans des brouillons, on ne sait pas comment cela va se finir, voilà la proposition qui sera faite par Webkit. Donc, on va pouvoir déclarer une règle At-Webkit-Keyframes et puis Animation ; alors là, Animation, c'est un nom purement arbitraire. D'accord ? Il ne s'agit pas d'un mot clé, cela aurait pu être ici, Toto ou Ernest, aucun souci là-dessus. Le mot important clé, c'est ici, At-Webkit-Keyframes qui va permettre d'explorer en avant-première certaines des propriétés des modules de brouillons. Voilà, donc ici, le préfixage, par rapport aux moteurs de rendus, c'est quelque chose qui peut encore être d'actualité. Alors, comment savoir si l'on doit recourir au préfixe ou pas ? Il y a un site qui s'appelle shouldIprefix.com, ici, qui va nous permettre de voir les derniers éléments ici. Par exemple, le Border-radius : ici, n'a pas besoin de préfixe ; donc, si je clique là-dessus, on voit qu'on mettra Border-radius, qui est une manière d'écrire les valeurs. Par contre, si je vois Box-reflection ici, use-prefix, voilà, les prefix qu'on va devoir utiliser et la manière de les écrire. Je vous invite donc à parcourir ce site. Par exemple, ici, encore une fois, revenons sur les régions, Voyez ici ! on va pouvoir observer quelles sont les navigateurs, et les moteurs de rendus qui vont avoir besoin de préfixe, tel qu'il est conseillé de les utiliser.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !