<hier>Juin 2008</hier>

02

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

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...

Haut de page

| Index | Archives | « Avril 2008 | Juillet 2008 » |

---

Vendredi 26 avril 2024