Obtenez du CSS réutilisable gratuitement avec Yahoo!

Dans la chronique de la semaine dernière, j'ai discuté du réseau de développeurs Yahoo!, en me concentrant sur les fonctionnalités JavaScript (principalement le calendrier) disponibles dans la bibliothèque de l'interface utilisateur Yahoo! Je voulais passer un peu plus de temps à aborder un autre domaine de la bibliothèque YUI qui fournit des outils CSS. Ces outils vous permettent de combiner facilement une conception basée sur CSS avec des applications Web.

Prise en charge du navigateur

L'une des principales caractéristiques de l'outil CSS est qu'il est conçu pour fournir une prise en charge parfaite des navigateurs de classe A. La prise en charge des navigateurs de notation est purement une notation Yahoo!, et vous pouvez voir la description complète sur son site Web, qui décrit essentiellement comment CSS se comporte bien dans les navigateurs du marché aujourd'hui.

Dans ce tableau en ligne, les navigateurs sont divisés en trois niveaux de prise en charge (A, C et X). Le niveau A est le niveau de support le plus élevé. En tirant parti de la puissance des standards Web modernes, la bibliothèque YUI découvre une expérience de classe A qui offre des fonctionnalités avancées et une fidélité visuelle. Les catégories de support et les fichiers associés vous donnent une idée de l'endroit où CSS est pris en charge, mais il devrait être disponible dans tous les navigateurs (avec des rétrogradations possibles).

CSS réutilisable

La bibliothèque YUI comprend trois zones ou fonctionnalités CSS, couvrant le formatage, l'introduction des polices et la disposition basée sur une grille (colonnes et lignes). Ces termes sont utilisés sur le site Internet pour décrire ces trois éléments :

Grilles de pages : vous permet d'intégrer une à quatre grilles de colonnes dans la capacité du modèle que vous utilisez.
Polices : fournit une standardisation et un contrôle de la typographie entre navigateurs. En général, il fournit des polices et des hauteurs de ligne cohérentes tout en prenant entièrement en charge les ajustements des polices par l'utilisateur (à l'intérieur du navigateur).
Réinitialiser : fournit une standardisation entre navigateurs des affectations par défaut aux éléments HTML. Il supprime également les expressions par défaut courantes dans les navigateurs, telles que l'utilisation de caractères gras pour les éléments mis en évidence, afin de garantir que toutes les définitions de polices sont intentionnelles et que les éléments sont toujours utilisés pour leur signification sémantique et non pour l'expression visuelle habituelle.
Après avoir été installé, chaque élément du téléchargement de la bibliothèque YUI est disponible dans les répertoires/fichiers suivants sur le serveur web :

Grilles de pages : buildgridsgrids.css
Polices : buildfontsfonts.css
Réinitialiser : créer eset eset.css
Vous pouvez installer ces répertoires de base sur votre propre serveur Web ou les placer sur votre site afin de pouvoir les référencer selon vos besoins. Une caractéristique importante de CSS (en plus d’être gratuit) est qu’il est minutieusement testé et débogué avant sa publication. Examinons de plus près les outils CSS en action.

Disposition des pages en grille

La mise en page basée sur une grille est la force motrice de presque toutes les conceptions de sites ou mises en page. Dans le passé, cela se faisait souvent via des tableaux HTML, mais CSS offre une puissance et une flexibilité considérables pour la mise en page. Page Grid fournit du code pour créer des pages avec des colonnes et des lignes selon vos besoins.

Au niveau le plus basique de la grille de pages, il fournit sept modèles de page Web, dont six définissent des dispositions détaillées du contenu principal/des barres d'outils ; le septième modèle définit une disposition sans barres d'outils, et le contenu principal occupe toute la largeur de la page. Les noms de ces modèles sont les suivants :

yui-t1 : Contient une barre d'outils d'une largeur de 160px à gauche et une zone principale d'une largeur de 570px.
yui-t2 : Contient une barre d'outils d'une largeur de 180px à gauche et une zone principale d'une largeur de 550px.
yui-t3 : Contient une barre d'outils d'une largeur de 300px à gauche et une zone principale d'une largeur de 430px.
yui-t4 : Contient une barre d'outils d'une largeur de 180px à droite et une zone principale d'une largeur de 550px.
yui-t5 : Contient une barre d'outils d'une largeur de 240px à droite et une zone principale d'une largeur de 490px.
yui-t6 : Contient une barre d'outils d'une largeur de 300px à droite et une zone principale d'une largeur de 430px.
yui-t7 : contient une zone principale d'une largeur de 750 px et aucune barre d'outils.
Vous pouvez combiner (ou modifier, si vous êtes assez audacieux) ces modèles en fonction de vos besoins. Le listing A utilise la première mise en page pour mettre en page une page (note : l'outil CSS est installé dans le répertoire par défaut du serveur web).

Liste A