Test du framework CSS Yahoo YUI

Suite de l’évaluation des framework CSS. Après BluePrint, je m’attèle à Yahoo YUI. Comme son prédécesseur, il fait partie des frameworks les plus cités. La marque Yahoo pourrait-elle être un gage de qualité? Les tests vont nous le dire …

Premier contact

Disons-le tout de suite: par rapport à BluePrint, nous changeons de dimension. Tout fait beaucoup plus pro: la présentation du site, son organisation, la documentation…
Logo de Yahoo YUI
Yahoo YUI est, en fait, composé d’un assez grand nombre d’éléments: on y trouve les feuilles de styles du type typographie et grille, mais également des scripts et des classes JavaScript permettant de concevoir des sites du type Web 2. Je NE parlerai PAS de ces derniers, le sujet étant le concept de Grid CSS.

Pour cette partie, le framework YUI propose principalement 4 feuilles de styles de base:

  • base.css regroupe les éléments typographiques principaux,
  • grids.css contient tous les styles de positionnement, de structure, les blocs…,
  • fonts.css fixe la taille de la police de caractère, et complète la feuille base.css,
  • reset.css permet de supprimer toutes les propriétés par défaut des éléments HTML standards.

Il propose également des feuilles de styles « compressées », qui regroupent le contenu des feuilles de styles de base, au format compressé, c’est-à-dire sans espace, sans indentation, sans retour à la ligne … Par exemple reset_fonts.css contient les styles des fichiers reset.css et fonts.css

Documentation

La documentation est abondante, et bien faite. La page de YUI donne également accès à plusieurs utilitaires qui facilitent le choix des outils (feuilles de styles, scripts …), et la construction de la page elle-même. La feuille de styles grids.css est très bien résumée en une seule page à télécharger au format PDF.
Un seul regret: l’absence de quelques exemples plus complexes que ceux présentés, et qui permettraient de mieux comprendre certaines subtilités.

L’utilisation

YUI est à la fois un outil, et une méthode: en effet, contrairement à BluePrint, le nom de certaines classes est nomenclaturé: hd pour l’entête, ft pour le pied de page … et la structure de la page HTML est quasiment imposée: cela permet une meilleure lecture du code, par une identification immédiate de ses composants.
Malgré une plus grande complexité, le produit reste tout à fait abordable. Lors des premiers développements, il faut juste comprendre que l’application d’un style n’aura pas les mêmes effets (taille et positionnement) selon la position de l’élément HTML. Ce détail est assez perturbant au début.

Globalement, Yahoo YUI s’appuie sur un nombre restreint de styles:

  • docx (x une valeur entre 1 et 4) fixe la largeur de la page,
  • yui-b permet de délimiter les grandes structures de la page (partie contenu, sidebar …),
  • à l’intérieur, les classes yui-g découpent ses structures en colonnes avec des largeurs proportionnelles (par tranche de 1/2, 1/4 ou 1/3),
  • et enfin, les classes yui-u sont les blocs « finaux » qui vont accueillir le contenu.

Yahoo YUI a deux avantages par rapport à BluePrint:

  • les dimensions proportionnelles (en % ou en em) apportent une certaine souplesse dans le design,
  • nous pouvons transformer le design d’un site, avec un minimum de modifications.

Prenons un exemple: une page de 950px de large avec une sidebar à droite de 180px de large correspond au code HTML suivant:

<div id="doc" class="yui-t4">
 
<div id="hd">
            <!-- Entete --></div>
 
 
<div id="bd">
 
<div id="yui-main">
 
<div class="yui-b">
                    <!-- Contenu --></div>
 
</div>
 
 
<div class="yui-b">
                <!-- Sidebar --></div>
 
</div>
 
 
<div id="ft">
            <!-- Pied de page --></div>
 
</div>

Maintenant, nous souhaitons changer le design, en réduisant la largeur à 760px et en plaçant la sidebar à gauche. Il suffit de changer la class du bloc doc, c’est à dire remplacer la ligne <div id="doc" class="yui-t4"> par <div id="doc" class="yui-t2">

Si l’on fait bien les choses, en utilisant des tailles relatives (taille en %), tout le contenu s’adapte automatiquement. Puissant non ?

