| Aller aux menus | Aller au contenu |

<hier>WEBLOG</hier>

Lundi 2 juin 2008 | link |

Détournement de balises et plus si affinités

Le détournement de la balise blockquote (réservée aux blocs de citations) pour créer des retraits est légion. Mais certains webmestres ne manquent pas d'imagination pour en détourner d'autres.

Ainsi, voici les codes trouvés sur un site qui se vante respecter et initier aux standards du W3C...

<textarea class='codecontainer'>
  .greenboldtext{
  font-size: small;
  color: #008080;
  font-weight: bold;
}
</textarea>
<fieldset>
	<legend> Attention </legend>
Notez un "." devant cette classe, 
il est possible de donner de n'inporte 
quel nom à votre classe.
Nous vous conseillons des noms éloquant comme 
".monTexteEnGrasEtbleu".
</fieldset>

Curieux... A quoi servent fieldset, legend et textarea normalement  ?

Ce sont des balises réservées aux formulaires : fieldset permet de regrouper des parties de formulaire, legend permet d'identifier le fieldset et textarea est un élément qui crée une zone de saisie multiligne.

Exemple d'extrait de formulaire

Source (x)html
<fieldset>
 <legend>Adresse de livraison</legend>
 <label for="ruelivraison">Adresse postale :</label>
 <textarea name="ruelivraison" id="ruelivraison" rows="5" cols="20"></textarea>
</fieldset>
<fieldset>
<legend>Adresse de facturation</legend>
 <label for="ruefacturation">Adresse postale :</label>
 <textarea name="ruefacturation" id="ruefacturation" rows="5" cols="20"></textarea>
</fieldset>
Source CSS

Un peu de CSS pour enjoliver :

fieldset {
 padding:10px;
 font-size:120%;
 width:50%;
 margin-bottom:15px;
} 
legend {
 color: #a0522d;
 font-weight: bold;
 padding-left: 20px; 
 background: url(/images/coche.png) no-repeat; 
}
textarea {
 display:block;
 background-color:#A6BEDE;
 border:1px solid #a0522d;
}
label {
 display:block;
 font-size:90%;
}
*:focus {
 background-color:#DCDCDC;
}
Résultat
Adresse de livraison
Adresse de facturation

Sur le site précédemment cité, point de formulaire. Les balises sont détournées à un seul but graphique. Effectivement c'est joli, mais c'est incorrect et inaccessible.

Quand on exhibe les logos « valid xhtml 1.0 » et « valid CSS » du W3C, la moindre des choses c'est tout de même que ce soit vrai, du moins le plus possible.
Mais aucune page ne passe la validation et la sémantique est pour le moins « spontanée ».
D'autre part toutes les ressources sont pompées du site CSS basics, l'exemple pas à pas pour réaliser une page sans tableaux n'est autre que celui d'Olivier Patry sur Alsacréations (subtil : grâce au popup il faut être très observateur pour voir qu'on a changé de site), quant au titre du site... no comments.

C'est tout de même agaçant ces gens qui ne savent pas faire les choses par eux-même, qui profitent des talents des autres pour leur propre compte, mais qui ne sont même pas capables de le faire correctement...

Une idée, peut etre est-ce volontaire pour permettre à firefox de souligner les fautes d'orthographe dans le css?
Je ne vois pas d'autres raisons :(

tfe - 03-06-2008 - 13:29

:-D Effectivement, sous firefox tout est souligné de rouge...

En fait, les textarea sont couplés à un javascript qui permet la capture du code.

Et comme un bon pompeur sachant pomper, il a tout récupéré ici :
http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/

Pascale - 03-06-2008 - 13:56

D'ailleurs, il serait bien dans le rouge du coup :

"Users may NOT, however, redistribute or repost/ resell for download any CSS code (including any graphics) found in the CSS library. Redistribution is defined as re-offering our codes for download in any fashion, whether on a competing web site, an application that generates code snippets, or a CD-ROM collection of CSS/JavaScript codes etc."
http://www.dynamicdrive.com/style/csslibrary/tos/

Pascale - 03-06-2008 - 14:16

Et puis tiens, tant qu'on y est, son genérateur de feuille de style vient d'ici :
http://www.jejavascript.net/gencss.php

Pascale - 03-06-2008 - 14:31

Permettez moi de ne pas trouver très correct de citer sans créditer une œuvre de l'esprit. Rendons donc à César… : http://www.cssdebutant.com/

Laurent - 17-06-2008 - 00:28

Rohhh, voilà que le Capitaine casse tout mon jeu de piste...
tssssssss

Pascale - 17-06-2008 - 20:51

Sur le formulaire je suis bien d'accord (fieldset et legend).

Mais sur le textarea, il faut bien avouer que c'est très pratique comme mécanisme simple permettant de sélectionner tout le code fourni. D'ailleurs sur evolt.org ça a été fait comme ça pendant des années.

Non, pour une fois (moi qui suis pourtant prompt à ouvrir ma gu...), j'accepte gaillardement le détournement de balise.

Stéphane Deschamps - 23-06-2008 - 14:38

Booon, oui, d'accord. Le textarea à la rigueur.
Effectivement il ne fait pas partie des éléments à ne pas détourner dans le RGAA.

Pascale - 23-06-2008 - 14:57

en même temps, c'est le premier résultat de google, c'etait facil à trouver :)

tfe - 25-06-2008 - 18:05

| Laisser un commentaire |

| Index | Avant | Archives |


google.fr