Il semble que presque le monde entier ait abandonné IE6. Eh bien, peut-être que 5 % des utilisateurs l'utilisent encore, mais ce n'est pas la faute des développeurs Web s'ils utilisent des logiciels obsolètes.

Si vous développez des sites Web et des applications, vous savez probablement que le pourcentage d'utilisateurs d'IE6 est déjà très faible. Par exemple, d'après les statistiques de notre site Web, seulement 0,5 % de nos visiteurs utilisent IE6 (30 derniers jours). Probablement, vos statistiques montrent à peu près les mêmes données.

Pour cette raison, les concepteurs et développeurs Web n'ont plus que des hacks pour IE7 et IE8. Tout d'abord, il est important de souligner le fait que si vous suivez certains principes de conception de code CSS, vous n'aurez pas du tout besoin de hacks.

Cependant, de nombreux développeurs novices ont souvent besoin de définir IE7 ou IE8. Familiarisons-nous avec de la meilleure façon possible solution à ce problème.

Classes conditionnelles par Paul Irish

La meilleure méthode est de pointer et a été développée par Paul Irish. Nous le faisons comme suit :

Code donné est utilisé pour définir des versions spécifiques d'IE, et l'élément HTML obtient un nom de classe distinct pour chaque version d'IE, et aucune classe du tout si le navigateur de l'utilisateur n'est pas IE.

Élément(
marge inférieure : 20px
}

c'est-à-dire7.élément(
marge inférieure : 10px ;
}

c'est-à-dire8 .élément(
marge inférieure : 15px ;
}
Chaque navigateur aura une marge inférieure de 20px, mais dans IE7 et 8, elle sera respectivement de 10px et 15px.

La chose importante à noter ici est que la définition d'IE est parfois très importante, mais je vous recommande de faire de votre mieux pour trouver la meilleure solution pour contourner les incohérences entre les navigateurs. Essayez d'éviter d'utiliser des classes conditionnelles et des hacks ultérieurs, qui seront discutés plus tard. Parfois, il est plus facile et plus correct de simplement structurer le code CSS différemment.

Hacks CSS

Examinons maintenant les moyens de détecter IE7-8 via des hacks. Tout d'abord, nous allons apprendre à détecter uniquement IE7. Il y a probablement plus de 2 méthodes ici, mais nous ne vous en dirons que 2 (vous n'aurez besoin de rien d'autre) :

*+html.élément(
marge inférieure : 10px ;
}
Le hack est la partie du sélecteur qui précède le .element. Aucun autre navigateur ne reconnaîtra ce sélecteur, donc la boîte 10px n'existera que dans IE7.

Et un de plus en moins manière compréhensible:

*:premier-enfant+html .element (
marge inférieure : 10px ;
}
Ensuite, vous pouvez définir IE7 comme ceci :

Élément(
marge inférieure : 20px
*marge inférieure : 10px ;
}
"Hack" représente un astérisque ( * ) au début de la ligne de CSS que nous voulons appliquer au navigateur IE7. Le seul problème est que cela s'applique également à la version 6 du navigateur. Vous devez donc utiliser cette méthode uniquement si vous êtes sûr de l'importance d'utiliser ce code dans les deux versions du navigateur. Ou, si vous ne vous souciez pas du tout de la façon dont il sera affiché dans IE6.

D'après mon expérience personnelle, cette méthode ne convient pas pour définir uniquement IE8 (et ne couvre pas IE6-7, 9, etc.). Il ne reste plus qu'à utiliser un commentaire conditionnel.

Toutefois, si vous avez désactivé la prise en charge d'IE7, vous pouvez utiliser l'option suivante :

Élément(
marge inférieure : 20px
marge inférieure : 10px9 ;
}
"Hack" est d'indiquer " \9 » à la fin de la valeur, avant le point-virgule final. Cela vous permettra de détecter IE8 et inférieur, vous pouvez donc utiliser ce hack pour détecter uniquement la version 8 du navigateur si vous avez déjà abandonné la prise en charge des versions 7 et 6.

