Prendre en main les CSS

Prendre en main les styles CSS c’est surtout, et avant tout, s’assurer d’avoir une bonne base HTML sur laquelle venir les appliquer. Ensuite, et avant de directement entrer tête baissée dans les couches purement visuelles, il faut être sûr de bien comprendre les mécaniques d’utilisation de bases, les règles, les sélecteurs, les déclarations…

Bref, cette première approche, de prise en main, devrait pouvoir aider à débroussailler les principes et permettre d’entrer en douceur dans le vif du sujet.

Quelques rappels sur le principe des CSS

Comme le disait Eric Meyer lors d’une de ses nombreuses conférences, les CSS ne sont pas une technique du pixel près… Cela ne veut pas dire pour autant que les CSS n’autorisent pas une précision des plus fines. Bien au contraire, et comme le souligne Andy Clarke, il peut y avoir quelques petites différences entre le rendu de deux navigateurs, surtout si ceux-ci sont en plus issus de différentes générations. Nous ne devons pas rentrer dans la course à la représentation identique, quel que soit le navigateur ou la plateforme de consultation.

A la manière des fonctionnalités basées sur Javascript, les CSS vont donc venir agrémenter l’expérience utilisateur, tout en s’appuyant sur la charte graphique. Il faudra accepter (ou être prêt à l’être), quelques différences de rendus, suivant les navigateurs. L’essentiel étant que cette implémentation soit la plus progressive et la plus discrète possible, et ne compromet nullement l’accès et le confort d’utilisation des contenus. Lisez à ce sujet l’article de Aaron Gustafson sur A List Apart, Understanding Progressive Enhancement.

Avec cette version 3 des CSS, nous voyons que grand nombre de déclarations, portent sur des ornements souvent recherchés comme les ombres portées, les dégradés, les coins arrondis, les transitions et transformations… bref toutes ces particularités qui agrémentent la quasi-totalité des sites modernes et responsive. Il va donc nous falloir redoubler de subtilité et finesse quant à leur implémentation.

Cependant, distinguons la mise en page générale de la page avec la disposition des éléments, de leur ornementation et mise en valeur. S’il est vrai que les CSS3 donnent l’impression de se trouver principalement dans la seconde partie, il en est de très importantes qui ont rapport avec la gestion de l’affichage, comme par exemple :

Les modèles de boites flottants, CSS Flexible Box Layout Module, l’affichage en grille, CSS Grid Layout, la gestion multi-colonnes, CSS Multi-column Layout Module, les régions CSS, CSS Regions Module Level 3, ou encore, les exclusions et formes, CSS Exclusions and Shapes Module Level 3.

Beaucoup de points, peut-être moins fréquemment rencontrés au cours de discussions spontanées sur les CSS3, mais qui sont attendus avec impatience et qui apporteront leurs lots de souplesse et de solutions, quant à la gestion responsive des contenus.

Styler des éléments

Chaque page peut contenir plusieurs feuilles de styles, et chacun de ces styles peut être employé de diverses manières : en ligne, dans la page, par des feuilles liées ou importées. Tous les éléments de la page peuvent être ainsi stylés en passant par ces feuilles de styles… bref, ce n’est pas la manière qui manque.

Le principe est très simple, il suffit de relier un élément à une règle par l’emploi d’un sélecteur. La règle contient toutes les informations de description nécessaires, qu’il s’agisse de couleurs, de typographie, de positionnement, de blocs, d’arrière plan, de bordures, etc… Là encore, les attributs ne manquent pas.

Les règles peuvent être aussi basiques et simples, comme ci-dessous la règle p, qui précise que tous les éléments <p> seront de couleur bleue et auront une marge gauche de 10px, ou plus complexe, comme ci-après la règle ul + ul li:nth-child(2n + 1)::first-letter qui ne cible qu’une fois sur deux les premières lettres des éléments de <li> faisant partie d’un bloc <ul> suivant déjà un autre bloc <ul> ;

p {
	color:blue;
	margin-left:10px;
}
ul + ul li:nth-child(2n + 1)::first-letter {
	background-color:rgba(153,244,109,1.00);
}

Utiliser une feuille de style

L’utilisation des feuilles de style peut se faire de différentes façons. Bien qu’il soit préférable d’employer des fichiers externes, toutes les possibilités d’emploi ont leur intérêt, ou leur utilité d’application.

Quoi qu’il en soit, les feuilles de styles s’utilisent en cascade, c’est-à-dire que plusieurs styles, provenant de différentes feuilles de styles, de différentes règles peuvent s’appliquer sur un même élément, ou hériter de celui-ci .

Dans une balise style

