CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Compatibilité des médias queries et redimensionnement d'images avec Internet Explorer

Retour à la formation
Chapitre 8 Leçon 4
Précédent
Suivant

Apprenez à résoudre les problèmes de compatibilité avec Internet Explorer, notamment pour les versions 6, 7 et 8, en utilisant des commentaires conditionnels et des scripts spécifiques.

Détails de la leçon

Description de la leçon

Cette leçon aborde en détail les méthodes pour rendre vos pages web compatibles avec les anciennes versions d'Internet Explorer, en particulier les versions 6, 7 et 8. Vous apprendrez à utiliser les commentaires conditionnels pour gérer les styles, à corriger l'affichage des images redimensionnées et à intégrer le script CSS3MediaQuery.js pour prendre en charge les médias queries.

Pour les versions d'Internet Explorer inférieures ou égales à 6, il est nécessaire de remplacer la propriété MaxWidth par Width. Les versions inférieures à 8 présentent des problèmes de redimensionnement d'images, que nous corrigeons avec la propriété AlphaImageLoader. Enfin, nous intégrerons le script CSS3MediaQuery.js pour rendre les médias queries compatibles.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de vous apprendre à gérer les incompatibilités de style et d'affichage dans les anciennes versions d'Internet Explorer, et à utiliser des solutions et scripts alternatifs pour rendre vos sites web plus compatibles et réactifs.

Prérequis pour cette leçon

Il est recommandé d'avoir des connaissances de base en HTML, CSS et en intégration web pour suivre cette vidéo.

Métiers concernés

Les développeurs front-end, les intégrateurs web et les professionnels de l'UX/UI trouveront ces méthodes particulièrement utiles pour s'assurer que leurs créations fonctionnent correctement sur tous les navigateurs, y compris les anciennes versions d'Internet Explorer.

Alternatives et ressources

Pour remplacer les fonctionnalités non supportées par Internet Explorer, envisagez d'utiliser des bibliothèques JavaScript modernes et des polyfills. Vous pouvez également opter pour des techniques de développement progressif pour adapter votre code aux capabilities des navigateurs plus anciens.

Questions & Réponses

Le principal problème est le mauvais affichage lorsque les images sont réduites. Il est nécessaire d'utiliser la propriété AlphaImageLoader pour résoudre ce problème.
Pour les anciennes versions, commencez le commentaire par . Cela permet de cibler spécifiquement Internet Explorer inférieur à la version 8.
Il est nécessaire d'intégrer le script CSS3MediaQuery.js qui rend les médias queries compatibles avec Internet Explorer inférieur ou égal à la version 8. Vous pouvez le télécharger depuis Google Code.