Un ensemble de propriétés CSS3 multi-navigateurs. Crossbrowser CSS3, ou comment gérer le crossbrowser Internet Explorer Css

Note de l'auteur : les gens utilisent différents navigateurs pour naviguer sur le Web. Bien sûr, il existe les plus populaires, comme Chrome. Il en existe également des moins utilisés (Safari, Internet Explorer), mais si vous créez un site pour des personnes, vous devez connaître la compatibilité entre navigateurs - comment le créer et de quoi il s'agit. Voyons comment obtenir le même affichage du site dans tous les principaux navigateurs.

L'objectif principal de la compatibilité entre navigateurs est d'éviter des modifications significatives dans la conception du site dans différents navigateurs Web. Si la différence ne concerne que les détails et que cela n'affecte pas la perception globale du site, alors nous pouvons dire que vous avez résolu le problème de la compatibilité entre navigateurs. Mais quand même, quels vrais conseils peut-on donner à ce sujet ?

Comment obtenir une compatibilité entre navigateurs

À l'heure actuelle, il existe 5 principaux navigateurs les plus populaires pour lesquels vous devez optimiser le site. Et s'il est généralement facile de se lier d'amitié avec les versions les plus récentes des navigateurs Web, plus la version est ancienne, plus il peut y avoir de problèmes.

Par exemple, IE6 est l'un des navigateurs les plus problématiques en termes de prise en charge des nouvelles balises HTML et propriétés CSS. Et pourtant, certains exigent encore aujourd’hui l’affichage normal du site dans ce navigateur. Quant à moi, c'est déjà trop. La prise en charge d'IE8 est suffisante.

Il s’agit cependant d’une petite digression. Examinons maintenant les véritables étapes qui contribueront à rendre le site compatible avec tous les navigateurs.

Tirez le meilleur parti des solutions toutes faites. Si vous souhaitez implémenter de nouvelles fonctionnalités et apprendre aux anciens navigateurs à les comprendre, vous avez besoin de bibliothèques javascript. Sans eux, dans ce cas, il n'y a tout simplement nulle part. Vous devez installer jQuery.

Il existe une merveilleuse bibliothèque javascript appelée Modernizr. Ses capacités vous permettent d'implémenter une alternative pour les propriétés qui ne sont pas prises en charge. C'est ce que je vous recommande d'utiliser.

Donc, vous devez d’abord vous rendre sur le site officiel. https://modernizr.com/download. Ici, vous devez cocher les technologies que vous envisagez d'utiliser sur votre site. Je dois dire que la liste est assez longue et sans une connaissance moyenne des standards modernes du Web et de l'anglais, on peut difficilement la comprendre. Dans tous les cas, il existe également des propriétés intuitives. Même si vous cochez tout, le code résultant ne sera pas trop encombrant.

Riz. 1. Le choix des technologies que la bibliothèque vérifiera.

Vérification de la bibliothèque

Après avoir téléchargé la version personnalisée de la bibliothèque, vous devez vérifier son fonctionnement. Il devra être connecté à l'aide de la balise script, en précisant le chemin d'accès au fichier. Si tout est correct, alors la balise html devrait avoir de nombreuses nouvelles classes de style. Ces classes portent le nom des technologies que vous avez cochées.

>p?En conséquence, si une telle classe est spécifiée dans la balise html, alors la technologie fonctionne dans ce navigateur. Si quelque chose n’est pas pris en charge, alors la classe « nom sans technologie » sera enregistrée. Je vais vous donner un exemple tout de suite :

Par exemple, vous devez vérifier la propriété box-shadow. Pour référence, il définit l'ombre sur l'élément. Si le navigateur le prend en charge, cette classe de style apparaîtra dans la balise html. Si les navigateurs Web ne reconnaissent pas la propriété, la classe « no-boxshadow » apparaîtra.

Riz. 2. Dans la balise html, vous verrez de nombreuses classes. Dans ce cas, on constate que le navigateur prend en charge presque toutes les technologies.

Désormais, la gestion de la compatibilité entre navigateurs est entièrement entre vos mains. Il suffit de définir des propriétés alternatives à la classe no-boxshadow, et dans tous les navigateurs qui ne prennent pas en charge la propriété box-shadow, ces règles seront appliquées à la place. C'est très confortable.

Sur habrahabr, j'ai trouvé un autre exemple que j'aimerais vous donner ici. Il y avait un exemple de la façon dont la bibliothèque peut être utilisée pour implémenter des alternatives dans les anciens navigateurs.

Sélecteur Multiplebgs ( background-image: url("image.png") center 40px no-repeat, url("image2.png"); ) .no-multiplebgs selector ( background-image: url("image.png") center 40px gris clair sans répétition ; )

Sélecteur de fichiers multiples ( background - image : url ("image.png" ) centre 40px sans répétition, url ("image2.png" ) ; )

Sélecteur No - multiplebgs ( background - image : url("image.png" ) center 40px no - répétition lightgray ; )

Exemple d'explication. Nous nous intéressons à la technologie des arrière-plans multiples, supportée depuis longtemps par CSS3. Pour ce faire, il suffit de lister les adresses des images et leurs paramètres séparés par des virgules. Naturellement, les anciens navigateurs ne prennent pas en charge cela, nous écrivons donc nos propres styles en utilisant la classe .no-multiplebgs. Il précise que les styles s'appliquent si le navigateur ne prend pas en charge plusieurs arrière-plans.

Ainsi, il peut définir d'autres styles pour ce sélecteur et ainsi obtenir un bel affichage du site dans n'importe quel navigateur web. Bien entendu, afin de profiter pleinement des possibilités de Modernizr, vous devez bien connaître la programmation Web et la mise en page de sites Web. Une personne expérimentée saura déterminer quelles propriétés peuvent remplacer celles qui sont très mal supportées.

Bien entendu, les fonctionnalités de la bibliothèque sont beaucoup plus larges. Vous pouvez tester la prise en charge de diverses technologies et enchaîner les événements jusqu'au résultat final. Exemple.

La compatibilité entre navigateurs est généralement comprise comme la capacité d'un site à avoir la même apparence (ou la même qualité) dans tous les navigateurs.

Pour que le site soit aussi similaire que possible dans tous les navigateurs (modernes + prise en charge de certains anciens), vous devez connaître les différentes astuces et fonctionnalités des navigateurs. Nous allons maintenant les étudier.

Bloc . Navigateurs modernes

Les navigateurs suivants sont actuellement populaires : Internet Explorer (en abrégé IE, un navigateur de Microsoft intégré à Windows), Opera (navigateur norvégien), Mozilla (alias Firefox), Google Chrome (navigateur de Google), Safari (navigateur d'Apple) . Navigateurs sur appareils mobiles : Android, IOS.

Bloc . Moteurs de navigateur

En plus des navigateurs, il existe moteur navigateur. Un moteur est le cœur d'un navigateur qui convertit le HTML et le CSS en une image visible à l'écran. Il existe beaucoup moins de moteurs que de navigateurs et, par conséquent, de nombreux navigateurs ont les mêmes moteurs et donc les mêmes fonctionnalités et bugs (problèmes).

Types de moteurs : Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera jusqu'à la version 14). Trident (Internet Explorer).

Veuillez noter qu'Opera, à partir de la version 14, est passé au moteur Webkit.

Actuellement, Webkit est divisé en deux moteurs Blink de Google Chrome et Opera 14+ et un moteur de Safari. Ces deux moteurs supportent toujours le préfixe -webkit, cependant, leur séparation est déjà visible sur certaines propriétés CSS, comme les tirets.

Le navigateur Internet Explorer n'existe officiellement plus, sa dernière version est la 11ème. Cependant, dans les faits, ce navigateur a changé de nom (mais pas de moteur) et s'appelle désormais Edge.

Bloc . Préfixes du fournisseur

La situation actuelle parmi les navigateurs est qu'avant qu'une propriété CSS n'apparaisse dans la spécification, les navigateurs peuvent implémenter une version d'essai de cette propriété avec un préfixe spécial appelé préfixe du fournisseur(du mot vendeurs - développeurs, préfixe développeur).

À quoi cela ressemble, regardons l'exemple de la propriété box-sizing (changement du modèle de boîte).

P ( dimensionnement de la boîte : bordure-boîte ; )

Cette propriété n'est supportée que depuis Firefox 29, mais depuis Firefox 2 elle est disponible avec le préfixe -moz :

P ( -moz-box-sizing: bordure-box; )

D'autres navigateurs ont des préfixes similaires : -moz - Mozilla/Firefox (moteur Gecko), -webkit - Navigateurs à moteur Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera jusqu'à la version 13 incluse (moteur Presto ) ), -ms - IE à partir de la version 8+.

Ainsi, la version la plus multi-navigateurs de la propriété box-sizing, utilisant les préfixes des fournisseurs, ressemblera à ceci (vous n'avez pas besoin de l'écrire avec le préfixe -ms, IE a immédiatement basculé pour prendre en charge cette propriété) :

P ( -webkit-box-sizing : bordure-boîte ; -moz-box-sizing : bordure-boîte ; box-sizing : bordure-boîte ; )

En CSS, de nombreuses propriétés ont une implémentation similaire, avec et sans préfixe.

