Nicolas Guilhou

Grüdu

Wed, 07 Aug 2013 11:49:20 +0200

Dimanche 28 Juillet au soir tu n'es pas rentré à la maison comme le reste de la troupe. Oh, ça ne nous a pas affolés plus que ça, la chaleur, la nuit, toutes ces choses à chasser, ces trucs et ces bidules après lesquels tu avais l'habitude de courir. Ce n'était pas la première fois que ça t'arrivait de découcher. Nous sommes allés au lit tranquillement, conscients que le bol de croquettes serait plus fort que n'importe quelle souris, comme à l'habitude.

Le lendemain matin, tu n'étais pas devant la porte-fenêtre à brailler comme un con pour qu'on te laisse rentrer. Nous ne nous sommes pas affolés non plus, tu étais déjà parti pendant trois jours auparavant, ce qui nous avait donné l'occasion d'observer à ton retour la plus fantastique sieste féline de notre vie.

Ce n'est que le lendemain, mardi, que j'ai commencé à te chercher sérieusement, t'appelant sur le chemin avec la boite de croquettes que tu aimais tant. Un peu inquiet mais pas tant que ça. Je suis allé taper à la porte de notre voisin, à 300 m de là pour voir s'ils ne t'avaient pas aperçu, toi qui avait l'habitude de jouer avec leur chat. Mais personne ce soir là.

Mercredi je t'ai appelé encore, j'avais encore vérifié les routes environnantes, les fossés mais pas de trace donc pas d'angoisse particulière. Et je suis revenu voir notre voisin. Cette fois-ci j'ai pu lui parler. J'ai commencé à parler de ta petite fugue et je t'ai décrit. Lui ne t'avait pas vu. Puis je lui ai dit que tu portais un collier rouge. Et c'est là que j'ai du comprendre que tu ne reviendrai jamais. Il t'avait vu oui, lundi il ne sait plus à quelle heure, allongé sur le bord de la route, chat tigré au collier rouge, pas loin de là, à cinquante mètres, près des sapinettes.

J'ai gardé ma dignité quand j'ai entendu ça, j'ai parlé d'Elisa qui allait être très malheureuse, je l'ai remercié, lui s'est excusé pour la mauvaise nouvelle. Et je suis allé voir si tu étais encore là, même s'il m'avait dit que non, ton corps avait disparu. Je suis resté un moment, je t'ai cherché dans le fossé, je t'ai appelé. Et les larmes ont commencé à monter, comme maintenant où je revis cet instant et les suivants.
Je n'ai commencé à sangloter qu'en rentrant chez nous, chez toi, quand ta disparition à commencer à s'imposer dans mon esprit. Je ne voulais pas éclater en pleurs devant tout le monde, devant les amis, devant ma fille, devant May qui faisait et qui fait encore bien meilleure figure que moi dans ces instants.
Mais je n'ai pas pu.

Ainsi donc, tu es mort écrasé par une de ces voitures qu'on voit passer tous les jours, et c'était peut-être un peu de ta faute toi qui n'avait pas peur de ces engins, toi qui étais tellement amical avec tous les bipèdes à la con que tu rencontrais. Tu t'es fait tuer et ton corps a disparu. Je n'ai pas pu te voir, quel que soit ton état, pour acter définitivement ta mort. Pour pouvoir croire. Et accepter.

Alors le lendemain je suis parti sur le chemin avec ma boite de croquettes, pour t'appeler. Je suis revenu au dernier endroit où on t'a vu et je t'ai encore cherché dans les fossés. Et j'ai pleuré, comme jamais je n'ai pleuré depuis très longtemps.
Quelque chose, quelqu'un t'a arraché à nous. Tu étais le plus jeune de la troupe, le moins susceptible de nous quitter le premier. Ce n'est pas possible, toujours pas possible dans mon esprit.

Quand on ne croit en rien et surtout plus en Dieu, ce sont des moments terribles. Parce qu'on est irrémédiablement seul, sans présence imaginaire pour nous consoler quelque peu.
Alors je remets ta présence dans les mains de l'Univers ou quelque chose d'approchant en me promettant de ne pas t'oublier, en espérant comme à chaque fois que mes larmes sècheront vite, que la douleur disparaître encore plus vite.

