Le XHTML/CSS2 W3C valide pour les nuls (et pour les vieux).

Bonjour abonné malheureux de ce blog un peu en friche. Déjà bonne année 2009 (sur le fil) et plein de bonnes choses magnifiques pour cette nouvelle année. Le web va prendre 20% de croissance cette année alors tu es au bon endroit
En 2009 je prends la résolution de couper l’herbe et faire une peu de ménage ici, ou pas.

En attendant, j’ai été retenu par plusieurs activités très chronophages, dont le remaniement complet de mon CMS pour en virer le code HTML de 1999 et le rendre “W3C compliant” comme dirait ma cousine de Boston, alors je vais étaler ici ma science récente pour t’en faire partager les grands principes et les choix éventuels à faire pour être au top.

Déjà je voudrais dire en intro que c’est possible, chose dont je n’étais pas sûr il n’y a pas si longtemps.

1/ Le XHTML limpide

Alors on parle de Transitional, pas de Strict, pas parce que j’ai envie de lancer un débat, mais uniquement parce que c’est ce que j’ai fait

La limpidité est importante à plusieurs titre :

• déjà c’est beau à voir;
• ensuite c’est bien pour ajouter des effets Javascript genre avec mootools,  que j’aime bien;
• c’est simple et donc léger;
• Google adore;
• ça permet de styler tous les éléments super bien;
• … donc le cas échéant de faire une feuille de style pour mobile;
• si t’as d’autres choses à dire, tu les mets en commentaire, moi j’ai fini.

La limpidité c’est :

• Pas de tables foireuse inutiles pour découper ta page;
• pas de pixels pour séparer les éléments comme on faisant avant;
• pas de style, pas de propriétés sur les éléments dans le code;
• des tags bien fermés;
• une architecture lisible au premier coup d’oeil.

J’ai pas mal utilisé les DL/DT/DD (pour faire des modules au design extensible) et UL/LI (notamment pour les menus et sous menus), quelques DIV et SPAN pour découper mes éléments, des H1/H2/H3/H4 bien sûr pour Google, des alts et des titles aussi pour Google, du code HTML quoi.

J’ai appris que & s’écrivait & partout sinon c’est pas valide.

J’ai appris qu’on peut mettre un UL dans un LI pour les sous-menus.

J’ai appris qu’on mets pas un H4 dans un DT.

2/ Les feuilles de style par navigateur

Alors on code pour Firefox, on ajuste pour IE7 et on adapte pour IE6. Ca fait donc 3 feuilles de style. Et parce que les *width ou les _width c’est pas CSS2 valid, on les appelle avec :

<style type=”text/css” media=”screen,tv,projection”>
@import “style.css”;
</style>
<!–[if IE 7]>
<style>
@import “styleie7.css”;
</style>
<![endif]–>
<!–[if lt IE 7]>
<style>
@import “styleie6.css”;
</style>
<![endif]–>

3/ Le CSS2

Le coup du cursor:hand;cursor:pointer; c’était pour IE5, maintenant faut arrêter, donc cursor:pointer; c’est la bonne syntaxe.

On ne style pas les H1/H2/H3/H4/H5, ou uniquement en dépendance d’un autre truc, sinon on a des comportements aléatoires.

On utilise les em au lieu des pixels pour tout ce qui est titres, textes, interlignage, formulaires… non seulement c’est beau mais changer la taille de tous les éléments du site est facile pour le dev comme pour l’internaute. UTILISEZ-LES !
Un élément contenu dans un autre hérite du em et vient multiplier la valeur du em de l’élément.
Donc un truc à 2em dans un truc à .8em fait… 1.6em (reste avec nous). Le em de base (body) peut-être défini en pixel ou en pourcentage. J’ai pris le pourcentage, je suis joueur et c’est plus accessible parait-il.

Caler les formulaires au pixel sur tous les navigateurs est un exercice très très chronophage.
Je vous donne mes valeurs, vous en ferez bien ce que vous voudrez.

input{font-size:.8em;line-height:.9em;border:1px solid #CCCCCC;padding:0.2em;}
label{font-size:.8em;height:1.2em;padding:0.2em;}
input[type=text]{height:1.2em;padding:0.2em;}
select{font-size:.8em;border:1px solid #CCCCCC;height:1.8em;padding:0.2em;}
textarea{font-size:.8em;border:1px solid #CCCCCC;padding:0.2em;}
input[type=submit]{padding:0.14em 0.5em 0.025em 0.5em;cursor:pointer;line-height:1.475em;min-height:1.475em;}
input[type=button]{padding:0.14em 0.5em 0.025em 0.5em;cursor:pointer;line-height:1.475em;min-height:1.475em;}

Styler correctement un input[type=file] est impossible partout. C’est un champ dépendant de l’OS.

Les DL DT DD sont à utiliser pour les beaux design extensibles qu’on faisait en table. Les DT sont à utiliser impérativement pour mettre un titre. Si on ne veut pas le rendre visible, on fait un beau :

dt{display:block;overflow:hidden;text-indent:-1000em;}

D’ailleurs on peut utiliser ça pour plein d’autres choses, je vous laisse jouer avec.

4/ Les trucs à la con

Pour ce qui n’est pas IE6, on peut utiliser la syntaxe de descendance du type ul > li > ul > li, pour adresser les listes de sous-menu.

Pour IE6 on est baisé, ça marche pas, et en plus un ul > li ira aussi taper le LI qui est dans le UL qui est dans le LI qui est dans le UL (t’es perdu, c’est pas grâve, si tu as plusieurs niveaux, il sont tous impactés). Donc IE6 prend les styles dans l’ordre, donc pour adresser le li du sous niveau, mettre le style après dans la feuille. Maintenant si tu as un background sur le premier niveau mais pas dans le sous niveau, faut spécifier background:none;.

Pour IE6 encore, on ne peut pas utiliser les input[type=text] etc… donc styler input pour IE6 et spécifier ensuite pour les autres. Ca sera moins beau pour IE6, mais les gens qui ont IE6 en 2009, qu’attendent-ils du web entre nous.

5/ Les trucs super à la con

Un div en position absolute qui passe par dessus un select sur IE6 passe en fait en dessous, rien a faire. C’est un bug connu et il existe des hacks assez pointus que j’ai décidé d’ignorer pour la même raison que celle du précédent paragraphe.

Le PNG transparent sur IE6, je vous laisse chercher, c’est connu aussi. Je l’ai même pas encore mis sur mon CMS (je vais le faire quand même par contre).

6/ Les trucs perdus et c’est domage

Les align=”absmiddle”, les height=”100%”, les valign=”bottom”,  les align=”center” (deviennent : margin:0 auto;).
Aligner un footer toujours en bas de la page se fait donc en JS et c’est un peu con.

7/ Mettre à plat le markup au début

Pour éviter de subir les valeurs par défaut éventuelles et les impacts des navigateurs, on fait un reset de tous les tags au départ :

html, body, div, span, object, td, a, li … {
margin: 0;padding: 0;border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}

J’ai pas tout mis mais vous voyez l’idée…

ol, ul, ul li,li {list-style:none;list-style-type:none;list-style-position:outside;list-style-type:none;}

Notamment pour utiliser les li dans les menus…

table {border-collapse: collapse;border-spacing: 0;border:0;margin:0 0 1.25em 0;padding:0;border:none;}

Voilà… je vous laisse ajouter les truc hyper importants que j’ai pas fait dans les commentaires

Je vous laisse en partant l’adresse des validateurs XHTML et CSS2, pas la peine de tester ce blog, j’ai même pas vérifié.