J’ai dit facile? Oui… C’est bien ce que j’ai dit! Voici comment y arriver :

Programmez votre site en HTML 5 et CSS 3

Laissez aller tous vos talents d’élite magicien du web et amusez -vous! Programmez pour un navigateur qui supporte HTML 5.

Activez le support du HTML 5

Avec un petit code JavaScript vous pouvez créer les éléments en mémoire qui ne sont pas normalement reçus comme du HTML.

Vous pouvez ajouter tous les éléments HTML dont vous avez besoin.

Spécifiez l’affichage des éléments CSS

Internet Explorer ne possède aucune règle d’affichage pour les nouveaux éléments. Les éléments seront donc affichés en ligne (inline). Il faut donc spécifier dans une feuille de style le comportement de ces éléments.

hgroup, article, header, footer, section, nav { display: block }

Activez CSS 3 sur les éléments

Vous pouvez activer des fonctions CSS 3 dans Internet Explorer (9 à 6) grâce à des scripts VML (Vector Markup Language). Mon script préféré est CSS3 Pie. Présentement il ne supporte que les fonctionnalités les plus populaires mais cela convient dans la plupart des cas.

Téléchargez le fichier PIE.htc et placez-le à la racine du domaine. J’ai bien dit à la racine du domaine. Une fois de plus Internet Explorer ne respecte pas les standards et les chemins CSS ne sont pas interprétés de la même manière que dans IE 8-6. Je vous conseille aussi de placer le fichier dans le répertoire racine du site en développement. Lors de la mise en ligne vous n’aurez pas besoin d’y réfléchir.

Vous devez ensuite spécifier quels éléments doivent utiliser le script VML. Le script doit s’exécuter sur chaque élément donc placez-le seulement où vous en avez besoin.

element_avec_du_css3 {
	behavior: url(/PIE.htc);
}

CSS3 PIE ne supporte pas le text-shadow mais vous pouvez utiliser les filtres d’IE pour reproduire un effet similaire.

text_avec_ombrage {
	filter: glow(color=black,strength=2);
}

Astuces pour déboguer IE 8 à 6

Ces astuces devraient vous permettre de rendre votre site fonctionnel sous Internet Explorer en moins de deux heures. Il est important de garder en tête que le site sera visuellement différent sous les vieilles versions et que vous ne pouvez rien y faire.

Testez les versions d’Internet Explorer
IETester est un navigateur qui permet de visualiser votre site sous Internet Explorer 9 à 5. J’ai effectué des tests comparatifs avec les navigateurs originaux et je n’ai vu aucune différence.

Créez des feuilles de styles pour Internet Explorer
Je vous conseille de créer des feuilles de styles propriétaire à Internet Explorer afin de régler les problèmes d’affichages.

CSS : bordure des images
Internet Explorer est le seul navigateur qui entoure les images qui se trouvent dans une balise de navigation. Ajoutez ce CSS à votre feuille de style IE seulement afin de régler le problème.

img { border: 0 none }

CSS : inline-block
Internet Explorer 7 et 6 ne permettent pas d’utiliser la valeur inline-block. Cette valeur est souvent utilisée en CSS 3 pour aligner des éléments ensemble, comme dans un menu horizontal. Vous devez remplacer les valeurs par inline.

Voici un exemple :

element_de_menu { /* CSS 3 */
	display: inline-block;
}

element_de_menu { /* Internet Explorer */
	display: inline;
}

CSS : tailles et inherit (IE 6 seulement)
Internet Explorer 6 ne traite pas correctement les valeurs inherit et les tailles des objets. IE ignore tout simplement les valeurs inherit donc vous devez les spécifier pour chaque élément. Pour la taille des éléments elle est interprétée différemment donc vous devrez en spécifier d’autres.

Cet article Comment programmer en HTML 5 dans Internet Explorer est apparu en premier sur Affluences.

Outils

Modernizr : Une bibliothèque javascript pour détecter le support des technologies HTML de votre visiteur. Permet par exemple d’utiliser le tag <video> si elle est disponible ou sinon d’afficher le vidéo en flash.

Google Web Fonts : Utilisez facilement des polices spéciales sur votre site. J’imagine déjà tous les clients enragés de folie nous poursuivre avec des fourches pour nous faire remplacer la police de leur site par Comic Sans MS.

Font Squirrel : Vous permet d’utiliser n’importe quelle police sur votre site (oubliez IE 6 et 7).

Color Scheme Designer : Permet de définir facilement des palettes de couleurs à utiliser sur votre site ou de trouver des couleurs compatibles avec les vôtres.

Testeur d’expression régulière (REGEX) PHP et JavaScript : Des heures de souffrance abyssale en moins…

YUI Compression : Un compresseur de CSS et de Javascript créé par Yahoo. Très utile pour réduire la taille de vos pages et protéger votre travail.

HTML 5 for web developpers : Une version des standards HTML 5 conçue pour les développeurs. Beaucoup plus facile à lire que la version pour les concepteurs de navigateurs.

Image : crunchmeme.com

Cet article Ressources utiles pour les webmestres est apparu en premier sur Affluences.