Le module grid.css est assez agréable et simple à utiliser. Le découpage en 1/2, 1/3 ou 1/4 est efficace. Si l’on veut aller au delà, il faut emboîter les blocs (faire des 1/2 de 1/4 pour obtenir des 1/8), ce qui génère beaucoup de balises div .

Côté typographie, je suis déçu: selon moi, les valeurs par défaut ne conviennent pas à un usage général, et demandent beaucoup d’adaptation. La taille des caractères est de 13px par défaut, mais l’interligne n’est que de 16px. Les marges des titres sont énormes, et les titres ont des attributs (soulignement par exemple) qui deviennent gênant s’ils ne conviennent pas.

On peut d’ailleurs généraliser la dernière remarque: la feuille de styles reset.css me semble très efficace, mais ces effets sont largement annulés par les trois autres (grid.css, fonts.css et base.css). Beaucoup d’attributs sont placés de façon « étrange » (un text-align:center sur body, ou certaines marges sur les listes ul/li, par exemple), et force le développeur à surcharger des styles qu’ils n’auraient même pas touché en temps normal.

Dernier point, les feuilles de styles reset.css et grids.css ne passent pas la validation CSS du W3C, à cause des styles nécessaires à Internet Explorer.

Le tableau ci-dessous donne les liens vers les pages obtenues, ainsi que les sources:

Layout 1 Layout 2 Layout 3
Design cible Structure 1 Structure 2 Structure 3
Yahoo YUI Fichier HTML
Fichier CSS
Résultat
Fichier HTML
Fichier CSS
Résultat
Fichier HTML
Fichier CSS
Résultat

Commentaires

La petite taille et le concept de BluePrint le rendent ludique. Au premier contact, Yahoo YUI donne, au contraire, une image de complexité et de lourdeur. La réalité est assez différente: la documentation de YUI, très bien faite (notamment le Getting Started), permet de démarrer en douceur, et l’outil se révèle très agréable à utiliser.

La partie grille me semble particulièrement intéressante: on isole bien les différents éléments de la page (entête, corps, pied de page …), et la sidebar est clairement identifiée, ce qui permet de la déplacer en jouant uniquement sur les styles.

Comme précisé dans le paragraphe précédent, Yahoo YUI souffre de quelques défauts:

  • La partie typographie est difficile à utiliser, simplement parce qu’elle ne reprend pas les conventions habituellement utilisées: l’interligne est faible, et les marges des titres sont disproportionnées,
  • Les feuilles de style définissent de nombreux attributs qu’il faut ensuite surcharger compenser leurs effets.

Par rapport à BluePrint, Yahoo YUI se montre supérieur sur deux points:

  • Il donne plus de souplesse dans le design,
  • Il offre des possibilités de transformer le design, sans toucher à la feuille de styles.

Pour résumer, le point fort du framework est constitué par les styles de positionnement (grid.css). Les styles de typographie me semblent moins confortables à utiliser.

Ajout du 18 Mai 2008:

  • Les pages construites avec Yahoo YUI sont clairement plus robustes que celles élaborées avec BluePrint, dans le sens où elles sont moins sensibles aux dimensions du contenu. J’ai souvent constaté un déplacement de la sidebar avec BluePrint, alors que celle-ci ne bouge pas avec Yahoo YUI,
  • Il est quasiment impossible de modifier les conventions typographiques du framework: les dimensions de certains éléments de la grille sont indiquées en em. Donc si vous préférez une taille de 12px au lieu de 13px, la largeur de la page passera de 750px à 690px !!!

Références

Autres articles de cette série

  1. Un framework CSS hybride (9 juillet 2008)
  2. Test du Framework CSS 960 Kit (3 juillet 2008)
  3. Frameworks CSS: Conclusion (28 juin 2008)
  4. Framework CSS: test de YAML (23 juin 2008)
  5. FrameWork CSS: Tests de BluePrint v2 (18 mai 2008)
  6. Test du framework CSS Yahoo YUI (17 mai 2008)
  7. GridFox: aide au développement sous Firefox (11 mai 2008)
  8. Test du framework CSS BluePrint (19 avril 2008)
  9. Les frameworks CSS (14 avril 2008)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *