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.

Tirer le meilleur de CSS

La première partie devrait à elle seule déclencher l’acte d’achat. Raphaël passe en revue les propriétés CSS 2.1 dont l’intégrateur HTML & CSS s’est privé pendant des années à cause de leur manque d’implémentation dans IE6 et IE7, bons derniers de la classe à l’école des standards… A nous, désormais, les joies procurées par l’utilisation de sélecteurs sur lesquels nous faisions l’impasse : sélecteur d’enfant, sélecteur de frère adjacent, sélecteur d’attribut, :first-letter et first-line, :first-child, :focus, :before et :after, règle «@» diverses et variées.

Selon votre politique de prise en compte des versions d’Internet Explorer, vous pourrez utiliser tout ou partie de ces «nouveaux» jouets. Le niveau de support spécifique de tel ou tel sélecteur par les versions d’IE est précisé à chaque fois au fil de la lecture. Notons qu’il devient de plus en plus courant de délaisser IE6 et de prévoir une dégradation gracieuse pour IE7, ce qui permet d’utiliser à fond la spécification des CSS 2.1 prise en charge par IE8 et les autres navigateurs modernes.

HTML5 et CSS3 : l’innovation en marche

Cette partie fait le point sur les nouveautés qui arrivent dans le sillage de HTML5 : la syntaxe, les nouvelles balises sémantiques pour structurer les contenus, avec un focus particulier sur les balises video, audio et canvas, les nouveaux attributs de formulaires, etc.

Après HTML5, le livre présente CSS3. Toutes les nouveautés passent sur le grill bien chaud de Raphaël qui en profite pour nous faire saliver avec ses recettes «maison» et ses tours de main, pour que nous aussi, devenions des chefs en CSS ! Toujours très pragmatique, le livre donne dans cette partie — comme dans les autres  –, des bonnes adresses permettant de prendre en compte les navigateurs anciens via Javascript, ou des composants HTC.

CSS et applications spécifiques

Web mobile

Cette dernière partie aborde le web mobile avec les défis qu’il lance à l’intégrateur web et les solutions qu’il peut mettre en oeuvre pour tenir compte du parc hétérogène des téléphones portables plus ou moins «smarts» et des tablettes tactiles aux formats et résolutions d’écran disparates.

CSS Print

Les CSS pour l’impression ne sont pas oubliées. Il est vrai qu’elles sont souvent le parent pauvre des CSS en dépit de leur utilité indiscutable. Surtout quand on pense que le web — loin d’avoir diminué les besoins en ressources de la planète –, n’a fait qu’augmenter l’utilisation de l’encre et du papier ainsi que l’énergie nécessaire à leur production :-(

Profitons donc de @media print pour limiter l’utilisation de l’encre en éliminant les couleurs, les aplats et tout ce qui n’est pas utile dans le contexte de l’impression.

Lecteurs de mails et CSS

Créer des Newsletters ou tout autre document susceptible de s’afficher sur un client de messagerie est une épreuve que je ne souhaite à personne. Et pour cause : à côté des clients de messagerie de bureau comme Lotus ou Outlook et certains services de messagerie en ligne, IE6 fait figure de champion du monde ! Bref, c’est galère, mais il est possible de s’en sortir en suivant les conseils de conception de page web pour les clients mail de ce livre.

En deux mots

CSS avancées, vers HTML5 et CSS3 est un des rares livres indispensables que tout intégrateur web devrait avoir à portée de main. Raphaël Goetter sait comment expliquer les concepts flous des spécifications (et il y a !) avec humour et simplicité tout en restant didactique. Le livre est à priori destinés aux utilisateur avancés, mais devrait rester accessible aux jeunes «padawans». Toutefois, je recommande fortement à ces derniers la lecture de la 3ème édition de CSS2 — Pratique du design web qui vient d’être rééditée au format semi-poche le 31 mars 2011 !

Informations pratiques

CSS avancées. Vers HTML 5 et CSS 3

• Auteur(s) : Raphaël Goetter
• Editeur : Eyrolles
• Nombre de pages : 400 pages
• Date de parution : 17/03/2011
• Extraits au format PDF disponibles sur la fiche du livre
• EN COULEUR !

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• «Test Drive» (IE9 preview) sur Vista

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.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

24 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Safari — Chrome

    .test { [color: #000000; }

14. Tout sauf IE6 — 8

    :root *> .test { color: red  }

15. IE7

    *+html .test { color: red }

16. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

17. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

7. IE8

   .test { color: #0000FF\0; }

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• HTML5 et CSS pour l'intégrateur web
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement 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à !

Références diverses pour les balises HTML5 et les propriétés CSS selon les navigateurs

• The Future of HTML5 — Les spécifications de HTML 5 s’appelaient à l’origine Web Applications 1.0. La plupart des observateurs ont focalisé sur la création des nouveaux marqueurs HTML comme header, nav, aside ou footer alors que cette nouvelle version recèle des trésors fabuleux : 1) Images dynamiques et graphiques avec canvas ; 2) Validation des formulaires améliorées avec webforms 2.0 ; 3) base de données locales pour enregistrer les données ; 4) Géolocalisation et 5) Création de barres d’outils et de menus.

