Intégration web

Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)

Tester ses pages web dans les différents navigateurs présents sur le marché est souvent source de frustration. Même lorsqu’on utilise un système Windows, on rencontre des difficultés pour tester les sites dans IE6, IE7 et IE8 en même temps. Opera, Firefox, Google Chrome ou Safari ne posent pas de problème particulier. Selon votre configuration, il existe plusieurs techniques permettant d’assurer un affichage homogène sur la majorité des navigateurs : virtualisation, logiciels, services en ligne ou pourquoi pas un deuxième ordinateur dédié comme un NetBook ? →

Helper CSS

Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6

Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur li:hover avec la classeli.sfHover). →

Helper CSS

Emuler la propriété max-width pour IE6

maxWidthFixForIE6.js — Les expressions Javascript de Microsoft sont énormément utilisée pour pallier l’absence de support de telle ou telle fonctionnalité par pour IE6 en particulier ou Internet Explorer en général alors que leur utilisation grève les performances déjà inquiètantes du dernier de la classe. Il vaut mieux faire appel à du bon vieux Javascript !

window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
    var container = document.getElementById("container");
    container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}
Helper CSS

eCSStender

Toujours rêvé d’utiliser les sélecteurs CSS avancés dans vos designs web sans vous soucier d’IE6 ? Alors vous devriez vous intéresser au travail d’Aaron Gustafson. Une fois le DOM chargé, eCSStender rassemble les feuilles de styles impliquées dans l’affichage de la page dans une variable. Le parsing peut commencer et eCSStender recherche tous les motifs pour lesquels une extension est disponible (@font-face et @page pour le moment). Pour la suite des explications je vous invite à lire la documentation 😉 — eCSStender

HTML & CSS

HTML5 et CSS pour l’intégrateur web

L’actualité du développement web est riche et c’est sans compter les liens plus anciens qui en ont encore sous le pied. Après le petit journal du web et celui consacré à WordPress, voici une sélection de ressources qui devrait plaire aux intégrateurs HTML et CSS. Au menu : un paquet de référence sur la prise en compte des balises HTML5 et des propriétés CSS par les différents navigateurs ; du nouveau pour aller au-delà des polices installées sur le poste client ; quelques Frameworks CSS à tester pour occuper les longues soirées hivernales et du `float` en veux-tu en voilà ! →

Intégration web

TweakPNG 1.3.0

Une nouvelle version de TweakPNG vient de sortir. La dernière datait de 2004 ! Parmis les nouveautés :

* Prise en charge du chunk iTXt,
* Utilisation des dernières version de zlib et libpng.
* Le code binaire est désormais une application Unicode,
* Le logiciel n’est pas compatible avec Window 95/98/ME,
* Beaucoup de ménage dans le code source,
* Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
* Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le *background* disgrâcieux sous IE6 😉

HTML & CSS

IE6 — Gérer la transparence du format PNG 24 bits

Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre *AlphaImageLoader*. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un *background-repeat* ou d’un *background-position* ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.) →