Comment gérer l'incompatibilité du navigateur pour la programmation HTML5 et CSS3 - mannequins

Bien que tous les navigateurs modernes gèrent assez bien CSS3 ces jours-ci, Internet Explorer (surtout les versions antérieures) bien connu pour faire des choses de manière non standard. Voici quelques astuces pour vous aider à faire face à l'incompatibilité.

Comment rendre le code spécifique à Internet Explorer

Il est un peu plus facile de voir comment les commentaires conditionnels fonctionnent en consultant un exemple simple et en voyant comment utiliser l'astuce des commentaires conditionnels pour résoudre les problèmes d'incompatibilité CSS.

Voici une page simple avec Firefox.

Ici, il est affiché dans IE 7.

Jetez un oeil au code pour IEorNot. html et voir comment ça marche.

IEouNot. html
Je vais maintenant utiliser un commentaire conditionnel pour déterminer votre navigateur. Je vous ferai savoir si vous utilisez IE.









Vous utilisez IE

La seule partie qui est nouvelle est les commentaires étranges:


Vous utilisez IE

Les commentaires conditionnels sont une fonctionnalité spéciale disponible uniquement dans Internet Explorer. Ils vous permettent d'appliquer un test à votre navigateur. Vous pouvez placer n'importe quel code HTML entre et 






Donc, quand vous regardez ce queBrowser dans IE, il voit le commentaire conditionnel, se dit, "Pourquoi oui, je suis Internet Explorer," et affiche le titre "Using IE". Si vous regardez la même page avec Firefox, le navigateur ne comprend pas le commentaire conditionnel mais voit un commentaire HTML (qui commence par 

Comment utiliser un commentaire conditionnel avec CSS
Les commentaires conditionnels ne sont pas très intéressants, mais ils peuvent être très utiles pour créer des CSS compatibles. Vous pouvez utiliser des commentaires conditionnels pour créer deux feuilles de style différentes, une qui fonctionne pour IE et une qui fonctionne avec tout le reste.

La plupart des navigateurs lisent une feuille de style standard qui crée un arrière-plan jaune.

Si la page est affichée dans IE, elle utilise une deuxième feuille de style.
Regardez le code, et vous verrez qu'il est très similaire à IEorNot. page html.
QuoiBrowser. html Cette page a un fond rouge dans IE, et un fond jaune dans d'autres navigateurs.


Si vous souhaitez qu'une page utilise différents styles dans IE et d'autres navigateurs, procédez comme suit:


Définissez d'abord le style par défaut.
Commencez par créer le style qui fonctionnera dans la plupart des navigateurs. La plupart du temps, ce style fonctionnera également dans IE. Vous pouvez créer le style au niveau de la page (avec la paire) ou à l'extérieur (avec la balise).


Créez un commentaire conditionnel dans l'en-tête.
Créez un commentaire conditionnel après le style principal, comme indiqué dans cet extrait de code.



Construire un nouveau style spécifique à IE dans le commentaire.
Le style à l'intérieur du commentaire ne sera appliqué qu'aux navigateurs IE, comme dans les lignes suivantes:
body {background-color: red; couleur: jaune;} 


Le style commenté peut être de niveau page ou externe.
Comme le style par défaut, vous pouvez utiliser la paire pour créer un style au niveau de la page, ou vous pouvez utiliser la balise pour insérer une feuille de style définie en externe.


Placez uniquement le code qui résout les problèmes IE dans le style conditionnel.
IE lira le code dans les deux styles, il n'est donc pas nécessaire de tout répéter. Utilisez le style conditionnel pour uniquement les zones où IE ne fait pas ce que vous attendez.


N'oubliez pas de mettre fin au commentaire conditionnel.
Si vous laissez la fin de votre commentaire conditionnel, la plus grande partie de votre page n'apparaîtra pas. Ça pourrait être mauvais.



Vérification de la version d'Internet Explorer
Vous pouvez spécifier la version d'Internet Explorer que vous utilisez. Ceci est important pour les CSS positionnables car les versions 7 et ultérieures d'IE fonctionnent plutôt bien avec du code conforme aux normes, mais pas les versions antérieures. Vous pouvez utiliser cette variante pour spécifier le code uniquement pour IE 6 et les versions antérieures.
… <[endif] →


Comment utiliser une réinitialisation CSS
Même lorsque les navigateurs sont d'accord sur les éléments CSS à incorporer, ils diffèrent parfois sur les détails réels. Par exemple, ils peuvent choisir des marges et des paddings différents pour les éléments de la liste. Les développeurs Web utilisent souvent un style CSS spécial appelé css reset .
Ceci est simplement un fichier CSS externe qui détermine explicitement les détails de chaque élément. Lorsque vous utilisez une réinitialisation CSS, vous êtes moins susceptible d'être surpris par les différences entre les navigateurs. Un certain nombre de grandes réinitialisations sont disponibles à utiliser gratuitement de cssreset. com.






Bien que les réinitialisations de page soient une aubaine pour les concepteurs, elles ralentissent un peu le chargement de la page et le temps de rendu. Vous ne devez jamais utiliser une réinitialisation de page comme seule CSS, mais la modifier en fonction de vos besoins spécifiques. En outre, vous constaterez que les réinitialisations ne sont pas critiques tant que vous n'êtes pas préoccupé par le fait que les choses fonctionnent exactement de la même manière sur tous les navigateurs.