• HTML5 Cheat Sheet — 4 pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4). Par exemple :

  Tag	Information	Version	Attributes
  blockquote	Long quotation	4/5	cite
  dialog	dialog, conversation	5	global attributes
  section	section	5	cite

• Prise en charge des CSS selon IE6, IE7 et IE8 — Excellente mise au point des différences de prise en charge des sélecteurs et propriétés CSS selon les différentes versions d’Internet Explorer. Pouvons-nous utiliser body>p, a[href] ou encore position: fixeddans IE7 ? Toutes les réponses à ces questions — et à bien d’autres — sur une page claire et concise.

• CSS Compatibility and Internet Explorer — Je devrais y penser plus souvent : le réseau Microsoft pour les développeurs est plein de ressources pour faire le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer. Merci Josselin :)

• Web browser CSS support — Spécifications et prise en charge des propriétés CSS 2.1 et CSS3 selon les navigateurs. Possibilité de choisir parmi 14 agents utilisateurs : IE 4, IE 5, IE 5.5, IE 6, IE 7, IE 8, Firefox 1, Firefox 1.5, Firefox 2, Firefox 3, Opera 8.5, Opera 9, Konqueror 3.5 et Safari 2. Via les Carnets de La Grange.

• Browser support for CSS3 and HTML5 — Tableaux synthétiques pour connaitre le degré de prise en charge de HTML5 et CSS3 par les principaux navigateurs du marché : Safari 4 (Win), Firefox 3.5 (Win), Google Chrome (Win), Opera 10 (Win) et Internet Explorer 6, 7 & 8. Les propriétés les plus largement supportées (dans une optique d’amélioration progressive) sont : rgba(), hsla(), opacity(), border-radius (except Opera) et canvas.
  

• Pour finir cette rubrique, je vous propose de lire ou relire HTML5 et l’avenir du web de Tim Wright (traduit par Goulven Champenois) qui fait le point sur les avancées technologiques apportées par la nouvelle version de HTML.

Typographie : au-delà des polices installées chez l’utilisateur

• Utiliser n’importe quelle police sur un site web — L’article fait rapidement le point sur les différentes manières d’utiliser les polices de caractères sur son site web et présente la directive CSS3 @font-face qui commence à faire parler d’elle.

  Pour que vos fontes puissent être intégrées à Internet Explorer, il faudra convertir les polices du format TTF (TrueType Font) vers le format EOT (Embedded OpenType) avec TTF to EOT Font Converter.

  Si vous n’avez pas de belles fontes libres de droits sous la souris, je propose aux cinq premiers d’entre vous qui en feront la demande dans les commentaires, une invitation pour tester TypeKit. Grosso modo, une fois inscrit, vous pourrez faire une sélection de polices de caractère parmi près de 70 fontes classées par style (Serif, Sans Serif, Script et Exotic) ou par tag (clean, geometric, futuristic, grunge, gothic, etc.). Merci à bibinou pour l’invitation.

