L’amélioration des performances d’affichage des sites web est la nouvelle frontière du développement web. La majorité des articles disponible traite du bon usage des sélecteurs, classes ou identifiants de nos feuilles de style. Pourtant, une des clés de l’optimisation des performances web passe par une meilleure compréhension du fonctionnement du navigateur qui reste peu connu des intégrateurs HTML / CSS. Pour y remédier, voici deux vidéos qui devraient vous en apprendre plus sur Gecko, le moteur de rendu de Mozilla Firefox. →
Archives de la catégorie : Navigateurs
HTML5 Please — Fallback et Polyfills (ou pas)
Envie de mettre les nouveautés HTML5 et CSS3 à contribution lors du redesign de votre site, mais un peu inquiet quand même sur la compatibilité de ces nouveaux jouets avec les nombreux navigateurs qui se battent pour occuper toute la RAM de votre poste de travail ? N’hésitez plus, et venez jeter un oeil sur HTML5 Please qui vient d’apparaitre dans ma timeline Twitter (1) ! →
Quelques notes — Prévoir un supplément pour rendre un site compatible avec IE6 ?
« 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 ? →
«Test Drive» (IE9 preview) sur Vista
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. →
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. →
Générateur de coins arrondis avec border-radius
La propriété CSS3 `border-radius` permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 `border-radius` : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent `-webkit-border-radius` et ceux qui tournent sur Gecko (Firefox, Camino) utilisent `-moz-border-radius`. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel… →
CSS & Navigateurs — 10 problèmes de compatibilité récurrents
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 : →
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 ? →
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. →
10 liens pour faire plaisir à votre intégrateur web
Cette liste de ressources devrait rendre de grands services à l’intégrateur HTML & CSS ainsi qu’au développeur web. en effet, vous y trouverez : un générateur de miniatures pour la page d’accueil de votre blog WordPress ; des outils pour valider l’ensemble de votre site ; un fichier PHP pour gérer votre base de données et des plugins jQuery tous plus intéressants les uns que les autres, etc. Il s’agit du meilleur des bons plans que je propose sur mon compte Twitter integrateur_css. Stay tuned and mind the gap! →