css

Astuce certainement connue, mais insuffisamment pour ne pas l'avoir rencontré moi même…

Je suis en train de faire les formulaires JS pour Blogotext, pour les commentaires. Les boutons pour mettre en gras, italic, etc. sont typiquement des balises <input />, et les lettres qu'on voit sur les boutons (B pour gras, I pour italic ou U pour souligné) sont spécifiés dans les attributs value="" des sus-cités balises Input.

Mais de cette façon, il n'est pas possible de mettre le "G" en gras, ou de souligner le "U" dans le bouton lui même (à moins d'utiliser une image, mais c'est nul).

Il y'a tout de même un moyen : le CSS, encore une fois.
Il suffit de dire qu'on veut que le texte de l'input contenant un "G" soit en gras :

HTML :
<fieldset id="format-buttons">
<input type="button" value="B" onclick="" title="Mettre en Gras la sélection" />
<input type="button" value="I" onclick="" title="Mettre en Italique la sélection" />
<input type="button" value="U" onclick="" title="Souligner la sélection" />
<input type="button" value="S" onclick="" title="Barrer la sélection" />
</fieldset>
CSS :
#format-buttons input[value="B"] { font-weight: bold; }
#format-buttons input[value="I"] { font-style: italic; }
#format-buttons input[value="U"] { text-decoration: underline; }
#format-buttons input[value="S"] { text-decoration: line-through; }

Ce texte marche dans tous les navigateurs, et même dans les versions 7+ de ce que les gens nomment « Wind*** int**net expl**er ».


quelques news :
- 640 morts en Libye. Ouch. C'est dingue que Khadafi s'obstine au point de vouloir tuer son peuple. Quel con. Et en France ? On se cache au lieu d'agir : bravo. Mais $arko ne va pas se fâcher avec son pote quand même...
- la France n'est une plus démocratie, selon une étude de The Economist (un hebdomadaire mondialement réputé) - (lien via Standblog). Ha, me marre-je maintenant, vu que l'on se riait de moi quand disais-je cela y'a un an. Mouhaha. Moins démocratique que l'Italie de cher Berlusconi ? Pfffff.

image de Simon Pow

7 commentaires

gravatar
Louis a dit :

Gros bug de feuille CSS pour le moment...
Aucun style chez moi.

Astuce intéressante sinon, merci !

++

gravatar
Le Hollandais Volant a dit :

merci :)

Normalement, le bug CSS est résolu (actualisez, videz le cache, et c'est bon).
Je viens de mettre en place la bêta de Blogotext 24. Quelques changements dans le HTML induisent un besoin de ré-écriture du fichier CSS. C'est fait désormais.

Comme tu peux le constater, l'astuce présentée est utilisée ici. De plus, vous disposez d'un bouton "@" à coté de chaque message pour faire une réponse à quelqu'un. C'est beau le progrès :D

EDIT : je peux même éditer les commentaires :)

gravatar
Louis a dit :

La classe, bon boulot !

Je vais voir ça de ce pas, merci bien.

++

gravatar
TD a dit :

Je connaissais ce type d'astuce, c'est valable pour toutes les options de toutes les balises.

Je viens aussi de découvrir cet indice de démocratie. Ça fait bizarre de voir la France à ce niveau.

gravatar
Guenhwyvar a dit :

Tiens, j'avais pas pensé à ça, non plus. Par contre, sur Firefox 3.0, ça marche que pour le [B] et le [I] (le [U] n'est pas souligné, et le [S] n'est pas barré) : http://img844.imageshack.us/img844/2218/capturenk.png
Cela dit, je trouve ça un peu lourd, quand même. Si jamais tu veux changer le contenu des input (par exemple, pour passer en français), t'es obligé de modifier le CSS pour que ça soit pris en compte. Et c'est pire si t'as deux input différents avec le même contenu (par exemple, un en français avec [S] pour « souligner », et un en anglais avec [S] pour « Strike/barrer »), ça devient vite compliqué.
Perso, pour les boutons de mise en forme, j'ai préféré utiliser des <span>, avec un chouilla de CSS pour que ça ressemble à des boutons. C'est probablement complètement pas correct du tout sémantiquement, mais c'est plus simple à faire et plus souple en cas de modification : http://img268.imageshack.us/img268/9074/capture1qr.png

gravatar
Le Hollandais Volant a dit :

@Guenhwyvar : il suffit de leurs donner un id="". Et d'utiliser le CSS approprié : input#italic { … } par exemple.
Sinon, je viens de voir pour Firefox. C'est idem sous Opera, mais ça marche sous Chrome.

@qwerty : pas encore, mais ça peut être envisagé. Je note.

Les commentaires sont fermés pour cet article