Nous avons remplacé ton absence depuis hier, ne m'en veut pas c'était trop dur. Neela la petite siamoise est venue compléter notre troupe, notre famille. C'est comme ça qu'on fait quand on ne peut pas avoir d'enfant à soi et qu'on ne peut pas adopter. On prend des animaux pour leur donner de l'amour.
Et quand ils s'en vont c'est aussi le drame.

Mon pauvre Grüdu, je t'aime. Je ne t'oublierai pas.

In memoriam

Brûlons les « traitements de texte » embarqués

Wed, 07 Nov 2012 10:49:12 +0100

Je me suis retenu très longtemps d'écrire cet article mais il arrive un moment où il faut poser les choses. Comme d'habitude cet article va s'attaquer à l'« usage par généralité » et ses tristes conséquences.

Et Microsoft créa Word, et le peuple vit que c'était bon

J'ai essayé d'écrire et de ré-écrire ce paragraphe plusieurs fois sans succès.
Parce qu'il s'agit d'être plus ou moins accessible à tout le monde et de non plus pas trop vulgariser pour maintenir un soupçon d'élitisme.
Pouf, pouf.
De même j'ai cherché des publications sur ce sujet dans les interwebs et il apparaît que nenni. Le plus dur dans cet exercice est d'avoir raison parce que c'est le cas tout en empêchant les types qui ont tord de pouvoir te le reprocher. Et si possible, les faire chier au-delà de toute convenance.

Avant de parler de Word, qui est une partie du problème, il nous faut parler même si c'est de façon plus ou moins superficielle de l'ihm d'un système d'exploitation.

Basiquement, très basiquement.

Si on prend un OS et ses applications, et que l'un et les autres pour effectuer les mêmes actions situent au même endroit les susdites actions, tout le temps, avec pour toute action possible avec ton mulot un seul raccourci clavier que tu affiches tout le temps (pas deux, ou trois, un), il y a une chance non négligeable pour que ton utilisateur au bout d'une semaine (ou plus, ne soyons pas trop optimiste) assimile le fait qu'à une action au mulot correspond un raccourci clavier. Et il y a une chance non négligeable pour que ton utilisateur s'en serve. Parce que rien ne va plus vite qu'un raccourci clavier. Tu peux ergoter, argumenter tant que tu veux, rien ne va plus vite.
À ce moment de l'article je suis sensé faire des comparaisons vexantes entre systèmes d'exploitation. Mais comme ce n'est pas vraiment le sujet et ça prend énormément de temps et d'énergie juste pour démontrer l'évidence…

Donc.

Le fait que Word ait été popularisé par Microsoft explique pas mal de choses. On peut se moquer des « rubans » de Word, on doit même, mais si on comprend comment et pourquoi les types ont fait de Windows ce qu'il est, on comprend Word — même si on y arrive pas avant d'avoir lu cinq bouquins très épais sur le sujet.
Du coup on voit pourquoi les types comprennent mieux un pictogramme de disquette pour enregistrer un document plutôt qu'un bête, tout aussi efficace et plus rapide ctrl-S / ⌘-S. Parce qu'en étant con et en faisant n'importe quoi on a enseigné à l'utilisateur final les mauvaises pratiques, les mauvais réflexes. D'autres types t'expliquent pourquoi on fait pas mieux qu'un pictogramme de disquette pour déclencher l'action d'enregistrement.
Après ça tu peux faire des confs sur les pictogrammes, parler d'universalité — qui n'existe que dans de très rares cas, le reste étant une espèce d'universalité due à l'« usage par généralité » ce qui n'a strictement rien à voir — et te sentir obligé de parler de ce putain de pictogramme qui ne veut plus rien dire.
Je sais je fais une fixette mais c'est un cas d'école.

Or, comme il se trouve que les gars de chez Microsoft sont mauvais dans tout ce qu'il font — non pas tous, juste les chefs — ils se sont dit que ce serait bien plus malin d'afficher des boutons pour toutes les actions standards que tu peux effectuer dans leur traitement de texte. Que tu te sentes obligé de concevoir une ou plusieurs palettes pour certaines tâches, celles pour lesquelles tu as du mal à fixer un raccourci clavier qui soit homogène sur tout un système, je veux bien. Mais pour tout ? Même pour annuler/rétablir ? Sérieux ?