Veuillez également noter qu'Opera est passé à Webkit à partir de la version 14 et qu'il utilisera désormais le préfixe -webkit, tandis que le préfixe -o ne restera que pour les anciennes versions (jusqu'à 14).

Il y a la règle suivante : les propriétés préfixées sont écrites avant les propriétés non préfixées. Ceci est fait pour que la propriété principale écrase les propriétés avec des préfixes, puisque le navigateur peut prendre en charge une propriété avec ou sans préfixe. Et une propriété avec un préfixe peut fonctionner avec n'importe quel problème.

Actuellement, certains navigateurs ont décidé d'abandonner les préfixes en raison de leurs inconvénients. Et maintenant, à leur place, ils utilisent ce qu'on appelle drapeaux. Les propriétés sont désormais intégrées au navigateur, mais sont désactivées par défaut. Cependant, elles peuvent être activées dans les paramètres du navigateur en cochant la case appropriée dans les paramètres. Les navigateurs Google Chrome et Opera prennent actuellement en charge ce modèle pour les nouvelles propriétés.

Bloc . Où voir quels préfixes écrire

Je recommande un service spécial caniuse.com, où vous pouvez voir quelles propriétés peuvent déjà être utilisées et si vous devez ou non écrire des préfixes pour elles.

Bloc . Statistiques du navigateur

Afin de savoir quel navigateur doit être pris en charge actuellement et lequel doit être abandonné, il est nécessaire de suivre les statistiques des navigateurs dans la région du site. Cela peut être fait en utilisant le service suivant : gs.statcounter.com - tous les navigateurs avec des versions par pays (anglais).

Bloc . Comment tester un site dans différents navigateurs

Après avoir créé le site, il doit être testé dans tous les navigateurs courants. Cependant, cela n'est pas aussi simple qu'il y paraît : non seulement les navigateurs diffèrent d'une version à l'autre, il existe également des différences entre une version du navigateur sous Windows et, par exemple, Linux. Il est clair qu'il est tout simplement impossible d'avoir autant de navigateurs.

Des services spéciaux viennent à la rescousse, qui prennent des captures d'écran du site dans différentes versions du site.

Bloc . Normalisation des styles

En plus des réinitialisations, il existe ce qu'on appelle normalisation- c'est à ce moment-là que les valeursdes propriétés (par exemple, margin et padding) ne sont pas remises à zéro, mais que certaines valeurs pratiques leur sont indiquées (de sorte que dans tous les navigateurs les retraits par défaut soient les pareil et pratique).

N'oubliez pas de réinitialiser les styles avant de connecter vos styles, pas après !

CSS Reset doit être placé dans un fichier séparé (généralement appelé reset.css). Dans ce cas, vous pouvez l’utiliser dans différents projets sans faire aucun effort pour le séparer des autres règles CSS.

N'hésitez pas à modifier reset.css lui-même. Personnalisez-le pour vous, faites-le fonctionner pour vous. Modifiez, réorganisez, supprimez et ajoutez selon les besoins de votre cas particulier.

Il est logique d'ajouter des styles par défaut pour h1-h6 (comme la taille de la police), pour td (make text-align: center), etc.

Qu'est ce que tu fais après:

Commencez à résoudre les problèmes sur le lien suivant : tâches pour la leçon.

Lorsque tout est décidé, passez à l'étude d'un nouveau sujet.

Bonjour chers lecteurs !

Nous souhaitons tous que nos styles s’affichent correctement dans les différents navigateurs. Mais quoi qu'on en dise, vous devrez ajouter des styles pour qu'ils fonctionnent dans d'autres navigateurs. Ce processus est appelé : amener la mise en page du site à une vue multi-navigateur. La compatibilité entre navigateurs se produit lorsque les styles CSS sont correctement affichés dans différents navigateurs et leurs différentes versions.

Je veux donner quelques conseils sur le processus d'apport de votre CSS à la compatibilité entre navigateurs a pris moins de temps.

Concentrez-vous sur les navigateurs les plus populaires. Les évaluations des navigateurs peuvent être trouvées sur le Web. Il convient également de considérer la région d'audience du site. Par exemple, s'il s'agit d'un site destiné à un public africain, ce n'est pas Chrome, mais un autre navigateur qui prévaut déjà ici. De plus, pendant le processus de mise en page, il convient d'examiner à quoi ressemble le site dans les navigateurs qui occupent la 2e et la 3e place.

2. Vous pouvez rechercher les plus populaires style css, qui ne s'affichent pas correctement dans les autres navigateurs. Trouvez des hacks CSS pour eux.

3. Il existe des outils spéciaux sur le net pour générer des styles multi-navigateurs. Je souhaite souligner les 2 plus intéressants à mon avis.

Outils pour CSS multi-navigateurs.

De nombreux styles ont été décrits ;
Il y a un exemple d'utilisation avec le résultat.

Il est difficile de naviguer sur le site au début ;
Il est impossible de générer un style avec ses propres paramètres (un exemple d'utilisation est donné).

Générateur CSS3

Utilisation pratique et intuitive ;
Vous pouvez générer des styles pour vos paramètres ;
Vous pouvez voir le résultat du style généré.

Peu de styles

Lorsque CSS est utilisé non seulement pour la décoration de texte, mais également pour travailler avec des calques dans une mise en page sans tableau, il ne faut pas oublier que les navigateurs modernes ne traitent pas des paramètres aussi importants que la marge - la marge extérieure de l'élément, le remplissage - la marge intérieure de l'élément, ainsi que les paramètres de position - position , float - habillage du texte et plusieurs autres.

En raison de ces différences dans l'interprétation des valeurs des paramètres, il arrive souvent que des sites et des interfaces Web qui semblent bien dans les navigateurs Mozilla Firefox, Opera et Safari commencent soudainement à se séparer dans Internet Explorer.

Au cœur de ces différences dans la façon dont les navigateurs interprètent CSS se trouve la conformité incomplète des navigateurs Internet Explorer antérieurs à la version 7 avec les normes CSS adoptées par le W3C. Par conséquent, une mise en page sans table réussie pour les versions d'IE antérieures à 7 nécessite l'utilisation d'un certain nombre de constructions spéciales appelées hacks CSS. Il est également important de noter que d'autres navigateurs doivent parfois utiliser un hack CSS.

Pensez à écrire du CSS qui ne serait interprété que par certains types de navigateurs :

Table des matières du document

CSS pour IE 5, 5.5, 6, 7 Commentaires conditionnels Les navigateurs IE prennent depuis longtemps en charge ce que l'on appelle les commentaires conditionnels, qui vous permettent de rendre le contenu visible uniquement par IE. Les commentaires conditionnels sont simplement des commentaires HTML spécialement formés que seules certaines versions d'Internet Explorer pour Windows comprennent. Par exemple, vous pouvez utiliser des commentaires conditionnels pour corriger un bug de transparence PNG dans IE.

Pour les utiliser, il vous faut :

Tout d'abord, créez une feuille de style commune pour tous les navigateurs, sans aucun hack, afin que nous puissions ensuite continuer à travailler sur la correction des erreurs lors de l'affichage de la page dans IE.

La feuille de style corrigée par le bug est ensuite enregistrée séparément et devient la feuille de style pour toutes les versions d'IE (par exemple, all-ie.css).

Enregistrez les feuilles de style avec les corrections de bugs séparément pour chaque version d'IE (par exemple ie-5.0.css).

L'étape suivante consiste à connecter ces feuilles de style séquentiellement via le code HTML à l'aide de commentaires conditionnels.

Syntaxe des commentaires conditionnels Le commentaire conditionnel suivant sera compris par IE5, IE5.5 et IE6, ainsi que par IE7 et IE8 :

Application de CSS pour IE5 Si vous souhaitez appliquer un commentaire conditionnel pour IE5 uniquement, il vous suffit de spécifier la version 5.0 dans la condition if d'IE 5.0 :

Application de CSS pour IE5.5 S'il est appliqué par rapport à IE5.5, cela ressemblerait à ceci :

Appliquer CSS pour IE6 Idem pour IE6 :

Application de CSS pour IE5 et IE5.5 simultanément ou pour plusieurs versions Si vous souhaitez corriger un bug de modèle de boîte dans les navigateurs IE5 et IE5.5 à l'aide de commentaires conditionnels, vous pouvez utiliser la partie index de version ou les opérateurs de comparaison.

Le premier exemple reliera la feuille de style à n'importe quelle version d'Internet Explorer dont le premier chiffre est 5 :

Comme alternative, vous pouvez spécifier que les feuilles de style soient incluses dans toute version de navigateur inférieure à 6 :

Au lieu de lt (moins que - moins), vous pouvez également utiliser lte (inférieur ou égal à - moins ou égal), gt (plus grand que - plus), gte (plus grand ou plus). qual à - supérieur ou égal à) l'essentiel avec toute cette variété de possibilités est de choisir correctement l'ordre de spécification des commentaires conditionnels afin de ne pas se retrouver dans une situation où, pour certains navigateurs, des groupes de commentaires conditionnels se croisent, donnant un résultat inattendu.

Comment utiliser Si vous ne souhaitez pas que les feuilles de style générales dominent les tableaux créés spécifiquement pour IE, vous devez d'abord inclure les tableaux généraux, puis ensuite seulement les tableaux pour IE. Par exemple, cela ressemble à ceci :

Autres avantages de cette méthode En utilisant des commentaires conditionnels, vous obtenez également un moyen de déterminer de manière plus fiable la version du navigateur. Les navigateurs qui prétendent être Internet Explorer mais ne sont pas vraiment Internet Explorer n'utiliseront pas de feuilles de style spécifiques à IE. Avec cette méthode, vous pouvez compiler des statistiques précises sur la version d'IE que les visiteurs utilisent, sans erreurs causées par des programmes et des navigateurs usurpant l'identité d'IE. Validité L'un des aspects les plus intéressants de cette technique est peut-être que vos feuilles de style et votre fichier (X) soigneusement formaté Les documents HTML resteront entièrement conformes à la spécification Débogage Commentaires conditionnels Il y a une mise en garde qui mérite d'être mentionnée.

Si vous utilisez plusieurs versions d'Internet Explorer sur le même ordinateur, toutes ces versions prétendront être la version la plus récente installée. Cela signifie que si IE6 est installé mais que vous consultez la page en utilisant IE5, ce commentaire conditionnel sera exécuté :

Et ce commentaire conditionnel ne sera pas exécuté :

Pour le suivi le plus précis des différences dans la façon dont CSS est géré par les différentes versions d'IE, IETester est un programme gratuit bien établi qui prend en charge toutes les versions d'IE de 5 à 8. Et pour modifier rapidement les paramètres CSS dans IE8 en appuyant sur F12, un Un outil de développement est disponible, qui rappelle FireBug dans Mozilla Firefox.

Semblable à la déclaration de feuilles de style, cette méthode peut être utilisée pour masquer le code HTML d’une version spécifique ou de toutes les versions d’IE. Par exemple, le « code HTML » sera affiché dans tous les navigateurs sauf IE6 s'il est placé dans un commentaire conditionnel comme celui-ci :

Code HTML

Balise Gardez à l'esprit que les commentaires conditionnels dans IE peuvent être utilisés n'importe où sur la page, pas seulement pour déclarer des feuilles de style pour la version correspondante du navigateur. Avec les commentaires conditionnels, vous pouvez afficher des informations supplémentaires aux utilisateurs d'IE qui ne sont pas visibles pour les utilisateurs d'autres navigateurs.

Semblable aux commentaires conditionnels dans IE 5--IE 8, la balise ... est prise en charge. Cette balise permet de cacher des informations aux utilisateurs d'IE, donc le code :

Ce n'est pas Internet Explorer

Les utilisateurs d'IE seront affichés comme suit : Ceci est le navigateur Internet Explorer, et les utilisateurs d'autres navigateurs seront affichés comme ceci n'est pas le navigateur Internet Explorer.

La balise n'est pas valide.

Astuces CSS IE Pour éviter d'encombrer votre code HTML avec plusieurs déclarations de feuilles de style, ou si vous souhaitez conserver un seul fichier CSS, vous pouvez écrire des styles distincts qui ne fonctionneront que dans IE. De plus, il existe une option pour IE6 et IE7.

Pour IE toutes les versions. Si vous faites précéder une propriété de deux barres obliques (//), elle ne sera lue que par les navigateurs IE de toutes les versions. Les autres navigateurs ignoreront cette propriété.

Il est possible pour IE6 de mettre un moins (-) ou un trait de soulignement (_) devant une propriété sans que IE7 n'y réagisse. Vous pouvez également utiliser la construction :

*html.style(...)

Par exemple:

Style ( background : rouge; /* pour les navigateurs normaux */ //background : vert; /* pour tous les IE */ -background : bleu; /* pour IE6 */ ) * html .style ( background : bleu; /* autre façon pour IE6 */ )

Dans ce cas, l'arrière-plan sera rouge dans les navigateurs Opera et Firefox, vert dans IE7 et bleu dans Internet Explorer 6.

L'exemple modifie la couleur d'arrière-plan pour différents navigateurs. En pratique, cette méthode est utilisée pour obtenir l’identité d’affichage et la compatibilité entre navigateurs. Le plus souvent, vous devez y recourir lors du positionnement et définir différentes valeurs pour des propriétés telles que left, top, padding, margin, width et autres liées aux tailles, pourcentages et pixels.

Pour IE7, le hack CSS est :

* : premier-enfant+html .style (...)

*+html .style (...)

CSS pour Firefox Il existe également des hacks CSS spéciaux qui vous permettent d'afficher les styles uniquement sur le navigateur Firefox.

html: root .style ( ...) /* celui-ci fonctionne également pour Safari */

Style, x : -moz-any-link (...)

Pour modifier rapidement les paramètres CSS dans Firefox en appuyant sur F12, l'outil de développement Firebug est disponible (nécessite une pré-installation) - c'est le meilleur parmi les analogues.

CSS pour Opera Les hacks CSS pour le navigateur Opera sont représentés par les exemples suivants :

La compatibilité entre navigateurs est la capacité d'un site à s'afficher correctement dans différents navigateurs. La ressource doit fonctionner de la même manière dans toutes les versions du navigateur.

Ceci est particulièrement important à l’ère de la conception Web réactive, où la capacité du frontal à s’adapter à un large éventail d’appareils différents tout en offrant une expérience de visualisation optimale est mise en avant.

Auparavant, un concepteur créait une mise en page dans Photoshop, qui était ensuite transférée au format HTML et CSS. Aujourd’hui, les évolutions technologiques obligent à repenser ce concept. Nous ne pouvons plus prédire quel navigateur, quelle résolution ou quel appareil sera utilisé pour consulter le site. Il est révolu le temps où la plupart des ordinateurs utilisaient une résolution fixe de 1024 x 768 pixels et où il était possible de développer des sites Web aux dimensions statiques.

Les navigateurs modernes prennent entièrement en charge HTML5 et CSS3. Mais le même code HTML/CSS/JavaScript est interprété différemment dans les anciens navigateurs, ce qui conduit à une « incompatibilité entre navigateurs » du site. Cela est particulièrement vrai pour les anciennes versions d'Internet Explorer.

Dans cet article, nous examinerons les statistiques actuelles sur les visites de pages Web et fournirons une liste d'outils qui aident à résoudre divers problèmes de compatibilité.

1. Situation actuelle

Les statistiques mondiales pour 2015 montrent que les 14 résolutions d'écran les plus utilisées vont de 1920 x 1080 à 320 x 480 pixels.

Même si Windows 7 (31,20 %) détient toujours une part de marché importante, les plateformes mobiles commencent à remplacer les plateformes de bureau traditionnelles.

En regardant les statistiques de 2015 sur les navigateurs utilisés, on voit que la première place appartient à Chrome (toutes versions - 44,87% ), la deuxième place est Firefox (toutes versions - 10,37% ), la troisième Internet Explorer 11 (6,84 % ) .

Le rythme accéléré de sortie des nouvelles versions de Google Chrome et Firefox vous permet de développer plus efficacement des projets pour ces plateformes. Une image légèrement différente se dessine pour le "méchant" Internet Explorer, car vous pouvez toujours en trouver d'anciennes versions sur le Web. Et cela entraîne des problèmes de compatibilité entre navigateurs du site.

Microsoft a mis fin au support d'IE6 le 8 avril 2014. Et à partir de 2016, seule la dernière version d'Internet Explorer sera prise en charge et mise à jour. Cela signifie effectivement que la prise en charge d'IE7 et IE8 a été complètement abandonnée début 2016, quel que soit le système d'exploitation. IE9 ne sera pris en charge que sur Windows Vista, IE10 sur Windows Server 2012 uniquement, IE11 sur Windows 7 et Windows 8.1 :

En conséquence, le développement pour IE6 et IE7 devrait être arrêté. Pour justifier cette stratégie, voici quelques exemples d'entreprises connues : Google a mis fin au support d'IE8 en novembre 2012 et d'IE9 en octobre 2013.

Github ne prend plus en charge IE 7 et 8. En dehors de cela, une partie des fonctionnalités de Twitter ne fonctionne pas dans IE8. Et enfin, le framework populaire ne prendra pas en charge IE8 à partir de la version 4.

Cependant, les statistiques d'utilisation peuvent varier selon les régions, avec 6,11 % des utilisateurs en Chine naviguant encore via IE8 en 2015. Si l'on prend en compte qu'il y avait environ 724 400 000 utilisateurs d'Internet en Chine, on peut comprendre que cette année, environ 44 200 000 Chinois continuent d'utiliser IE8.

Par conséquent, les marchés régionaux, les clients spécifiques et les exigences du secteur peuvent différer considérablement. Cela est particulièrement vrai pour les entreprises et les agences gouvernementales.

2. Analysez votre audience

Le principe de base ici est le suivant : plus la compatibilité multi-navigateurs requise est élevée, plus le développement prendra du temps, ce qui entraîne une augmentation du coût du projet. Pour prendre une décision éclairée et économiquement judicieuse, vous devez vous poser les questions suivantes :

Quel est votre public cible ?
Quelle zone géographique dois-je cibler ?
Quels navigateurs et appareils vos visiteurs utilisent-ils ?
Existe-t-il des facteurs techniques au sein de l'entreprise ou du secteur qui vous obligent à prendre en charge des versions spécifiques d'anciens navigateurs ?
Du point de vue du commerce électronique, quels sont les taux de conversion et de retour sur investissement pour les différents groupes d'utilisateurs dans les versions de navigateur ?

En répondant à ces questions à l'aide de données statistiques, par exemple de Google Analytics, vous pouvez obtenir une image objective.

3. Problèmes dans les navigateurs existants et différentes approches de développement

La conception Web réactive s'appuie fortement sur les requêtes multimédias qui modifient le CSS pour différentes résolutions d'écran. De plus, les sites Web modernes se caractérisent par l'utilisation d'éléments sémantiques HTML5 (par exemple, , , , , ) pour regrouper les composants de conception. Les sélecteurs CSS3 sont utilisés pour sélectionner des éléments spécifiques et les styliser davantage (par exemple, :checked , :nth-child(n) , :not(selector) , :last-child)) . Enfin, la typographie réactive est souvent spécifiée à l'aide d'unités REM (root em ).

Cela nous amène aux défis techniques suivants lors de la mise en œuvre de CSS entre navigateurs :

Requêtes multimédias CSS3
Éléments sémantiques HTML5 : non pris en charge dans IE6, 7 et 8 ;
Sélecteurs CSS3 : non pris en charge dans IE6 . Seulement partiellement pris en charge dans IE7 et 8 ;
Unités REM : Non pris en charge dans IE6 , 7 et 8 . Seulement partiellement pris en charge dans IE9 et 10 ;
Limite des règles CSS : IE9 et versions antérieures ne prennent en charge que 4 095 sélecteurs CSS. Les règles après le 4095ème sélecteur ne sont pas appliquées.

Les erreurs ci-dessus auront le plus grand impact sur la stratégie utilisée lors de la mise en œuvre du design réactif.

Il existe deux principales stratégies de développement : la simplification progressive et l'amélioration progressive.

Amélioration progressive - Basée sur le principe de démarrer le développement avec un dénominateur commun, avec des exigences techniques minimales et le niveau d'expérience utilisateur offert par le site. Les visiteurs accédant au site sur les derniers navigateurs et appareils se verront proposer une version progressivement améliorée du site avec toutes les dernières fonctionnalités.

En revanche, les utilisateurs de navigateurs plus anciens et de connexions Internet lentes se verront proposer une version du site graphiquement tronquée, mais toujours fonctionnelle.

Une approche similaire lors de la mise en œuvre de la compatibilité entre navigateurs consiste à commencer le développement avec une version simple, à laquelle des éléments plus complexes sont ensuite ajoutés. Les navigateurs plus anciens pourront afficher le site avec un niveau d’expérience utilisateur de base. Et de nouvelles fonctionnalités HTML/CSS/JavaScript seront disponibles dans les navigateurs capables de les utiliser.

En revanche, la simplification progressive fournit un niveau d’UX entièrement fonctionnel dans les navigateurs modernes. Et puis réduit progressivement sa complexité pour les navigateurs plus anciens au détriment du graphisme, mais sans toucher aux fonctionnalités. L'idée est de commencer le développement avec les derniers standards du Web, puis d'essayer de minimiser les problèmes associés aux anciens navigateurs.

L'approche que vous choisissez dépend de vos préférences personnelles et des conditions du projet :

L'amélioration progressive offre plus de stabilité car vous pouvez ajouter progressivement de nouvelles fonctionnalités pour les navigateurs modernes. Mais cela nécessite une planification plus minutieuse ;
Certains développeurs affirment que cela n’a aucun sens de prendre en charge les navigateurs existants et qu’il convient d’utiliser les dernières technologies. La prise en charge des navigateurs modernes offre une bien meilleure expérience utilisateur ;
Il existe une opinion selon laquelle l'amélioration progressive est morte car de nombreuses applications JavaScript ne fonctionnent pas correctement avec cette approche ;
L'accessibilité du Web pour les institutions publiques peut être déterminée par les exigences légales d'entités territoriales spécifiques, ce qui peut nécessiter une approche particulière.

Avec l'avènement d'outils de détection de fonctionnalités comme Modernizr , je penche personnellement pour l'utilisation d'une simplification progressive et de la liste noire des navigateurs lors du développement de sites compatibles.

4. Tester, tester, tester…

Pour détecter les problèmes JavaScript potentiels entre navigateurs dès que possible, vous devez tester votre site dans différents navigateurs et résolutions pendant le processus de développement. Il existe différents émulateurs de logiciels qui peuvent nous aider :

Browserstack est un service commercial qui donne accès à un environnement de test dans lequel vous pouvez tester votre projet sur plus de 700 navigateurs de bureau et appareils mobiles à l'aide d'une machine virtuelle dans le cloud ;
Machines virtuelles Microsoft – Si vous utilisez Linux, vous n'aurez pas accès à Internet Explorer. La solution pourrait consister à télécharger des images de machine virtuelle IE6 dans IE11, qui peuvent ensuite être utilisées conjointement avec Oracle VM Virtualbox ou Vagrant pour des tests locaux ;
Différentes résolutions d'écran pour un navigateur particulier peuvent être rapidement testées à l'aide du service en ligne Screenfly. En utilisant des plugins de navigateur tels que Window Resizer pour Google Chrome, ou directement depuis la section des outils de développement de Chrome et Firefox.

5. Normalize.css et préfixeur automatique CSS

Je démarre généralement de nouveaux projets en réinitialisant CSS avec Normalize.css , qui offre une meilleure compatibilité entre navigateurs avec les styles d'éléments HTML jusqu'à Internet Explorer 8 inclus. Normalize.css préserve les styles d'éléments souhaités, normalise leur apparence et corrige un certain nombre d'erreurs et d'incohérences dans divers navigateurs.

De plus, de nombreux navigateurs existants ne peuvent pas interpréter les éléments HTML et les propriétés CSS inconnus. Lorsque le navigateur rencontre un élément HTML ou CSS qu'il ne comprend pas, il l'ignore et poursuit le processus de rendu. De nombreuses applications utilisent des préfixes de fournisseurs pour ajouter des fonctionnalités CSS nouvelles, expérimentales ou non standard avant qu'elles ne soient implémentées dans la spécification :

// Navigateurs Webkit tels que Chrome et Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Le problème est que les préfixes sont difficiles à utiliser et sont associés à de nombreux bugs. J'utilise donc le plugin CSS Autoprefixer en combinaison avec Grunt .

Les règles CSS régulières seront analysées par le plugin et préfixées en fonction de la base de données « Puis-je utiliser ». Il est recommandé de préciser dans la configuration les versions des navigateurs que vous souhaitez supporter, par exemple :

options : (navigateurs : ["2 dernières versions", "ie >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )

À titre d'exemple, considérons la classe CSS suivante :

Exemple (image d'arrière-plan : dégradé linéaire (en haut à gauche, #4676dd, #00345b); affichage : flex ; transition : 1s tous ; )

Avec l'aide de CSS Autoprefixer, il est converti en :

Exemple (image d'arrière-plan : -webkit-linear-gradient (en haut à gauche, #4676dd, #00345b); image d'arrière-plan : -moz-linear-gradient (en haut à gauche, #4676dd, #00345b); image d'arrière-plan : linéaire- dégradé (en haut à gauche, #4676dd, #00345b); affichage : -webkit-box ; affichage : -webkit-flex ; affichage : -moz-box ; affichage : -ms-flexbox ; affichage : flex ; -webkit-transition : 1s tous ; -moz-transition : 1s tous ; transition : 1s tous ; )

6. Commentaires conditionnels

Si vous devez créer un CSS de secours ou activer JavaScript pour plusieurs navigateurs pour les versions antérieures d'Internet Explorer, vous pouvez utiliser des commentaires conditionnels. Ils sont pris en charge dans Internet Explorer 5-9 et utilisent la syntaxe de commentaire HTML combinée à des booléens. En fonction de la valeur booléenne (true ou false ), le code à l'intérieur des balises de commentaire sera affiché ou masqué dans les versions respectives du navigateur :

CODE À EXÉCUTER // si Internet Explorer // si NON Internet Explorer // si Internet Explorer 7 // si NON Internet Explorer 7 // si Internet Explorer 9 ou INFÉRIEUR // si Internet Explorer 7 ou SUPÉRIEUR // si Internet Explorer 6 OU 7 // si AU-DESSUS d'Internet Explorer 6 MAIS EN DESSOUS DE 9

Le code est automatiquement masqué dans tous les navigateurs qui ne prennent pas en charge les commentaires conditionnels. Un excellent exemple de la façon dont les commentaires conditionnels peuvent être utilisés efficacement dans la pratique est le HTML5 Boilerplate, qui ajoute des classes CSS spécifiques pour les anciennes versions d'Internet Explorer :

7. Polyremplissages

Les incohérences techniques dans les navigateurs existants pour la conception Web réactive peuvent être corrigées avec un polyfill. Il s'agit d'un morceau de code JavaScript qui « comble » une lacune fonctionnelle spécifique entre un navigateur existant et une fonctionnalité. Il existe un certain nombre de polyfills qui peuvent être utilisés pour fournir au navigateur la prise en charge des fonctionnalités HTML5.

Vous trouverez ci-dessous quelques polyfills conçus pour résoudre les problèmes de compatibilité entre navigateurs du site mentionnés au point 3 :

répond.js - implémente les requêtes multimédias CSS3 pour Internet Explorer 6 à 8 ;
html5shiv permet l'utilisation d'éléments sémantiques HTML5 dans Internet Explorer 6 - 8 ;
selectivzr - émule les sélecteurs CSS3 et les pseudo-classes dans Internet Explorer 6 - 8. La prise en charge complète nécessite Mootools 1.3 ou NWMatcher 1.2.3. Un support partiel est disponible avec jQuery 1.3/1.4 ;
REM-unit-polyfill - Détermine si le navigateur prend en charge les unités rem et fournit une solution de secours. Fonctionne avec IE8 et versions antérieures.

Pour utiliser ces polyfills, ils doivent être ajoutés depuis le CDN ou sous forme de fichier au format correct à l'intérieur des commentaires conditionnels de la section (n'oubliez pas d'inclure l'une des bibliothèques JavaScript requises pour Selectivizr ) :

Pour chaque projet, vous devez évaluer si ces scripts supplémentaires sont réellement nécessaires, car ils peuvent entraîner des problèmes de performances. La plupart des polyfills sont compacts, mais chaque script supplémentaire chargé est une requête HTTP supplémentaire. Cela peut ralentir le chargement des pages.

8. Définir des fonctions avec Modernizr

La bibliothèque Modernizr, écrite en JavaScript, vous aidera à vérifier la compatibilité entre navigateurs du site : si une fonction HTML5 ou CSS3 particulière est prise en charge dans différents navigateurs. Si la fonctionnalité n'est pas disponible, un code CSS ou JavaScript alternatif peut être chargé.

L’idée est de détecter directement les fonctionnalités du navigateur, plutôt que d’essayer d’en installer une version spécifique. Et sur cette base, dérivez ses fonctionnalités, qui sont moins efficaces et moins fiables.

Il convient de noter que Modernizr n'ajoute pas les fonctionnalités manquantes au navigateur. Par conséquent, vous devrez fournir du code à partir d’un CSS ou d’un polyfill de secours.

Vous devez d’abord télécharger un assemblage entièrement fonctionnel. Plus tard, lorsque vous serez prêt à développer, vous pourrez créer une version personnalisée avec les fonctionnalités spécifiques que vous testez. Tout ce que vous avez à faire est d'ajouter la classe .no-js à la balise HTML de votre site et d'inclure le script Modernizr dans la section head après tout fichier CSS :

Démo Modernizr Démo Modernizr

Il s’agit d’un exercice de modernisation.

La classe .no-js est utilisée pour vérifier si JavaScript est activé dans le navigateur de l'utilisateur. S'il est activé, Modernizr remplacera .no-js par la classe .js. La fonctionnalité de test Modernizr analyse si une fonctionnalité particulière est prise en charge dans le navigateur et génère un ensemble de classes qui sont ajoutées à l'élément HTML. Google Chrome 47.0.2526.111, par exemple, renverra les classes d'objets suivantes.

Modernizr est actuellement disponible en tant qu'objet global qui peut être appelé conjointement avec un nom de fonction pour vérifier s'il existe. Il renvoie une valeur booléenne (true ou false ).

Examinons deux exemples simples CSS et JavaScript.

Exemple de résolution de problèmes CSS multi-navigateurs : vérification de la prise en charge de SVG et fourniture de PNG comme solution de secours

La tendance actuelle est d'utiliser de plus en plus de SVG (Scalable Vector Graphics), mais ces graphiques ne sont pas pris en charge dans IE8 et versions antérieures. Si SVG est pris en charge dans le navigateur, Modernizr génère la classe CSS .svg. Si SVG n'est pas disponible, l'outil ajoute la classe .no-svg au HTML. Avec le CSS ci-dessous, les navigateurs compatibles SVG utiliseront la classe .logo normale, tandis que les navigateurs non compatibles SVG utiliseront les règles .no-svg :

Logo ( image d'arrière-plan : url("logo.svg"); largeur : 164px; hauteur : 49px; ) .no-svg .logo ( image d'arrière-plan : url("/logo.png"); largeur : 164px; hauteur :49px; )

Exemple JavaScript : définition du rayon de bordure et ajout de classes CSS appropriées

L’arrondi des coins du cadre n’est pas pris en charge dans IE8 et versions antérieures. Nous pouvons créer différentes classes CSS qui sont appliquées en fonction de la présence de la fonction border-radius :

// Classe pour navigateur avec fonction border-radius .round-borders ( border-radius: 5px; ) // Classe pour navigateur sans fonction border-radius .black-borders ( border: 3px solid #000000; )

Nous pouvons maintenant utiliser JavaScript pour stocker l'identifiant cible en tant que variable, puis ajouter les classes CSS via un conditionnel :

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "round-borders"; ) else ( element.className = "black-borders"; )

Conclusion

Lorsqu’il s’agit de conception Web réactive dans les navigateurs existants, il n’existe pas de solution universelle. Il est important d'analyser l'audience de la ressource afin d'avoir une idée du nombre réel d'utilisateurs du navigateur. Ensuite, vous devez tester minutieusement le site pour identifier les problèmes potentiels entre navigateurs.