Framework CSS sans stress

• My Simple Framework — Ce framework fera plaisir à tous ceux qui trouve que la rigidité des grilles entravent leur créativité. A la place, ce framework se distingue avec plus de 1 600 feuilles de style prêtes à l’emploi pour subvenir à vos besoins en matière de mise en page web : 840 CSS en 960 pixels avec par exemple head-nav-3col(1-2-3)-4col(3-4)-960px.css et 840 CSS liquides avec head-nav-2col(1-2)-4col(2-3-4)-liquid.css.

• oocss — Framework CSS à la mode de la programmation objet. A ce sujet, je suis assez d’accord avec Grégoire pour dire que la POO c’est du pipeau — ou du moins pas indispensable en développement web — car la programmation procédurale en a encore sous la botte… Ceci dit, il y a toujours de bonnes idées à prendre dans les frameworks, donc, enjoy!

• Reset CSS spécial HTML5 — Un bon reset CSS c’est le début d’un framework ! Cette remise à zéro des styles par défaut des balises HTML est inspiré par le Reset CSS d’Eric Meyer auquel Richard Clark a ajouté les éléments spécifiques à HTML5 : article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video. Via Blog-html5.

Pour avoir une liste plus conséquente de frameworks CSS et une analyse plus touffue, je vous invite à lire :

• Framework CSS — mettez vos grilles au pas !,
• Frameworks CSS + Reset CSS : design from scratch,
• Framework CSS sémantique ? Comment je vois les choses.

CSS Float

Avoir les pieds dans la float n’est pas toujours agréable, alors voici quelques liens qui devraient vous aider à vous en sortir :

• Understanding CSS Floats — La propriété float expliquée en texte, code et illustration. Des explications claires et didactiques en anglais.
• CSS Float Theory — Dans la même veine que le lien précédent, en plus complet peut-être. Ce tour d’horizon sur float contient également une palanquée de liens qui valent également le coup d’oeil.
• Floatutorial — Si je devais partir sur un ile déserte avec un seul site sur float, c’est certainement celui-ci que j’emporterais avec moi, ne serait-ce que pour les nombreux exemples concret mettant en oeuvre la propriété float.

Allez, encore un effort pour en savoir davantage sur cette propriété CSS passionnante (en français) :

• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?,
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire.

Miscellanées

Last but not least, je termine cette revue de presse avec ces liens qui viennent de me tomber sous la souris :

• Intégrateurs, montez au front — Voici le résumé de la conférence donnée par Stephane Deschamps à Paris-Web 2009. Cette intervention aurait pu s’appeler L’intégrateur, cet inconnu. Ce métier est mal connu, sans doute à cause de l’étendue des techniques et des savoir-faire qu’il faut connaitre et maitriser si possible.

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• 390 ressources Javascript & jQuery
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Sous ces jeux de mots faciles se cache une interrogation existentielle de la plus haute importance. Si pour le développement d’un site web, la question du navigateur à utiliser ne se pose pas (il faut tous les prendre en compte), pour le surf quotidien, en revanche, je ne sais plus quel navigateur choisir entre Firefox, IE7 et Opera…

Firefox, un renard qui s’apprivoise

Firefox a ma préférence depuis longtemps en raison de sa simplificité et de son « extensabilité », d’une part, mais surtout grâce à son moteur de rendu qui, l’air de rien, rend les pages web plus équilibrées et plus belles, notamment en ce qui concerne la taille des textes par défaut, leur agrandissement, le rendu des éléments de formulaires, les options disponibles pour l’affichage des onglets, et bien sûr les moults modules externes qui satisfont les besoins les plus fous !

Deux problèmes cependant (qui sont certainement liés) : la consommation mémoire et l’instabilité du logiciel. Lorsque j’utilisais Firefox rempli de plugins jusqu’à la gueule, et qui plus est sous Windows 2000, je battais ma coulpe en maudissant ma frilosité et mon attachement à Photoshop qui m’empêchaient de passer sous Ubuntu ou de changer de matériel pour installer un Windows XP ou Vista pour entrer d’un coup dans la modernité…