Commentaires conditionnels

Enfin, nous pouvons séparer vos CSS IE7 et IE8 dans des fichiers séparés. Cela peut être fait en utilisant des commentaires conditionnels :

Mais personnellement, je ne vous recommande pas d'utiliser cette méthode. Il y a 2 problèmes principaux ici : le premier est de diviser votre fichier CSS en 3 fichiers individuels, ce qui entraîne une complexité de synchronisation. Et la seconde - vous créez des Requêtes HTTP dans les deux plus navigateurs lents, ce qui ralentit considérablement le processus de chargement de votre site Web.

Personnellement, je vous conseille d'utiliser soit des classes conditionnelles, soit de simples hacks pour définir IE7-8.

Des questions?

Ce guide ne prétend pas être le meilleur guide sur le sujet. C'est plutôt astuce pour les débutants.

J'ai déjà écrit une fois un article sur, mais aujourd'hui, j'ai rencontré un autre problème - comment déterminer un Version Internet explorateur. Comme tout le monde le sait, ce navigateur nous surprend constamment, et chaque version de celui-ci vit pratiquement sa propre vie. Il y a des situations où le code fonctionne correctement dans la 9ème version, mais ne fonctionne pas dans la 8ème, et vice versa. Et de tels moments se produisent lorsque vous travaillez avec chaque version. Par conséquent, tôt ou tard, vous devrez faire face au problème de la détermination d'une version spécifique d'IE.

Il s'est avéré que déterminer la version d'IE n'est pas difficile. Lors de la détermination de la version, vous pouvez utiliser une fonctionnalité intéressante Internet Explorer- chaque version de ce "navigateur" possède des objets globaux uniques. Par exemple, IE9 a un objet document.addEventListener global, et un tel objet n'est utilisé que dans les versions antérieures à IE9 (inclus). Ou l'objet document.querySelector, qui n'a été introduit que dans IE8 et est utilisé dans les versions plus récentes. Il existe de tels objets dans chaque version, en s'appuyant sur eux (en vérifiant leur existence), vous pouvez facilement créer des conditions pour des versions spécifiques d'Internet Explorer.
Quels sont les objets dans différentes versions Je vais donner ci-dessous:
IE10+ - window.atob
IE9+ - document.addEventListener
IE8+ - document.querySelector
IE7+ - window.XMLHttpRequest
IE6+ - document.compatMode
Un autre objet document.all global existe dans toutes les versions d'IE, mais n'est utilisé dans aucun autre navigateur, sur la base duquel vous pouvez distinguer IE des autres navigateurs.

Comment déterminer la version d'Internet Explorer en javascript. Le code

Nous avons maintenant tous les composants nécessaires : un objet qui se trouve dans toutes les versions d'IE et uniquement dans celui-ci - cela le distinguera des autres navigateurs. Et nous avons également des objets qui aideront à faire la distinction entre des versions spécifiques d'IE. Voici quelques exemples qui vous montreront comment les objets globaux IE peuvent être utilisés dans la pratique.