Ainsi donc, Word existe.
Et sans lui ce serait la fin du Monde et plus localement la mort du métier de secrétaire. Et nous voilà avec des générations d'utilisateurs qui ne comprennent pas que ce qu'ils utilisent tous les jours est lent, contre-productif et globalement tellement mal branlé que j'en ai les yeux qui saignent chaque fois que je vois une capture d'écran de Word. Ne riez pas, utilisateurs d'Excel et Powerpoint.

Du coup tu peux vendre des formations tellement c'est nul.

Et les autres se dirent que c'était une super idée

Dans le monde des webapps et plus habituellement dans le monde des blogs les rédacteurs rédigent du texte.
Et dans leur mansuétude, les gens derrière Wordpress et quelques autres vous infligent (je dis vous, parce que moi ça va, ça fait longtemps que j'ai arrêté) des interfaces à la Word. Pensant que c'est la top solution.
Une interface de rédaction, une interface à la Word et démerde-toi. Tu veux faire du gras, démerde-toi à trouver le pictogramme, pareil pour l'italique, les titres, citations…
Alors que normalement qu'est-ce qu'on veut, hmmm ? RÉDIGER DU TEXTE BORDEL
Pas chercher un pictogramme, se battre avec un JS qui a planté ta jolie interface TinyMCE ou mieux une implémentation de ce joyeux bordel qui ne fonctionne pas dans ton navigateur (si, c'est possible). Le « traitement de texte » via un navigateur pose des problèmes plus particuliers qu'une application native, j'y reviendrai.

Un jour on inventa l'éducation

Il n'y a rien de mieux que de savoir et de comprendre ce qu'on fait, au moment où on le fait. En gros quoi.
Et notre rôle — à nous concepteurs — est, avant d'être un poil feignants, d'éduquer correctement nos utilisateurs. Je parle d'utilisateurs dans un premier temps, pas de clients, mais les deux ne sont pas incompatibles. Et c'est là qu'interviennent les extraordinaires formats de texte structuré que sont Markdown et Textile. Je vous laisse découvrir les deux bidules en question, mais sachez que Markdown a été créé par John Gruber qui est tout sauf un con. On peut donc sentir assez vite la pertinence de la démarche.

Nous voilà donc avec des systèmes très semblables de « markup » et l'obligation d'éduquer nos utilisateurs plutôt que d'empiler une série de pictogrammes idiots, tout ça pour que monsieur lambda ne soit pas trop dépaysé de son Word chéri.

C'est là que tu écris le chapitre pour expliquer que c'est précisément comme ça que travaillent déjà sans le savoir beaucoup d'utilisateurs professionnels mais non sophistiqués de traitements de texte; plein ont même été formés à ça : comme une machine à écrire modale (je tape du texte, je tape le raccourci pour passer en mode gras, je tape le texte en gras, je retape le raccourci pour sortir du mode gras, je continue…).

Les formats de texte structurés appliquent ce modèle d'interaction depuis la nuit des temps, en y ajoutant la visibilité du changement de mode, la lisibilité en affichage dégradé et une structure syntaxique exploitable tant pour le formatage (usages actuels) que pour la gestion de documents longs, telles les publications en Setext des années 90, dont les lecteurs assidus disposaient d'afficheurs sophistiqués gérant bibliothèques de documents, tables des matières, chapitres, rappel de liens en bas de page etc., tout cela à partir d'un contenu lui-même parfaitement lisible en texte brut et surtout, surtout, sans attendre des rédacteurs la maîtrise des concepts de plan/structure/feuille de style.

Cet effet de bord est d'ailleurs encore plus important que la question d'implémenter un outil de saisie : la saisie en texte formaté non seulement réduit la complexité programmatique de l'éditeur et de l'afficheur minimaux, mais a en plus prouvé par le passé qu'elle court-circuite la question non résolue à ce jour de la compétence des utilisateurs de traitements de texte. Tout rédacteur de niveau machine à écrire était capable sans effort de fournir du setext homogène et sémantique sans le savoir, alors qu'on a toujours du mal à en trouver 1 sur 100 qui en fasse autant avec son « traitement de texte » préféré.

Exercice de chierie amusante :

explique à ta maman le rapport entre le mode plan de Word et les feuilles de style.
explique à ton papa un minimum de syntaxe Markdown/Textile/Setext.
reviens dans une semaine et compare leurs productions.
T'as vu? J'ai raison ou j'ai raison?

Interfaçons ça rend moins con

Donc que faut-il pour que le Monde aille mieux et surtout arrêter de prendre l'utilisateur final pour un âne ?
Autre chose. Quelque chose qui marche, qui rende le rédacteur plus libre, plus rapide, et en plus quelque chose qui soit, allez soyons fous, gratifiant. Quitte à devoir lui demander un tout petit effort au départ, celui de juste regarder comment on fait pour écrire un titre par exemple. Passé le troisième essai ton utilisateur n'y pensera même plus et le fera le plus naturellement du monde. Sans cliquer sur un pictogramme. Ni même dérouler une liste de styles parfaitement débile.

En gros, l'interface idéale pour un « traitement de texte » embarqué comprend deux boutons : « ok » et « annuler ». C'est largement suffisant et tout le monde comprend, même les castors lapons à condition de les traduire dans la langue idoine.

Et là, je te vois arriver et me dire :

Alors tu la ramènes moins ta grande gueule et tes grands principes sur les raccourcis clavier homogènes alors qu'on est dans Firefox, hein ?
Alors on va mettre des pictogrammes partout et faire comme Word parce que paf ça marche. Pauv' tâche…

En gros.

Les gars de chez Textpattern ont presque fait l'interface de rédaction ultime. Un champ texte, point barre. Et une liste de commandes disponibles à côté.
Dans le cas qui nous intéresse, celui qui s'adresse au plus grand nombre, c'est un peu trop « sec ». Il faut être plus pédagogue si on veut que monsieur Lambda ne s'enfuit pas à toutes jambes en nous traitant d'informaticien.

Schématiquement, à quoi pourrait ressembler l'interface d'un bidule pareil ?

Éditeur possible

Le but est de laisser en permanence sous les yeux du rédacteur les commandes les plus usitées (dans son contexte de rédaction). Passées les quelques heures d'apprentissage, l'utilisateur n'aura même plus besoin de regarder cette aide et pourra se concentrer sur ce qu'il fait : rédiger.
Bien entendu on peut étoffer la chose en mettant des liens d'aide, des accordéons ou autres pour accéder à la totalité des commandes, et mettre une chtite croix de fermeture pour virer le volet d'aide à la rédaction parce qu'au bout d'une semaine l'utilisateur n'en aura absolument plus besoin.
Au passage, t'as vu le nombre de boutons et de pictogrammes ?

Oui mais alors le client hein ?

Alores là on s'attaque au gros morceau. On va m'objecter que le blogueur, le client, le prospect (que c'est laid), il va être paumé. Il va rejeter. Ça ressemble pas à Word. Ils sont où les boutons ?
Eh bien je pense qu'il est temps de faire œuvre de pédagogie, de conviction. Au lieu d'intégrer des bouzins plantogènes, mal foutus, et tellement utilisables que ton fameux prospect trouve que c'est plus pratique de rédiger son texte dans Word et de le copier/coller dans ton TinyMCE.

Quand ton blogueur, ton client, ton je-ne-sais-quoi en vient à faire ça c'est que clairement il y a quelque chose qui merde. Et c'est toute cette « interface » qui merde.
C'est ton rôle de concepteur, de pédagogue que tu as raté. Parce que mon métier, ton métier peut-être ? ne se limite pas à utiliser bootstrap.js, Wordpress, modernizr.js, jquery ou que sais-je encore, à savoir coller des dégradés CSS partout où c'est possible et à débugger du code pour IE6. Liste non exhaustive bien entendu.

Mon métier, en plus de tout ce que je viens d'énumérer, c'est d'essayer de changer les usages. Parce que les usages en cours sont mauvais. Et on peut parfaitement parler à un client, l'éduquer, sans lui prendre plus de temps que d'habitude. Il s'agit juste de s'y mettre. Et si ça se trouve, un jour, il te remerciera.

Discussion sur l'icône de sous-titrage

Fri, 19 Oct 2012 12:20:45 +0200

Ceci est un article sur ces icônes et cette icône.

#xaviermd, toujours à la pointe du capillo-tractage et autres pratiques associées me parlait d'une icône de sous-titrage présente sur certains (anciens ?) postes de télévision de marque Philips. Parle ensuite des icônes présentes sur sa télécommande. Moi aussi j'ai une télécommande.

Et pour sous-titrage, je peux considérer que j'ai trois choix (en réalité non). J'ai donc à ma disposition AD (audio description) et SUBT (subtitles). Je vois pas l'universalité. Audio description ET sous-titres relèvent du même procédé, sous-titrer une vidéo. L'un étant beaucoup plus descriptif que l'autre.

Il n'y a, à mon avis, pas qu'un problème d'icône. Il y a un problème d'interface. JE vais pas aller en profondeur sur ce sujet, mais si j'appuie sur un bouton unique je devrais avoir à l'écran une possibilité de bascule entre l'un et l'autre. Mieux que de multiplier les boutons sur un pauvre truc qui commence à ressembler à une batte de base-ball (par la taille).

Là je parle de télévision, mais la transposition marche sur nos écrans d'ordinateur.

Discutons.

Le retour de l'icône de sous-titrage (certainement pas le dernier)

Fri, 19 Oct 2012 12:03:56 +0200

Rappel des faits : #CSA qui fait la demande d'une icône pour le sous-titrage. Moi je comprends #CSA = France. Donc je ponds un draft ici. On me dit dans le poste, essentiellement sur Twitter et Gtalk, oui d'accord, #CSA, mais on veut un truc UNIVERSEL, que même un castor lapon pourra comprendre. Ou un journaliste :D.

Bref.

On fait un deuxième essai ? J''essaie d'être universel hein.

Je suis SÛR que je vais faire une tétra chiée de drafts

Icône de sous-titrage

Fri, 19 Oct 2012 11:17:47 +0200

Après une nuit presque blanche pour cause de tempête, repartir "de bon matin" sur mon interface d'administration en flex-box est un peu dur pour la marmelade velouté qui me tient lieu de cerveau. Manque de bol, levé trop tard pour suivre la conf matinale de #ParisWeb sur les icônes.

J'ai juste capté que le CSA a besoin d'une icône de sous-titrage. Qu'à cela ne tienne. Allez, on dit qu'on fait vraiment dans le symbolique; et j'ai comme l'impression que personne ne va comprendre d'emblée, à moins de faire une campagne de matraquage digne d'Universal.

Mouais, ça peut se travailler, faut voir.

Disons qu'on cherche à être plus direct. Perso, ça fait des années qu'à la télé quand des sous-titres sont dispos je vois ce sigle : "S/T" . Et j'ai tendance à comprendre ce qu'il dit. Alors pourquoi ne pas s'en servir.

C'est un premier jet, je suis sûr qu'on peut le retravailler. Mais ne rêvons pas, dans le domaine des icônes on ne peut pas tout le temps se servir d'abstractions. Il faut parfois être direct.

Bonne nuit les p'tis loups

La Maison du Pastis

Thu, 23 Aug 2012 14:44:59 +0200

Quand je suis content d’un truc je le dis, autant quand c’est de la merde je me gêne pas non plus. Aujourd’hui mes petits amis je vais vous parler de La maison du Pastis.
Soyons clair je ne vais même pas m’attarder sur la qualité des produits vendus, pour qui aime le pastis elle est tout bonnement exceptionnelle. J’ai découvert cette boisson grâce à eux, jusque là je trouvais que les Pastis 51 et consors relevaient de la pire torture gustative. Mes petits amis, le pastis de “La maison du Pastis” c’est du bonheur en bouteille, à déguster aux heures chaudes, bien glacé et surtout bien dosé, pas question de faire un “misérable”.

Bref.

Je suis fan.

Si vous visitez ce superbe (sic) site, vous remarquerez que point n’est besoin de se déplacer à Marseille pour profiter de ces douceurs, il y a “Catalogue et vente sécurisée” à votre disposition. J’ai pas de bol, à l’heure où j’écris cet article la boutique sécurisée (huhu) est en carafe complet.
À ce sujet ma douce et tendre me dit en régie que cette boutique semble plus souvent tomber en marche qu’autre chose.

Bref.

Si vous avez la chance de tomber sur le créneau horaire où la boutique tombe en marche, vous pouvez commander du pastis. Avec l’assurance d’être livré en 48h. Putain con, je commande. Vite. Avant que la boutique retourne à son état initial.

15 jours plus tard (48h en marseillais) ma factrice toque à ma porte. Quand elle toque à ma porte c’est que c’est LRAR ou colis. Et vu que côté recos j’ai ce qu’il faut merci, je me suis dit que j’ai bien fait de patienter 48h avant de tout péter.
Las, en guise de colis je vois ma factrice un sac poubelle fermé à sa main. Je vous passe les détails. Bouteille en mille morceaux. Je pense que dans l’urgence, 48h c’est court, les joyeux et diligents employés de “La maison du Pastis” ont oublié de mettre du rembourrage dans un colis inadapté au transport des bouteille. Je peux les comprendre, le rush tout ça.

Je plains surtout ma factrice qui déteste l’anis et qui se trimballe aujourd’hui avec une bagnole qui pue le taga à 20 mètres avec 34° dehors.

Je pense que d’ici 48h je devrais avoir des nouvelles. C’est con que Noël se prête moyennement à la conso de boissons glacées. J’ai mes habitudes.

Nota
Comme c’est mon métier, j’ai jeté un coup d’œil sur le code source du site. Tout s’éclaire maintenant.

Styler les checkboxes sans monoculture… ou presque

Wed, 22 Aug 2012 15:01:19 +0200

Comme vous l’avez sans doute remarqué, habiller des éléments de formulaire en CSS peut vite virer au cauchemar, même si on s’enlève une épine du pied en éliminant Internet Explorer.
On peut passer par des plugins JQuery ou autres, c’est bien mais pas top, surtout pour quelques malheureux éléments de formulaire.

Donc, stylons des checkbox. HTML, simple :

<div class="test">
  <p><input type="checkbox" checked name="yaka" value="" id="yaka"><label for="yaka">Activer les propulseurs supraluminiques</label></p>
  <p><input type="checkbox" name="yapuka" value="" id="yapuka"><label for="yapuka">Voir le hanneton glouton de Tron</label></p>
  <p><input type="checkbox" disabled name="ifokon" value="" id="ifokon"><label for="ifokon">Oui, mais en fait non</label></p>
</div>

Moi je suis un garçon bien élevé, je suis les règles, et comme des fois elles sont floues ben je me trompe. Par exemple, qui de Webkit et de Gecko a raison en autorisant/interdisant les pseudo éléments :before et :after sur les éléments de formulaires. Je ne sais ni. Je suis designer et ce que je constate c’est que Webkit les autorise, pas Gecko. Point. Mais vous pouvez m’éclairer dans les commentaires hein.
Donc on ne peut pas écrire input:before ou input:after pour Gecko. Ça le laisse de marbre.

Si on y réfléchit bien, les checkbox se baladent pas comme ça sur une page, elles sont souvent – que dis-je, toujours – accompagnées d’un label. Et puisque cette satanée checbox ne veut rien entendre sur Gecko ben je vais causer à son copain le label.

Discussion CSS intégrale :

.test input {
  position: relative;
  vertical-align: middle;
  margin-left: 8px;
  display: none;
}

.test label {
  margin-left: 40px;
  position: relative;
}

.test p {
  height: 32px;
}

.test input:checked+label:before {
  background-color: hsl(119, 23%, 57%);
}

.test input:checked+label:after {
  left: -20px;
}

.test label:before {
  content: "";
  position: absolute;
  top: 0;
  left: -28px;
  display: block;
  width: 28px;
  height: 16px;
  background-color: #e6703a;
  border-radius: 10px;
  margin-top: 0;
  margin-left: -6px;
  border: 2px solid hsl(0, 0%, 77%);
  box-shadow: inset 0 1px 3px hsla(0, 0%, 26%, 0.65);
}

.test label:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 14px;
  background-color: #f5f5f5;
  box-shadow: 0 1px 5px #444;
  position: absolute;
  top: 2px;
  left: -32px;
  -webkit-transition: left .3s ease-in-out;
  -moz-transition: left .3s ease-in-out;
  -o-transition: left .3s ease-in-out;
  transition: left .3s ease-in-out;
}

.test input[disabled]+label:after {
  display: none;
}

.test input[disabled]+label:before {
  background-color: #fafaf8;
  box-shadow: inset 0 0 3px hsla(0, 0%, 26%, 0.65);
  opacity: .6;
}

Et on obtient ça, sur Gecko et Webkit :

Alors, c’est qui le patron, hein ?

En guise de conclusion, je dirai que c’est fastoche on prend pas en compte Internet Explorer, mais libre à vous d’essayer sur cette base moi j’ai pas ce navigateur sur ma machine et je veux pas devenir fou. Pour Opera ça presque marche, si les spécialistes veulent s’y coller et contribuer à cet article vous êtes les bienvenus.

Allez je vous laisse je vais peindre une girafe.

UPDATE : La même chose en live

Voir input et mourir

Wed, 07 Dec 2011 08:38:47 +0100

HTML5 c’est bien. CSS3 aussi.
Bon ok faut pas vouloir faire un dégradé rapidement qui soit compatible Gecko/Webkit, ni faire en une ou deux lignes une boîte avec des coins arrondis.
En plus on a de nouveaux jouets, comme les input type=‘search’. Justement en parlant de ça, il se trouve que pour un client je me suis retrouvé devant une maquette où se trouve un champs de recherche habituel, celui-ci étant habillé de gris entre autres choses… À charge pour moi de faire une intégration HTML5/CSS3 de la chose.

Comme je passe pas mes journées à intégrer des inputs j’ai commencé par des tests. Et là, c’est le drame.
Voici une page html standard pour mon test :

<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8" />
   <title>input[type="search"]</title>
   <meta http-equiv="X-UA-Compatible" content="chrome=1">
</head>
<body>
   <form id="search">
      <input type="search" placeholder="Rechercher…" name="q" autocomplete="off">
   </form>
</body>
</html>

On peut constater d’emblée une différence fondamentale de rendu entre Gecko et Webkit

Différences de rendu entre Gecko et Webkit pour <input type="search">

Qu’importe me dis-je, je m’en vais y mettre un coup de CSS dans sa face et on verra bien qui est le maître du monde. Dont acte :

	#search input[type="search"] {
		display: block;
		background-color: #666;
		color: #fff;
		border: 1px solid #666;
		border-top-color: #454545;
		border-left-color: #454545;
		padding: 10px;
		font-size: 16px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		width: 190px;
	}

Et quand on vérifie le rendu dans Gecko et Webkit on se rend compte qu’on a pas le cul sorti des ronces

Les CSS c’est beau… quand ça marche

Diantre, normalement ça marche. Et pas là… Après avoir vérifié et revérifié le html et la css — les coquilles ça arrive — j’ai ouvert ma page dans Safari et en vérifiant la page avec l’inspecteur web j’ai découvert avec horreur que Webkit utilise ses propres règles CSS pour afficher un input type="search".

Là où Gecko se borne — pour l’instant — à afficher un input tout à fait classique, Webkit utilise des règles CSS très propriétaires pour singulariser ce type d’élément de formulaire. Si on scrute avec l’inspecteur voilà ce que nous dit Webkit :

input[type="search"] {
	-webkit-appearance: searchfield;
	box-sizing: border-box;
}

Donc, si on court-circuite la façon dont Webkit gère l’affichage il y a de fortes chances que notre super CSS s’applique aussi correctement. Après avoir cherché un peu voilà ce qu’il faut déclarer pour Webkit :

#search input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

Voilà, court-circuit de -webkit-appearance et -webkit-box-sizing et avec le code css complet on a enfin un affichage identique d’un navigateur à l’autre.

La CSS finale :

#search input[type="search"] {
	display: block;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	background-color: #666;
	color: #fff;
	border: 1px solid #666;
	border-top-color: #454545;
	border-left-color: #454545;
	padding: 10px;
	font-size: 16px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	width: 190px;
}

On vient de quitter une époque ou la simple évocation de “compatibilité IE6” provoquait des vomissements et des crises d’eczéma chez les webdesigners pour se retrouver dans une ère où il faut être encore plus prudent, très au courant des derniers développements, et aussi très malin pour ne pas avoir à ré-écrire dans 18 mois tout ou partie de nos CSS. Je ne sais pas si on y a gagné en flexibilité, au moins on y a gagné en possibilités nouvelles… on verra dans quelques mois ce qu’il en coûte. Ou pas.

Où l’on s’aperçoit qu’on s’est fait chier pour pas grand-chose