Après quelques journaux permanent (HTML5, typographie et CSS3) et des revues de presse multi-thématiques, voici une nouvelle série de liens triés sur le volet qui vous permettra d’occuper le Weekend qui arrive à grand renfort de typographie et d’intégration HTML & CSS. Ces ressources vous donneront également l’occasion de dégainer Photoshop et de sortir votre éditeur HTML préféré. Enjoy! →
SlideJs est un Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama. SlideJs est simple à utiliser et propose de nombreuses options : auto-rewind, auto-play, effets de fading et de transitions, préchargement d’images, pagination automatique, etc. Compatible avec Internet Explorer 7/8/9, Firefox 3+, Chrome, Safari, Safari Mobile et même IE6 ! Slides est disponible sur Github. Via Pierre Vion.
Pour les injecter les balises HTML5 dans le DOM et leur appliquer la propriété CSS display: block pour les styler, Remy Sharp a mis au point html5shiv qui est toutefois sans effet lorsque les balises HTML5 sont affichées via innerHTML. Heureusement, HTML5 innerShiv est là pour que les version 6 à 8 d’Internet Explorer tiennent compte des nouvelles balises HTML5 créées à la volée.
AviaSlider est un diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images (j’ai un faible pour la transition fullwidth-fade-slider). Le marquage HTML5 et les effets CSS3 sont présents mais le Slider reste compatible avec IE6, Safari 3+, Firefox 2+, Opera 10+, Google Chrome 3+ en version Mac et PC pour les 3 derniers navigateurs cités. Prêt à fonctionner avec prettyPhoto Lightbox lorsqu’on clique sur une image.
« Si le client veut qu’on prenne en compte IE6, il faudra qu’il paie pour ça » via @fran6. C’est clair, c’est net, mais un peu court (en même temps en 140 caractères, difficile de développer). Ca fait longtemps que pour les développeurs et les intégrateurs web, IE6 est comme une écharde qui n’arrête pas de s’infecter ou plutôt comme le dit Microsoft lui-même : «Surfer avec Internet Explorer 6, c’est comme boire du lait périmé depuis 9 ans». Mais de quoi parle-t-on exactement ? →
Toujours dans ma recherche de solution pour servir des déclarations CSS uniquement à Internet Explorer, je suis tombé sur une technique que j’appellerais «classification» sélective du `body` (ou de la balise `html`) en fonction du navigateur. Une fois encore, les commentaires conditionnels serviront à détecter Internet Explorer pour ajouter une classe à la balise `html` pour éviter de créer une feuille de style dédiée à IE. →
IE7 { css2: auto; } — Après mes Quelques notes sur la bibliothèque Javascript IE7 parue début 2008 concernant le script de Dean Edwards qui transforme une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8, voici que IE7.js s’attaque à la dernière ligne droite avec la transmutation du plomb en or : faire fonctionner IE8 comme devrait le faire IE9 ! →
Petite note rapide pour signaler le lancement de Test Drive par Microsoft. Une fois l’archive .msi installée sur votre disque dur (le moteur de rendu d’IE9 s’installe à côté de votre exemplaire d’Internet Explorer), Internet Explorer Platform Preview vous permettra de tester le moteur de rendu de IE9 censé respecter les standards (CSS3, HTML5) au plus près des spécifications du W3C. →
Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels. →
Les problèmes de compatibilité entre les feuilles de style CSS et leurs interprétations parfois fantaisistes d’un navigateur à l’autre font partie du quotidien des intégrateurs web et autres webdesigners. Voici une liste de liens (en anglais) qui vous permettra de reconnaitre et corriger les bugs de rendu qui font tâches dans votre design web : →
