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 des tags : Firefox
Nouvelle méthode de remplacement de texte par une image
Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent
avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size
: →
390 ressources Javascript & jQuery
Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows. Last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui ne prennent pas les nouvelles API’s en charge. A quelques exceptions près, les liens pointent directement sur les sources d’origine.
Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
Je viens de terminer le dernier livre de Raphaël Goetter intitulé CSS avancées. Vers HTML5 et CSS3 paru aux Editions Eyrolles mi-mars 2011 et préfacé par Daniel Glazman. Ce livre n’est pas une simple mise à jour de CSS2, pratique du design web paru en 2005 ; il s’agit d’une refonte totale avec une orientation «utilisateurs avancés». L’auteur commence par un état des lieux sur les standards du web et leur prise en charge par les principaux navigateurs : Internet Explorer (IE6, IE7, IE8, IE9), Firefox, Chrome, Safari et Opera. Le livre est ensuite divisé en trois parties : 1) tirer le meilleur de CSS, 2) HTML5 et CSS3 : l’innovation en marche, et 3) CSS et applications spécifiques. →
TinEye — La recherche d’image « inversée »
TinEye est le premier moteur de recherche d’image sur le Web utilisant une technologie d’identification globale de l’image plutôt que les mots-clés ou les meta-informations. TinEyes parcourt régulièrement le Web à la recherche des nouvelles images tout en acceptant les soumissions volontaires : à ce jour TinEye a indexé 1 630 532 499 images pour vous permettre de trouver votre bonheur ! →
Mes pérégrinations réticulaires de A à Z
Les chaines de blog semblent appartenir au passé, au temps où le Web en était à la version 1.0. Si elles étaient un peu chronophages, je leur trouvais un certain charme. C’était le temps où la blogosphère avait un visage humain avant que la retouche des billets en vue d’une meilleure sponsorisation ne fasse son apparition… Bref, je vous propose un petit exercice amusant en prenant le premier site qui apparait dans la barre d’adresse de votre navigateur préféré lorsque vous saisissez chaque lettre de l’alphabet (Google Chrome ou Firefox conservent l’historique des sites que l’on visite le plus). Ça va sans dire mais mieux en le disant : j’utilise Firefox quand je suis en mode Intégration Web 😉 →
Google Chrome vs Firefox ?
Framablog vient de publier un article prospectif sur le déclin de Firefox à cause de la monté irrésistible de Google Chrome. Le commentaire que je pensais laisser, s’est transformé en billet que j’ai préféré partager avec vous. J’ai été un grand fan de Firefox mais lorsque j’ai essayé Chrome le jour de son lancement, il a immédiatement et définitivement remplacé Firefox pour mon surf quotidien (je me sers toujours de Firefox pour le développement de site web à cause ou grâce à ses extensions). →
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… →
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.
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à ! →