Geekeries et d'autres choses - Mot-clé - firefox2024-01-29T10:26:26+01:00urn:md5:51ff50324f4f72c0e78683659647f2c8DotclearComment styler les placeholders des formulaires HTML5urn:md5:c678cc3fb36bbc414b733a6f1d1d4d2a2011-05-31T18:18:00+02:002011-11-04T09:17:36+01:00Julien WajsbergInformatiquecssfirefoxhtml5placeholderwebkit<p>Aujourd'hui, j'ai eu l'occasion d'expérimenter les manières de styler le <code>placeholder</code> des formulaires HTML5. Si si, vous savez, ça :</p>
<pre class="html4strict html4strict" style="font-family:inherit"><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">input</span> placeholder<span style="color: #66cc66;">=</span><span style="color: #ff0000;">'ceci est un placeholder'</span> <span style="color: #66cc66;">/</span>></span></pre>
<p>Ce qui donne (ça ne fonctionne que dans les navigateurs récents):</p>
<input placeholder='ceci est un placeholder' style='border: 1px solid #CDCDCD'/>
<p>On va voir ensemble les problèmes rencontrés, et comment les résoudre.</p> <h3>Comment styler pour chaque navigateur</h3>
<p>Pour l'instant, seuls Firefox et Webkit (Safari/Chrome) permettent de styler le <em>placeholder</em>. Évidemment, chacun le fait différemment. Et aucun des deux n'est pérenne, puisqu'<a href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0240.html" hreflang="en">ils en parlent sur www-style</a>.</p>
<p>Voyons tout de même comment ça fonctionne.</p>
<h4>Dans Firefox (à partir de la version 4)</h4>
<p>Firefox propose une pseudo-classe qui s'appelle <code>-moz-placeholder</code>. <a href="https://developer.mozilla.org/en/CSS/%3A-moz-placeholder" hreflang="en">On peut lire sa documentation sur le Mozilla Developer Network</a>. On l'utilise simplement de la manière suivante :</p>
<pre class="css css" style="font-family:inherit">input<span style="color: #3333ff;">:-moz-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #3333ff;">:-moz-placeholder </span><span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">red</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span></pre>
<p>Par défaut, Firefox utilise la valeur <code>graytext</code> qui correspond à <code>#B1A594</code><sup>[<a href="https://everlong.org/blog/index.php/post/2011/05/Comment-styler-les-placeholders-des-formulaires-HTML5#pnote-430-1" id="rev-pnote-430-1">1</a>]</sup>.</p>
<h4>Dans Webkit</h4>
<p>Avec Webkit, on nous propose cette fois un pseudo-élément <code>-webkit-input-placeholder</code>. On l'utilise de la manière suivante :</p>
<pre class="css css" style="font-family:inherit">input<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder </span><span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">red</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span></pre>
<p>La valeur par défaut est <code>darkGray</code> qui correspond à <code>#A9A9A9</code><sup>[<a href="https://everlong.org/blog/index.php/post/2011/05/Comment-styler-les-placeholders-des-formulaires-HTML5#pnote-430-2" id="rev-pnote-430-2">2</a>]</sup>.</p>
<h3>Premier problème : écrasement des styles navigateurs avec Firefox</h3>
<p>Ça a été ma première surprise, et cela arrive uniquement dans Firefox. Si on spécifie un style pour les balises <code>input</code>, il écrase dans Firefox le style spécifique du <em>placeholder</em> !</p>
<p>Ainsi, lorsqu'on utilise le simple code suivant, les <em>placeholders</em> ne sont plus différemment stylés !</p>
<pre class="css css" style="font-family:inherit">input <span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">blue</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span></pre>
<p>L'explication de ce comportement n'est pas si simple, puisqu'il faut tenir compte de plusieurs paramètres :</p>
<ul>
<li>Tout d'abord, puisqu'on utilise une pseudo-classe, le style du <em>placeholder</em> par défaut s'applique à l'élément <code>input</code> lui-même.</li>
<li>Ensuite, comme décrit dans la <a href="http://www.w3.org/TR/CSS2/cascade.html#cascading-order" hreflang="en">spécification CSS2</a>, les règles définies dans la page par l'auteur sont plus prioritaires que les règles par défaut du navigateur.</li>
<li>Ainsi, c'est bien la règle de l'auteur qui est utilisée, quand bien même sa spécificité est plus faible !</li>
</ul>
<p>Je n'ai pas trouvé d'autre solution que de redéfinir un style pour le placeholder...</p>
<h3>Second problème : on ne peut pas mixer les sélecteurs pour Firefox et les sélecteurs pour Webkit</h3>
<p>Bêtement, je me suis dit qu'on pourrait cumuler les 2 sélecteurs dans la même règle, ainsi :</p>
<pre class="css css" style="font-family:inherit">input<span style="color: #3333ff;">:-moz-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #3333ff;">:-moz-placeholder</span><span style="color: #00AA00;">,</span>
input<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder </span><span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">red</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span></pre>
<p>Mais en fait, ça ne fonctionne pas ! La règle est ignorée par les deux navigateurs ! L'explication la plus plausible, c'est que lorsqu'un navigateur rencontre une pseudo-classe ou un pseudo-élément qu'il ne comprend pas, il ignore l'ensemble du sélecteur.</p>
<p>Il faut donc répéter la règle, comme ceci :</p>
<pre class="css css" style="font-family:inherit">input<span style="color: #3333ff;">:-moz-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #3333ff;">:-moz-placeholder </span><span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#555</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span>
input<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder </span><span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#555</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span></pre>
<p>Heureusement, les styles pour les <em>placeholders</em> seront généralement bien courts.</p>
<h3>Une implémentation pour les navigateurs plus anciens ?</h3>
<p>Une recherche rapide m'a amené sur <a href="https://github.com/marioizquierdo/enablePlaceholder" hreflang="en">le plugin jQuery Enable Placeholder</a> qui remplit bien sa fonction. Il permet aussi de styler le texte du <em>placeholder</em> en utilisant une classe, qui est la classe <code>placeholder</code> par défaut.</p>
<h3>On met tout bout à bout</h3>
<p>Voici donc le CSS final utilisé dans mon projet :</p>
<pre class="css css" style="font-family:inherit">input<span style="color: #00AA00;">,</span> textarea <span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span>
input<span style="color: #3333ff;">:-moz-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #3333ff;">:-moz-placeholder </span><span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#555</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span>
input<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #00AA00;">:</span><span style="color: #3333ff;">:-webkit-input-placeholder </span><span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#555</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span>
input<span style="color: #6666ff;">.placeholder</span><span style="color: #00AA00;">,</span> textarea<span style="color: #6666ff;">.placeholder</span> <span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#555</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span></pre>
<p>Surtout, si vous avez des commentaires sur ce que je raconte là, n'hésitez pas !</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://everlong.org/blog/index.php/post/2011/05/Comment-styler-les-placeholders-des-formulaires-HTML5#rev-pnote-430-1" id="pnote-430-1">1</a>] en tout cas sur mon Linux; est-ce différent ailleurs ?</p>
<p>[<a href="https://everlong.org/blog/index.php/post/2011/05/Comment-styler-les-placeholders-des-formulaires-HTML5#rev-pnote-430-2" id="pnote-430-2">2</a>] encore une fois, testé chez moi sur Chromium.</p></div>
Vous reprendrez bien un peu d'onglet ?urn:md5:c8262db34cc25a66443daba3c8094a302010-01-17T12:30:00+01:002010-01-17T12:30:00+01:00Julien WajsbergGénéralfirefoxonglets <p><a href="http://www.la-grange.net/2010/01/16/gerer-tabs" hreflang="fr">Karl explique comment il travaille avec les onglets de Firefox</a>.</p>
<p>Moi aussi, je travaille de manière similaire : lorsque je veux me rappeler de quelque chose, je laisse un onglet ouvert. De fait, mes onglets actuellement ouverts sont :</p>
<ul>
<li><a href="http://home.att.ne.jp/blue/moonlight/" hreflang="en">MoonShell</a>, un lecteur de médias sur Nintendo DS</li>
<li><a href="http://www.pianopenguin.net/index.php?post/2007/08/18/Convertir-vos-films-au-format-DPG#main" hreflang="fr">Convertir vos films au format DPG</a>, un format lisible par MoonShell</li>
<li><a href="http://theli.is-a-geek.org/blog/static/dpgconv" hreflang="en">DPG Converter for Linux</a>, le site du convertisseur au format DPG</li>
<li><a href="http://www.marmiton.org/Recettes/Recette_galette-des-rois_10832.aspx" hreflang="fr">Ma recette de galette des rois sur Marmiton</a></li>
<li><a href="http://fr.wikipedia.org/wiki/Saison_3_de_The_Big_Bang_Theory" hreflang="fr">La liste des épisodes de la saison 3 de The Big Bang Theory</a>, avec les dates de diffusion.</li>
<li><a href="http://fr.wikipedia.org/wiki/Saison_5_de_How_I_Met_Your_Mother" hreflang="fr">La même chose pour la saison 5 de How I Met Your Mother</a></li>
<li>et donc <a href="http://www.la-grange.net/2010/01/16/gerer-tabs" hreflang="fr">l'article de Karl</a> et la page d'édition de mon blog.</li>
</ul>
<p>À vrai dire, contrairement à Karl, j'essaie de faire du ménage dans mes onglets ouverts dès que ça devient ingérable. En effet, ils servent plusieurs usages :</p>
<ul>
<li>comme marque-page temporaire; mais s'ils restent ouverts plusieurs jours, pourquoi ne pas en faire un marque-page permanent ?</li>
<li>comme marque-page temporaire; le délai est écoulé, on n'a plus besoin de le garder</li>
<li>comme "trucs à faire/à lire". J'avoue, j'ai un problème: dès que j'ai un truc à lire, je le lis. Même si ça interrompt ma lecture d'un autre texte. Donc en fait je n'ai pas tant d'onglets de ce type ouverts.</li>
</ul>
<p>Donc, au boulot comme à la maison, ce sont surtout des marque-page facile à ranger.</p>
<p>Et pour vous ?</p>Trou de sécurité chez Adobe Flashurn:md5:99aa37888c4ebbf8e6196663d37e281f2009-07-29T17:36:00+02:002009-07-29T16:42:50+02:00Julien WajsbergInformatiquefirefoxflashnoscriptsécurité <p>Certains le savent peut-être déjà, mais <a href="http://www.theregister.co.uk/2009/07/22/adobe_flash_attacks_go_wild/" hreflang="en">un gros trou de sécurité affecte Adobe Flash</a>. Sauf cas particulier, il est à peu près sûr que vous ayiez ce logiciel installé (c'est celui qui permet de lire les vidéos sur Youtube et la quasi totalité des des sites de vidéo<sup>[<a href="https://everlong.org/blog/index.php/post/2009/07/Trou-de-s%C3%A9curit%C3%A9-chez-Adobe-Flash#pnote-388-1" id="rev-pnote-388-1">1</a>]</sup>). Donc, vous êtes mal, car il n'y a pas encore de correctif sorti par Adobe, prévu pour jeudi et vendredi. Et puis, ah oui, j'oubliais, des exploitations du bug sont déjà en ligne sur Internet. Bref, vous êtes mal.</p>
<p>A partir de là, il y a deux solutions :</p>
<ul>
<li>désactiver Flash tant qu'il n'y a pas de correctif de la part d'Adobe. Dans Firefox 3 (ou 3.5), ça se fait dans "<em>Outils/Modules complémentaires</em>", et il faut aller dans l'onglet "<em>Plugins</em>'". Là, on peut désactiver le plug-in Adobe Flash. Par contre, il sera désactivé pour tous les sites, et il faudra le réactiver à nouveau après le correctif d'Adobe.</li>
<li>installer l'excellente <a href="http://noscript.net/" hreflang="en">extension Firefox NoScript</a>, installable directement depuis "<em>Outils/Modules complémentaires</em>".</li>
</ul>
<p>L'extension NoScript désactive tout contenu actif (Javascript, Flash, Silverlight) par défaut, et vous permet de l'activer site par site. Ainsi, aucun risque de se choper du code qui viendrait d'un site non connu.</p>
<p>Il faut savoir en effet que, bien souvent, même les sites corrompus (c'est-à-dire les sites où vous auriez l'habitude d'aller, mais qui se seraient fait pirater pour pouvoir ajouter l'exploitation du bug) font référence au script d'exploitation depuis un serveur distant. En fait, avec NoScript, la seule possibilité de ne pas être protégé est si un site que vous avez autorisé se retrouve complètement piraté. Je ne vais pas vous mentir, ça peut arriver.</p>
<p>Bon, en plus, en définissant précisément les domaines de confiance, cela vous permet de pas donner vos informations à n'importe qui, et de véritablement contrôler ce qui est exécuté chez vous. Et donc, vous seriez aussi un peu mieux protégé contre les problèmes de sécurité à venir.</p>
<p>Bref, NoScript, c'est bon, mangez-en :-)</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://everlong.org/blog/index.php/post/2009/07/Trou-de-s%C3%A9curit%C3%A9-chez-Adobe-Flash#rev-pnote-388-1" id="pnote-388-1">1</a>] Sauf la <a href="http://openvideo.dailymotion.com/fr" hreflang="fr">démo de dailymotion</a> qui utilise les fonctionnalités HTML5.</p></div>
Chrome 2 Beta et Firefox 3.1 beta 3urn:md5:5b9d4d7eddb365727552df7eaa7fe91e2009-03-18T23:45:00+01:002009-03-18T23:45:00+01:00Julien WajsbergInformatiquebetachromefirefox <p>J'ai installé les deux sur ma machine Windows Vista<sup>[<a href="https://everlong.org/blog/index.php/post/2009/03/Chrome-2-Beta-et-Firefox-3.1-beta-3#pnote-377-1" id="rev-pnote-377-1">1</a>]</sup>, et j'ai utilisé Google Spreadsheets. Le résultat est sans appel: Firefox 3.1 beta 3 est bien plus responsif. Comme quoi, les benchmarks, ça fait pas tout.</p>
<p>En revanche, c'est clair qu'avec Chrome, tout les onglets restent responsifs même si l'un d'eux rame, et ça, c'est cool !</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://everlong.org/blog/index.php/post/2009/03/Chrome-2-Beta-et-Firefox-3.1-beta-3#rev-pnote-377-1" id="pnote-377-1">1</a>] Oui, j'ai honte.</p></div>