Sunfox

La sémantique des classes

19 novembre 2007 5 commentaires — accessibilité, css, framework, html, sémantique

En HTML le nombre de classes et le nom des classes est libre. Néanmoins il est bon d’utiliser des classes sémantiques, décrivant la fonction de la balise plutôt que son style.

Exemples

Pourquoi faire ?

De cette façon en utilisant des feuilles de style CSS l’on peut décider de changer les couleurs et l’affichage des pages sans avoir à changer l’HTML ou d’avoir des styles illogiques tels que .red { color:pink; }. D’autre part votre site peut avoir plusieurs feuilles de style (impression, mobile, slide, …), où vous pouvez décider par exemple que la classe large-column serait dans ce format… ni large, ni en colonne.

Ce n’est pas très grave si quelques-unes de vos classes décrivent l’apparence finale plutôt que la fonction de votre texte. Néanmoins c’est important dans une démarche qualité globale et cela augmente la réutilisabilité de votre code.

Tout ça pour en venir aux frameworks actuels

Les frameworks CSS qui foisonnent ces derniers temps tels que Blueprint CSS et YUI Grids CSS imposent sciemment l’utilisation de classes telles que <div class="column span-15">. C’est dommage. C’est pourquoi je les évite.

J’attends que les implémentations de CSS dynamiques telles que CleverCSS intègrent les fonctionnalités appréciables de ces frameworks. Mais je n’ai encore vu personne avancer cette idée. Ils pourraient pourtant par exemple avoir des propriétés magiques de type colspan: 15 qui se transformeraient en code nécessaire à la création d’une colonne à la bonne taille… Lazyweb te sens-tu le courage ?

Coulisses du Roi Arthur

29 janvier 2005 4 commentaires — boulot, css, dvdrama, film, html, sémantique, standards du web

Ça y est, le site du Roi Arthur est né, et c’est moi qui l’ai fait !

Chez Dualnet mon dernier projet a été de construire de A à z le site du DVD du Roi Arthur le film, pour Disney. C’est la première fois que je fais ce genre de site, et j’ai dû le faire entièrement tout seul.

Je suis assez fier du résultat, surtout en ce qui concerne l’html valide, léger et sémantique et le sacré usage des feuilles de style.

Croyez moi, ce respect des standards et cette accessibilité est une révolution dans ce genre de sites. Les sites commerciaux, de films, de DVDs et plus largement de publicité sont tous sauvagement crées pour ne fonctionner que chez la grosse partie des utilisateurs, en oubliant le reste.

C’est sans doute le seul site de film qui puisse être visité proprement à partir d’un PDA. Ou bien encore visité par un téléphone portable, un moteur de recherche ou encore un aveugle. (Si si, les aveugles aussi ont le droit de tout savoir sur le DVD du Roi Arthur… :p)

La balise <big>

26 janvier 2005 3 commentaires — html, sémantique, standards, standards du web

La sémantique HTML veut que l’on utilise les balises dont le nom décrit le contenu et non la forme. Par exemple, même si à-priori les deux balises suivantes donnent par défaut du texte en gras, <b> signifie « bold » (gras) et ne donne aucune information sur le contenu alors que balise <strong> signifie « texte plus important », et accorde un sens au contenu de la balise.

Les balises dépréciées en faveur de styles CSS sont donc <b>, <i> italique, <u> souligné, <strike> barré, <center>, <big>, <small>, …

Quoique… Les balises big et small sont des styles de texte certes, mais elles ont aussi un sens !

<big> a une dimension de hauteur, de mise au premier plan. Il se distingue de strong par son importance plus élevée, sa hauteur. C’est comme un header mais sans hiérarchie. Un lecteur vocal pourait, par exemple, le parler plus fort.

De même pour <small>. Il n’y a d’ailleurs aucune autre balise que celle-ci pour qualifier un texte qui est moins important que le reste !

Alors faut-il utiliser big et small ou utiliser des strong et des span stylés en CSS à la place ? Je pense que cette dernière solution serait une erreur, et qu’il faut utiliser ces deux balises oubliées pour leur donner le sens qu’elles aimeraient tant porter.

Class ou id ?

13 juillet 2004 — css, html, sémantique, standards du web

Pour définir le style CSS d’un élément d’ XHTML, que choisir entre une classe (.robert) et un id (#robert) quand cela donne apparement le même résultat ?
que choisir entre un <div class="robert"> et un <div id="robert"> ?
Suite de l’article…

Opquast

1 juillet 2004 — html, sémantique, standards, standards du web

Ouverture en version beta de Projet Opquast d’une liste de toutes les bonnes pratiques à mettre en oeuvre sur un site web pour qu’il soit accessible et agréable pour ses utilisateurs. Tout est fait selon le type de site (boutique, blog, etc) et selon un niveau (de difficulté ?) de 1, 2 ou 3. L’on peut encore participer à la création de cette liste en fournissant ses idées ou ses commentaires.

Il manque à mon propre site quelques points dans le niveau 3, mais dans l’ensemble je m’en sort rudement bien :]

Voir aussi un petit post à propos du lancement d’Oquast sur escalope par notre bon vieux docLegi et Opquast.org.