HTML & CSS

Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

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. →

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 ? →

Le petit journal du web

Auditez votre site web avec Browser Size de Google

Avec Browser Size, Google Labs nous propose de découvrir la part de contenu visible dans la fenêtre des internautes selon des moyennes statistiques réalisées d’après les visites sur les sites de Google, c’est-à-dire un peu tout le monde ! On découvre ainsi que 99% des visiteurs ont une fenêtre d’environ 550 pixels de large pour 350 pixels de haut avec des chiffres qui chutent assez vite à mesure que la taille augmente : seulement 90% des visiteurs visualisent une surface de plus de 950 pixels par 500 pixels. Quand aux tailles supérieures à 1200 pixels de largeur, elles concernent moins de 50% des utilisateurs. →

Extensions Firefox

FireFinder — interagir avec la page web

FireFinder est une extension pour FireFox créée par Robert Nyman. Le plugin vient se greffer sur l’indispensable Firebug pour sélectionner et interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath. FireFinder est très utile également pour tester les sélecteurs CSS en direct live en gardant un oeil sur les modifications qui s’effectuent sur la page.

HTML & CSS

Fonction PHP filemtime() pour cacher les fichiers CSS et JS

Vous le savez certainement, les fichiers Javascript ou CSS sont placés dans le cache du navigateur pour être réutilisés sans devoir aller chercher les mêmes informations sur le serveur. C’est assez pratique car les fichiers en question ne sont téléchargés qu’une fois. Mais si vous modifiez ces fichiers après la mise en ligne, c’est la version placée en cache qui continuera de s’afficher jusqu’à ce que l’utilisateur vide son cache d’une façon ou d’une autre.

Pour y remédier, Damien Ravé nous propose une utilisation judicieuse de la fonction PHP filemtime() qui renvoie la date de la dernière modification d’un fichier pour recharger le cache CSS ou JS :

<script type="text/javascript" src="js/script.js?v=<?php echo filemtime('js/script.js'); ?>">
<link rel="stylesheet" type="text/css" href="css/ecran.css?v=<?php echo filemtime('css/ecran.css'); ?>">
Javascript & PHP

Manifeste pour bouter IE 6 hors des blogs avec kickIE6.js

Un spectre hante le web : le spectre Internet Explorer 6. Nombreux sont ceux qui ont tenté de convaincre les webmasters de refuser de servir le navigateur collé au fond de la classe près du radiateur ou qui s’interrogent sur son utilisation. Sans trop de résultats. →

Navigateurs

Google Chrome va changer ma vie d’internaute

Comme tous les intégrateurs web j’utilise plusieurs navigateurs pour tester la conformité du rendu HTML et CSS. *Firefox 3* a une place particulière puisqu’il fait également partie des outils de conception grâce à des extensions comme Webdevelopper. →

Navigateurs

Sont taquins chez WordPress ;)

avec browse-happy.gif : WordPress recommande un meilleur navigateur
Si vous utilisez le tableau de bord Admin de WordPress avec Internet Explorer vous avez droit à ce joli visuel vous mettant en garde contre l’utilisation d’un navigateur non sécurisé et vous invitant à switcher pour un monde meilleur 😉