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 normes Web modernes, la bibliothèque YUI découvre qu'une expérience de classe A 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 des grilles d'une à quatre colonnes dans la capacité du modèle que vous utilisez. Grilles de pages : buildgridsgrids.css 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 élémentaire 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. Liste A <html><tête> La mise en page est donnée à la page entière - la balise div principale reçoit la classe yui-t2. Cela montre que le deuxième modèle est utilisé.
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 :
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.
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 courageux) 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).
<title>Exemple 1 d'outils CSS Yahoo</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</tête>
<corps>
<div id="doc" class="yui-t2">
<div id="hd">En-tête de page</div>
<identifiant div="bd">
<div id="yui-main">
<div class="yui-b">Zone principale</div>
</div><div class="yui-b">Colonne de gauche</div>
</div>
<div id="ft">Pied de page</div>
</div></body></html>
Quelques notes sur la page HTML :
La page est divisée en zones d'en-tête, de corps et de pied de page. L'en-tête reçoit l'identifiant hd, le corps est bd et le pied de page est ft.
Le corps principal de la page est divisé en la zone de gauche (si le modèle le prend en charge) et la zone principale. Les deux se voient attribuer la classe yui-b, mais la zone principale est ajoutée à l'attribut d'identification yui-main dans sa balise div.