If(document.all)( // code pour toutes les versions d'IE. Ne fonctionnera pas dans d'autres navigateurs ) if(document.all && !window.atob)( // code pour IE9 et inférieur ) if(document.all && ! document .addEventListener)( // code pour IE8 et inférieur ) if(document.all && !document.querySelector)( // code pour IE7 et inférieur ) if(document.all && !window.XMLHttpRequest)( // code pour IE6 et ci-dessous ) if(document.all && window.atob)( // code pour IE10 et supérieur ) if(document.all && document.addEventListener)( // code pour IE9 et supérieur ) if(document.all && document.querySelector ) ( // code pour IE8 et plus ) if(document.all && window.XMLHttpRequest)( // code pour IE7 et plus ) if(document.all && document.querySelector && !document.addEventListener)( // code pour IE8 seulement)

C'est bien si votre site fonctionne dans tous ou presque tous les navigateurs comme vous le souhaitez. Tout change, de nouvelles versions sortent, de nouvelles fonctionnalités apparaissent, et c'est stupide de ne pas les utiliser, pour le bien des "oldies". Il y a environ 1,5 ans, IE 6.0 (selon les statistiques de visites sur l'un de mes sites) se trouvait sur un ordinateur sur trois utilisant IE. Je devais compter avec lui, parce que. IE a dominé le bureau, avec plus de 40 % des visiteurs utilisant IE. J'attribue cette distribution d'IE 6.0 (malgré le fait que la 8ème version est déjà sortie), tout d'abord, à la large distribution d'anciens piratés Versions Windows XP en Russie qui ne se connecte pas au serveur de mise à jour.

Maintenant, installez activement et plus nouvelles versions XP (également piraté presque partout), où déjà dans livré avec IE 7 et Windows 7 livrés avec MSIE 8.0. De plus, IE a dû faire de la place, et Opera est arrivé en tête (29,8% des visiteurs), et IE, après avoir perdu plus de 10%, prend la 2e place, gagnant 28,8% du total des visiteurs. Dans le même temps, la part d'IE 6.0 dans le volume total d'utilisateurs d'IE est passée de 34 % à 15 %. Ferme les trois premiers - FireFox.

Ainsi, IE 6.0 est désormais utilisé par un utilisateur sur 20 (environ 5%). Il faut encore compter avec eux.

Cette longue introduction vise à montrer que la question de savoir s'il faut supporter ou non certaines versions de navigateurs est une question sérieuse, nécessitant des recherches périodiques pour comprendre quelle est la situation actuelle. Ce sera différent selon les régions, cela peut même dépendre du thème du site. Tôt ou tard, l'idée surgit d'informer l'utilisateur qu'il dit qu'il existe déjà de nouveaux navigateurs (il est temps de commencer à les utiliser, mon ami !).

Vous pouvez déterminer la version du programme du navigateur, sa famille et prendre des mesures à la fois côté serveur et côté client. Par exemple, un morceau de code javascript qui vous permet de déterminer ce que l'utilisateur utilise une version d'IE inférieure à 7.0

... //après le chargement du document, la version du navigateur sera vérifiée //et certaines actions seront prises ...

En PHP vous pouvez vous référer aux en-têtes transmis par le navigateur, en utilisant la fonction getallheaders(), il renverra un tableau associatif où l'élément contiendra des informations sur le navigateur.

Nous avons donc découvert qu'il y avait au moins 2 chemins. Lequel est le meilleur ? Je suis favorable à tout travail qui n'est pas lié à la sécurité, qui est assez facile à mettre en œuvre côté client, à effectuer sur la machine cliente. De nos jours, il s'avère souvent que les ressources des machines clientes dépassent largement les capacités des serveurs web dédiés virtuels. Alors laissez-les travailler autant que possible :).

D'un autre côté, les javascripts peuvent ne pas fonctionner du tout pour le client, et la vérification sur le serveur est alors le seul moyen. Ce phénomène est très rare, bien que je n'aie pas de statistiques exactes.

Il y a aussi des "pièges" ici. Après tout, si vous ne tenez pas compte de mes préférences personnelles, effectuer une validation côté serveur sera une approche fondamentalement plus correcte. Ne serait-ce que parce qu'il sera impossible de déterminer la version du navigateur sur certains anciens clients, comme je l'ai montré dans l'exemple. Et le script sera plus complexe. L'un des pièges peut être un système de mise en cache des pages du site (comme, par exemple, drupal). Après avoir déterminé côté serveur que le client convient ou, au contraire, ne convient pas pour afficher le site, la page avec ce résultat sera affichée à tous les autres clients anonymes jusqu'à l'expiration de la durée de vie du cache. Dans de tels cas, javascript est déjà la seule option appropriée.

Face à ce comportement du plugin fancybox. Lors de l'ouverture fenêtre modale, défile dans la fenêtre principale jusqu'en haut. Comment y faire face? Cela ne se produit pas toujours, mais dans certains cas de mise en page. La mise en page est déjà problématique à changer, ...