la prise en charge des outils CSS par les navigateurs
est qu'ils sont conçus 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).
La bibliothèqueCSS YUI réutilisable
comprend trois zones ou fonctionnalités CSS impliquant 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 Web pour décrire ces trois éléments :
Grilles de pages : Permet d'intégrer une grille d'une à quatre 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 le répertoire/fichier suivant sur le serveur Web :
Page Grids : 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.
Mise en page basée sur une grille
La mise en page basée sur une grille est la force motrice derrière presque toute conception de site ou mise 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
<html><head>
<title>Exemple 1 des 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 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é.
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.