Internet Explorer 7 à prouver

… Et un jour je suis passé sous Vista (même pas mal). J’ai très vite réinstallé Firefox pour m’apercevoir que les plantages continuaient. Pas toutes les cinq minutes, certes, mais suffisamment pour que je me tourne vers IE7 la larme à l’oeil.

IE7. Ne plante pas. Très rapide (beaucoup plus de Firefox qui, pour une étrange raison met presque autant de temps à afficher une page présente dans l’historique qu’une nouvelle…). Mais avec une ergonomie générale venue d’un autre monde.

Bien sûr, avec un peu d’habitude on s’y fait ; je m’étais bien habitué aux inconsistances de Firefox. (Tiens, à ce propos, j’aimerais savoir si je suis vraiment le seul à rencontrer des problèmes avec le Renard de feu ou si tout le monde fait semblant). Bon, vous remarquerez que parler de IE7 me ramène au Panda roux.

Ceci dit, par rapport à IE6, la dernière version a fait des progrès sensibles, tels que l’affichage de pointillés qui ressemblent vraiment à des pointillés, la prise en compte de la transparence du format PNG en 24 bits, etc…

Toutefois, je regrette le petit retour en arrière sur le zoom de la page qui semble avoir remplacé l’agrandissement de la taille du texte. A moins d’avoir un écran 24 pouces, je ne vois pas trop à quoi ça sert.

IE7 serait très bien pour le surf quotidien mais la gestion des onglets est perfectible. Sous Firefox, il est facile de demander l’affichage des liens dans un nouvel onglet de la même fenêtre alors que IE7 a tendance à ouvrir des nouvelles fenêtres qui encombrent rapidement l’espace de travail.

Sur un air d’Opera

Du coup, je me suis intéressé à Opera. C’est un très bon logiciel rapide et stable, connu pour son support étendu des CSS. Le seul problème que je lui trouve, c’est le manque de fiabillité quant à l’affichage de certaines pages web que j’utilise régulièrement.

Dès qu’Ajax entre en jeu, des bugs d’affichage surviennent, en particulier dans Google Reader et parfois dans Gmail. Il s’agit peut-être d’une mauvaise implémentation de Javascript dans Opera ou une mauvaise utilisation de Javascript de la part des développeurs de chez Google, mais bon…

Dans la série des bugs étranges et venus d’ailleurs, il y a celui qui affecte le texte saisi dans l’éditeur visuel de WordPress : l’attribut href passe en majuscule et des espaces multiples apparaissent dans l’éditeur, mais également dans le billet publié :

Remarquez la ligne blanche après « Klein » qui apparait lors d’une simple saisi de texte dans l’éditeur visuel de WordPress…

Et voici le résultat lors de la prévisualisation du billet

En bref

En pesant le pour et le contre de chaque logiciel, l’expérience la moins désagréable reste celle procurée par Firefox : tant qu’il ne plante pas, c’est parfait… Vivement la version 3 ;)

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• HTML5 et CSS pour l'intégrateur web
• Firefox vs Opera : où est le feu ?
• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)

Tout droit sorti de l’historique de mon Firefox toujours vaillant malgré la pression d’Opéra, et de mon fichier OPML installé pour l’instant chez Google Reader, voici un petit mix de derrière les fagots pour alimenter votre barre d’adresse ce week-end.

1. jQuery dans WordPress 2.2 \o/

   Et dire que l’info m’avait échappée : WordPress 2.2 intégrera jQuery dans le noyau Javascript pour sa légèreté et sa rapidité.

2. J’ai la F-List qui me démange, alors je gratte un p’tit peu

   Je véronise… s’est intéressé de très, mais alors de très près au buzz provoqué par la F-List mise en place pour établir une liste des meilleurs blogs francophones. Une analyse statistique époustoubouriflante en trois actes dont je conseille fortement la lecture.

3. Vous avez demandé la police ? Ne quittez pas…

   Avec TypeTester, comparez jusqu’à trois polices de caractère simultanément en fonction de la taille, l’alignement, la couleur, l’interlignage, l’espacement entre les mots, le fond, l’approche entre les caractères et la décoration.

4. La vie en rose gris ?

   Envie de voir le rendu de votre blog en niveaux de gris ? Avec GrayBit, c’est possible. Ca permet comme le dit nalao, de voir apparaitre « les contrastes, la répartition des blancs, la pertinence des choix typographiques, l’équilibre des blocs… » M’donne envie d’passer mon blog en gris, tiens !

5. Vous voilà prévenu !

   Citation du jour : « Lorsque vous voulez faire quelque chose il faut savoir que vous aurez contre vous ceux qui voulaient faire la même chose, ceux qui voulaient le contraire et l’immense majorité de ceux qui ne voulaient rien faire du tout ! » Lu sur le profil de newkurl

6. Dance, dance, dance avec tes baskets, chouette :)

   On ne PR rien à attendre : ce blog (le domaine principale) gagne un point de PageRank (PR6 donc) suite à la nouvelle Google Dance de l’ami GG.

Articles sur le même sujet

• 1000 ressources pour le développement web et WordPress
• 390 ressources Javascript & jQuery
• Vis ma vie d'intégrateur HTML
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.

Çà fait longtemps que je lis des petites phrases sur les lourdeurs de Firefox. Erreurs de jeunesse me dis-je à chaque fois. Mais suite à la lecture d’un billet du côté de chez Xuan, j’ai ouvert mon gestionnaire des tâches et je n’ai pas aimé ce que j’ai vu. La consommation en ressources mémoire de Firefox flirte souvent avec les 200 mo de RAM et sature mon petit PIII 866, tandis que le navigateur Opera sort en version 9.20…

En attendant que Mozilla se lance dans la chasse au gaspi, j’ai décidé de changer mes habitudes de travail ; ce qui est toujours une bonne chose. D’autant plus que je ne me suis pas limité à Firefox. J’ai regardé d’un peu plus près les logiciels que j’utilise tout les jours, et voilà le résultat :

Dreamweaver, les rêves ont un prix

Moi :

Quoi ? plus de 60 mo pour faire des pages web ? C’est quoi ton problème ?

Dreamweaver :

En fait c’est plutôt toi qui a un problème. Tu veux créer des pages web avec tout le confort, et bien ça se paie aussi en barrette mémoire…

Moi :

Oui, mais non… même après toutes ces années de vie commune, je te dis « au revoir » et je te remplace par Notepad++ et FileZilla en attendant de trouver un éditeur HTML un peu plus trendy.

FileZilla et Notepad++ ? ça roxe !

Heureusement que je suis habitué à FileZilla depuis pas mal de temps, parce que je regrette déjà le transfert FTP de Dreamweaver. Notamment la mise en cache de l’arborescence d’un site pour placer un fichier sur le site distant sans se soucier de sa destination. Si quelqu’un connait une alternative…

En attendant, et pour éviter d’avoir trop de fenêtres et de logiciels ouverts, J’utilise FileZilla comme explorateur ; Je l’ai configuré pour qu’il ouvre mes fichiers avec Notepad++. L’est pas belle, la vie ?

Par ailleurs, pour me déplacer plus vite dans l’arborescence, j’utilise le gestionnaire de site en dupliquant le site d’origine, puis en spécifiant des dossiers par défaut différents. Pour ce faire, placez-vous dans le répertoire local qui vous intéresse, cliquez sur Fichier -> Copier la connexion dans le Gestionnaire de Site. Il ne vous reste plus qu’à renseigner le répertoire distant en cliquant sur Avancé, et the cat’s in the bag!

Firefox, je t’aimais bien, tu sais…

Moi :

Quoi ? plus de 170 mo pour afficher du html ?

Firefox :

Heu.. c’est à dire que normalement je prends toute la place dans le lit dès que je peux.

Moi :

Qu’est-ce qui t’empêche de te pousser quand d’autres applis débarquent ?

