Tant de fois l'on vous demande comment structurer les fichiers CSS. Bien évidemment, la réponse est que tant qu'ils valident, il n'existe pas de bonne ou mauvaise méthode. La vérité de cette constatation apporte un démenti au fait que les fichiers CSS ont vraiment besoin d'être lisibles et compréhensibles par des hommes et non seulement des machines. Et il y a quelques trucs à connaître pour régler la cascade qui peuvent modifier la façon que vous seriez en droit d'attendre de vos styles pour fonctionner et comment les éléments s'affichet une fois rendus dans votre navigateur.
Ce que je fais
Sans vous suggérer un moyen dogmatique de régler vos feuilles de style, je veux présenter une technique qui fonctionne pour moi. Cette technique est étroitement liée à la manière dont vous codez les documents HTML qui sont couplés avec les feuilles de style.
Je l'appelle "Style Environnemental". Pas parce que c'est quelque chose de plus "vert" que d'autres techniques, mais parce que c'est fondé sur des éléments de style à l'intérieur d'un environnement donné sur une page.
Broyez-le
Dès que je commence à concevoir ma page je pense
à comment chaque partie fonctionne ensemble pour
constituer un plus grand ensemble, mais aussi comment les
éléments à l'intérieur de
chaque section (de chaque environnement) fonctionnera. Par
exemple, une page basique contient habituellement un Chapeau
(Header), un peu de Navigation, le Contenu Principal (Main
Content), et un Pied de Page (Footer).
Le Chapeau ("Header") pourrait broyer plus tard un en-tête ou titre, quelque sorte d'attribution (??? some sort of attribution) (comme une têtière ndt : masthead), et quelque "arborescence hiérarchique".
La Navigation est typiquement et le plus basiquement une liste de liens.
Le Contenu Principal ("Main Content") est ce qui est attendu là par le visiteur et comprend la plus grande partie de la page.
Le Pied de Page ("footer") peut contenir de l'information sur la personne à contacter, les dernières dates de modification, une information sur le droit de copie, des avertissements et autres mentions légales. Il est souvent encapsulé dans le site tout entier.
Jusqu'ici j'ai défini 4 ou 5 sections principales d'une page. Chacune de ces sections pourrait aussi contenir des sous-sections qui auraient besoin d'être définies.
Une fois compris mes besoins de sections et sous-sections, je les définis comme des DIV avec des ID spécifiques. Par exemple :
#header #navigation #content #footer
Sélecteurs Descendants
Maintenant, vous pouvez vouloir des liens qui se comportent d'une certaine façon dans l'environnement du Contenu Principal, et d'une manière différente dans l'environnement de Navigation. Cela peut être réalisé en utilisant quelque chose appelé un Sélecteur Descendant. Ce qui veut dire que nous définissons des règles pour des éléments apparaissant à l'intérieur d'un de ces environnements. Voilà un exemple utilisant des liens :
#navigation a:link, #navigation a:visited {
color: red;
text-decoration: none;
font-weight: bold;
}
#navigation a:hover {
color: blue;
text-decoration: underline;
}
#navigation a:active {
background-color: #ccc;
}
L'espace entre le #navigation et le lien des pseudoclasses est le sélecteur descendant. Cela signifie que n'importe quelle ancre (A) qui est descendante de l'élément de #navigation doit se comporter selon les règles ci-dessus (gras, non souligné excepté pour le liens, et un petit rayon léger en fond quand il est cliqué).
Seuls les liens à l'intérieur de #navigation adopteront ces comportements. Les liens dans d'autres DIVs s'afficheront par défaut, ou tout autre commande qui aura pu lui être assignée.
Chaud et froid
Les sélecteurs descendants peuvent être emboîtés à plus deux crans de profondeur. Ceci permet de régler quelques échantillons de comportements très spécifiques.
#navigation .hot li a:link {color: red;}
#navigation .cool li a:link {color: blue;}
Bénéfices
Dans votre HTML, vous pourriez avoir une liste de liens "chauds" d'importance en cours. Quand ces liens deviennent moins pertinents, ils pourraient déménager vers une section "froide" de l'environnement de #navigation. Couper et coller simplemnt le lien à partir du container .hot vers le container .cool fait passer le lien du rouge au bleu.
Si nous avions assigné des classes à ces liens, nous n'aurions pas du seulement déplacer ces liens dans le HTML, mais aussi rappelez-vous de changer leurs noms de classes. Une fois réglés, ces styles d'environnement rendent les choses beaucoup plus faciles à maintenir.
Un autre exemple pourrait consister à avoir un lien dans la #content DIV que vous voulez aussi inclure dans la #navigation. Une fois de plus, un simple copier-coller fera se comporter le lien de la manière dont il se doit dans les deux environnements, mais sans modifier quoi que ce soit dans le code HTML.
Plus que des liens
Cela fonctionne pour d'autres choses que des simples liens. Mettons que vous ayez des listes dans #navigation et des listes dans #content. Dans #navigation vous pourriez désirer limiter leurs longueurs et leurs marges, en les forçant vers le bord gauche de la DIV. Dans l'environnement #content vous voulez que la liste se comporte normalement.
En utilisant la même technique vous pouvez forcer les listes à se comporter différemment selon l'environnement dans lesquelles elles sont basées, sans vous soucier de cela dans le code. Et vous vous épargnez de créer des tonnes de cas de classes exceptionnelles (ndt : special case classes) qui sont appliquées à des éléments isolés dans le HTML. Il y a des cas où cela peut être approprié, mais prendre l'habitude d'utiliser la technique du style environnemental vous fait gagner du temps et des pertes de cheveux à essayer de vous souvenir quelle et où est la CSS créée pour le petit effet que votre client trouve désormais ennuyeux (ou veut faire tourner plus largement).
Puissant et Pratique
Cette technique est beaucoup plus puissante que les exemples simples mentionnés ici. Et à la différence de la plupart des autres sélecteurs (child: > et adjacent sibling: + me viennent immédiatement à l'esprit), les sélecteurs descendants fonctionnent dans toutes les versions 4 et plus des navigateurs de Netscape à Internet Explorer.
Mark
NewHouse • RealWorldStyle
Lien original de référenceTraduction en cours
- Christophe Ducamp - Août 2002 - Valide ?