Depuis l’entête d’un document, il est possible d’ouvrir un encart CSS au travers de la balise <style>. Le seul inconvénient vient du fait que ce style doit être copié-collé s’il s’applique à plusieurs pages, et viendra également poser des complications pour la maintenance.

<style>
	body {
		backgournd:url(fond.png) repeat-x top left;
	}
</style>

Dans un fichier lié

Il existe deux possibilités pour ajouter un fichier CSS externe à un fichier HTML. Soit une liaison simple, soit une importation. La différence est que la seconde possibilité permettait, à une certaine époque, de filtrer certains type de navigateurs qui n’interprétaient pas, d’une part cette méthode, mais d’autre part, les déclaration CSS que la feuille de style contenait. Par ailleurs, et du fait que la seconde méthode s’emploie au sein d’une page CSS, cela permet de regrouper certaines CSS provenant de diverses pages au sein d’une seule page.

<link href="styles.css" rel="stylesheet" type="text/css" />
<style>@import url(styles.css);</style>

L’utilisation comme filtrage provient de l’interprétation de cette fonction que les vieux navigateurs ne comprennent pas :

• Masque Netscape 4, IE 3 et 4 (excepté 4.72)

  @import url(../style.css);

• Masque Netscape 4, Konqueror 2, Amaya 5.1, IE 3 et 4 (excepté 4.72)

  @import url("../style.css");

• Masque Netscape 4, IE 6 et version antérieure

  @import url(../style.css) screen;

• Masque Netscape 4, IE 4 et version antérieure, et Konqueror 2

  @import "../styles.css

Dans une balise avec l’attribut style

Principalement utilisé par JavaScript, l’ajout de l’attribut style au sein d’une balise permet d’affecter l’élément en question. Attention à ne pas ajouter des styles directement dans une page HTML de cette manière. Cela rend la maintenance complexe, et on ne sépare aucunement contenu et affichage. Cela reste donc principalement une opération dynamique d’interface depuis JavaScript.

<body style="backgournd:url(fond.png) repeat-x top left;"></body>

La feuille de réinitialisation

Maintenant que nous avons vu comment lier une feuille de style, la première chose à faire avant d’aller plus loin, va être de se garantir une uniformité de représentation, par défaut, des éléments HTML par l’ensemble des navigateurs, et user-agent. Lorsque le w3c présente des valeurs par défaut pour chaque élément, (ou la grille whatwg), rien ne garantit que les navigateurs s’appuieront sur cette charte, et bien que beaucoup d’efforts aient été fait dans ce sens, il n’est pas rare de rencontrer des divergences de prise en compte.

La solution, réside dans la remise à plat, ou à zéro, de toutes ces valeurs et de gérer de manière explicite chacune des valeurs propre à notre charte et identité visuelle. Eric Meyer en a été un des premiers instigateurs, voir CSS Tools: Reset CSS, et bien d’autres se sont joint à sa réflexion Shaun Inman, Tantek Çelik, Dan Schulz pour ne citer qu’eux… Voir l’article A Comprehensive Guide to CSS Resets ainsi que le site CSS Reset

Quelque soit la solution retenue, et afin de démarrer sur de bonnes bases, notre page web va donc, dès le départ, lier une feuille de style de réinitialisation.

<link href="reset.css" rel="stylesheet" type="text/css" />

Les media queries

Aujourd’hui, il nous est difficile de prédire le type d’appareil qui va consulter le contenu d’un site web. S’agit-il d’un écran d’ordinateur ? Celui-ci sera-t-il en rapport 4/3, 16/9, 16/10 ?… ou bien d’un note-book avec un simple 12″, peut être d’une tablette 7″, 9″ ? .. il se peut aussi bien souvent que l’internaute utilise un smartphone, mais… en mode portrait ou en mode paysage ? Sans compter qu’il puisse s’agir d’une porte de réfrigérateur, d’une plaque de contrôle de machine à laver ou d’un tableau de bord de voiture !… bref les possibilités sont multiples.

Il nous faut donc envisager la possibilité de distribuer diverses feuilles de style en fonction des contextes de consultation, afin d’améliorer considérablement l’expérience utilisateur. Les outils pour ce type de besoins sont disponibles et recommandés par le w3C : il s’agit des media queries.

En résumé, pour cet article, reprenons simplement le principe de base de liaison de diverses feuilles de styles adaptées à divers contextes différents. Et pour en savoir plus à ce sujet, voir l’article Responsive Web Design, mais encore ? :

<link type="text/css" href="mobile.css" rel="stylesheet" media="(max-width :320px)" >
<link type="text/css" href="tablette.css" rel="stylesheet" media="(min-width: 301px) and (max-width :650px)" >
<link type="text/css" href="ecran.css" rel="stylesheet" media="(min-width: 651px)" >