Firefox :

Ouais, heu… au fait, tu sais que je peux te proposer toute une farandole d’extensions géniales, que je suis un gentil panda roux très rare et qu’il faut me protéger ?

Moi :

Évidemment dans ces conditions, je te laisse une chance. Mais attention, à partir de maintenant, pour le surf quotidien je fais un bout de chemin avec Opera ! Allez, fait pas la tête, je t’aime bien quand même :)

Sur un air d’Opera…

Opera semble plus rapide pour afficher les pages, même lorsque plusieurs onglets sont ouverts. Le scrolling sur les longues pages est également plus réactif !

Je redécouvre avec plaisir les notes dans la barre latérale qui me permettront de rédiger mes brouillons sans passer par les Post-It ou le Bloc-notes de Google que j’utilisais d’ailleurs avec l’extension Firefox Google Bloc-Notes…

Du côté de Firefox, on met souvent en avant la Developer Toolbar, qui comme le fait remarquer xuxu, existe aussi sur Opera, avec même l’équivalent du CSS Viewer qui gère en plus l’affichage du code source de l’élément survolé lorsqu’on clique dessus.

Je ne détaillerais pas toutes les fonctions d’Opera, mais le navigateur comporte entre autre :

• Un client mail bien conçu avec une gestion des filtres particulièrement efficace et complète,
• Une gestion des flux RSS,
• Une gestion des contacts,
• L’intégration de composants externes (widget),
• Pléthore de petites attentions ergonomiques qui me font regretter de ne pas avoir écouté IndicaDesBois plus tôt ;)
• Et last but not least, je viens de remarquer que lorsqu’on copie l’adresse d’un lien avec le clic droit, il est possible de la coller et aller dans la barre d’adresse, en une seule opération (c’est plus facile à faire qu’à écrire…). je suis conquis !

… ou sur un air d’operette ?

Opera n’est pas sans problème, et bien qu’il offre des fonctionnalités intéressantes, j’ai commencé une petite liste de défauts qui vont de l’anecdotique au plus embarrassant :

• Les clics sur les cases à cocher ne sont pas toujours pris en compte du premier coup,
• Dans certains cas, il semble que la manipulation du DOM par les scripts présents sur les pages provoque un comportement erratique de l’affichage et du fonctionnement. Notamment en ce qui concerne :
  • Le glissé-déposé dans la gestion des liens de Dotclear,
  • L’utilisation du Bloc-Note de Google,
  • L’affichage de données dans Google Analytics
• La consommation mémoire se rapproche parfois de celle de Firefox lorsque de nombreux onglets sont ouverts…

Alors, Firefox ou Opera ?

Les deux, mon capitaine ! Finalement, ce combat entre Firefox et Opéra aura fait une victime du côté de Dreamweaver ;) Concernant les navigateurs, les défaillances que j’ai rencontrées en utilisant Opéra diminuent mon enthousiasme et ma confiance dans le produit. je dis ça avec quand même quelques réserves de principe car il peut s’agir d’un problème de configuration ou d’un bug qui serait difficilement reproductible ailleurs.

En supposant que les problème rencontrés sur Opera soient passagers, et au vu des différences de rendu CSS entre les deux navigateurs qui persistent, il me semble difficile de ne pas les utiliser tous les deux pour tester les pages en cours d’intégration, comme je le fais avec Internet Explorer d’ailleurs. De toutes manières, quand on fait des sites web, on peut difficilement ne pas lancer le maximum de navigateurs.

Ce qui me fait penser qu’en comptant tous les logiciels nécessaires à la création de pages web (sans même compter Photoshop ou Illustrator qui peuvent faire l’objet d’une session de travail à part), c’est quand même un peu ahurissant d’utiliser autant de logiciels et donc de ressources (mémoire, processeur, espace disque) pour créer des pages web légères…

Articles sur le même sujet

• 1000 ressources pour le développement web et WordPress
• Firefox roxe ? Opera, ça ira ? et IE7 part en sucette ?
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• HTML5 et CSS pour l'intégrateur web