Les sprites, c’est quoi ?

L’utilisation des sprites pour le web est une technique permettant d’afficher plusieurs vues d’une seule et même image à l’aide des feuilles de style CSS.

Cette technique est issue des anciens jeux vidéos qui utilisaient des petits personnages pixelisés appelés « sprites » qui étaient tous dessinés sur une seule image pour des raisons de performances.

Il s’agit donc d’utiliser une image sur laquelle est réunie soit plusieurs instances de l’état d’un objet, par exemple un menu, un bouton soit un ensemble d’autres images comme des icônes par exemple.

La technique des sprites permet, grâce aux CSS, de ne montrer qu’une partie (une vue) de l’image globale. Selon le cas, en modifiant les paramètres de positionnement dans la feuille de style CSS, il est possible de déplacer la vue sur l’image globale sans montrer le reste de l’image. Nous utiliserons donc une seule image pour simuler l’affichage de plusieurs images (en réalité différentes vues de l’image globale) sur les pages web d’un site internet.

Quels intérêts d’utiliser les sprites ?

Si vous travaillez dans le secteur internet, vous savez que lors du chargement d’une page web, il y a autant de requêtes http effectuées sur le serveur qu’il y a d’images dans la page. En utilisant qu’une seule image globale, vous réduisez à une requête http le chargement des images (puisqu’en réalité on ne charge qu’une image).

De plus, l’image globale est bien souvent moins lourde que la somme des poids des images individuelles. Cela permet de gagner en performance sur la vitesse d’affichage de la page et en consommation de bande passante dans certains cas.

Donc tout l’intérêt des sprites est de gagner en performance de chargement des pages. Du point de vue du graphiste, il y a un autre avantage : avoir moins de découpes à faire pour l’étape d’intégration.

Comment mettre en place les sprites ?

Comme un exemple, vaut mieux qu’un long discours, nous allons réaliser un bouton image avec effet rollover utilisant la technique des sprites.

Notre bouton aura trois états : un état « initial » lorsque le bouton n’est pas activé ou survolé, un état « survolé » lorsque l’utilisateur passe sa souris sur le bouton et un état « enfoncé » lorsque l’utilisateur clique sur le bouton.

La première chose à faire est de dessiner dans un logiciel de traitement d’images les trois états du bouton puis de les réunir sur une seule image.

Ensuite, il va falloir implémenter le code XHTML/CSS.

Voici le code XHTML qui affiche le bouton :

<a id="container" href="#" title="Exemple de bouton sprite"></a>

Remarque : Le code utilisé dans cet exemple est simple pour vous transmettre la technique mais c’est un très mauvais exemple à suivre sur le plan sémantique et accessibilité. Voir la conclusion.

Il ne nous reste plus qu’à définir le fichier CSS qui va nous permettre notamment grâce à la propriété « background » de positionner notre vue sur l’état du bouton qui convient en fonction de l’action de l’utilisateur.

Le calcul du positionnement de la vue est la partie la plus fastidieuse. Vous pouvez déterminer « à la main » les coordonnées du positionnement en mesurant la position des états du bouton sur l’image globale. Mais si vous ne voulez pas vous embêter à faire ces mesures, vous pouvez utiliser un générateur de sprites pour faire le travail à votre place.

Il y a quelques bogues avec les navigateurs Opéra et Safari à prendre en compte lors de la création de Sprites CSS :

Opéra, pour les versions inférieur ou égale à 9.0, ne reconnait pas une position de fond supérieure à 2042px ou inférieure à -2042px et utilise ces limites à la place en cas de dépassement. Ceci dit 2024px, ça vous laisse pas mal de marge.

Safari a un problème avec la répétition des images de fond. Cela peut être résolu en spécifiant une valeur d’espacement vertical plus large.

Je vous conseille d’utiliser par exemple le générateur de sprites en ligne de « Project Fondue ». Ce générateur prend en compte les bugs des navigateurs Opéra et Safari. Utilisez le comme suit :

1. Réunissez toutes vos images dans un fichier .zip, le nom donné aux images sera repris dans la feuille CSS générée.

2. Uploadez votre fichier .zip via le formulaire du générateur de sprites.

3. Définissez vos paramètres. Dans mon exemple, j’ai gardé le paramétrage par défaut proposé sur la page du générateur. Pour plus de détails sur le paramétrage, lisez l’aide en ligne.

4. Validez le formulaire.

Le générateur de sprites construit alors une image globale :

… et le code CSS correspondant :

.sprite-enfonce { background-position: 0 -30px; }
.sprite-initial { background-position: 0 -108px; }
.sprite-survole { background-position: 0 -186px; } 

#container li {
   background: url(monImageGlobale.png) no-repeat top left;
}

Le code implémenté pour mon bouton donnera :

<!-- Code CSS -->
a#container {
   background:url(MonImageSprite.png) no-repeat 0px -108px;  /* initial */
   width: 180px;
   height: 40px;
   display: block;
}
a#container:hover { background-position: 0 -186px; } /* survolé */
a#container:active { background-position: 0 -30px; }  /* enfoncé */

<!-- Code XHTML -->
<a id="container" href="#" title="Exemple de bouton sprite"></a>

Résultat :

Conclusion

Comme nous l’avons vue dans cet article, l’utilisation des sprites permet de gagner en performance au niveau de la vitesse d’affichage des pages web en réduisant le nombre de requêtes http effectuées sur le serveur. Quelques secondes de gagnées sur le chargement de vos pages peut vous rapporter gros car c’est du temps d’attente en moins pour les internautes et donc moins de perte potentielle d’audience.

Pour les graphistes, travailler avec un intégrateur qui utilise les sprites permet de regrouper plusieurs images dans un seul fichier png et d’éviter de fastidieuses découpes.

Cependant, l’utilisation des sprites peut causer quelques inconvénients si ils sont utilisés de manière inappropriée.

Par exemple, laissez suffisamment d’espace entre vos motifs sur l’image globale pour permettre aux utilisateurs de grossir le texte des pages web sans risquer de démasquer les autres motifs. Trouvez un bon compromis entre l’espacement des motifs et la taille de l’image globale car plus votre image globale sera grande, plus il faudra de mémoire à l’agent utilisateur pour la décompresser.

Les sprites peuvent également causer des problèmes de sémantique et d’accessibilité. Mon exemple de bouton est un mauvais exemple sur le plan sémantique car j’utilise une balise html « A » pour afficher un bouton au lieu d’une balise « INPUT » ou « BUTTON ». De plus ma balise « A » ne comporte pas d’intitulé texte. J’ai donc détourné la balise « A » à des fins esthétiques au détriment de la sémantique et de l’accessibilité. Bien que graphiste, je pense qu’il ne faut jamais céder à ce type de compromis.

Il est donc fortement conseillé d’utiliser les sprites pour les images de décorations uniquement (fond d’illustration, icônes …) et pas sur des images de contenu ou des images qui aident à la compréhension du contenu. En effet, si pour une raison ou pour une autre, les CSS sont désactivées, ou si une personne handicapée utilise un navigateur texte, vous perdez l’affichage de vos images. Si il s’agit uniquement d’images de décorations, leur disparition est génante sur le plan graphique mais la page conserve une accessibilité aux informations.

Pour conclure, utilisez les images sprites pour gagner en performance mais ne les utilisez pas dans un contexte où elles réduisent la sémantique et l’accessibilité.

Sources :

• - Sprites CSS : Meurs, découpe d’images, meurs ! – Traduction française, sur le site Pompage.net d’un article de Dave Shea parue sur A List Apart.
• - Des sprites jusqu’à plus soif – Eric Daspet
• - CSS Sprites: What They Are, Why They’re Cool, and How To Use Them – Chris Coyer
• - Exactly How to Use CSS Sprites – Nettuts

Générateurs de sprites :

• - Application Java ou PHP à télécharger : SmartSprites
• - Générateur de sprites en ligne : Project Fondue
• - Générateur de sprites en ligne : CSSSprites

Le positionnement, quelques rappels

Le positionnement est une notion assez simple qui permet d’indiquer précisément où des boîtes d’éléments apparaitront par rapport à leur bloc conteneur qui peut être l’élément racine (élément html), un élément parent ou un autre élément.

Le bloc conteneur

Dans le cas d’un élément flottant le bloc conteneur est l’élément parent de type bloc le plus proche. Avec le positionnement la notion de conteneur est un peu plus complexe.

• - Le bloc conteneur racine est dans la plupart des navigateurs matérialisé par un rectangle de la taille de la zone d’affichage. En HTML, l’élément racine est l’élément html.

• - Pour les éléments non-racine positionnés de façon relative ou static, le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.

• - Pour les éléments non-racine positionnés de façon absolu, le bloc conteneur est matérialisé par le parent le plus proche (de toute sorte) dont la propriété position a une valeur autre que static de la façon suivante :

• • * Si le parent est de type bloc, le bloc conteneur est matérialisé par le bord de l’espacement de cet élément, il s’agit donc de la zone délimitée par une bordure.

  • * Si le parent est de type en-ligne, le bloc conteneur est matérialisé par le bord du contenu du parent.

  • * Si il n’y a pas de parent, le bloc conteneur de l’élément est le bloc conteneur racine.

Il est a noter que les éléments peuvent être positionnés hors de leur bloc conteneur en utilisant des valeurs négatives.

Propriétés de décalage

Le positionnement utilise la propriété position qui peut prendre les valeurs : static (valeur par défaut), relative, absolute, fixed et inherit. Les positionnements de type relative, absolute et fixed utilisent les propriétés top, right, bottom et left pour décrire le décalage des côtés d’un élément positionné par rapport à son bloc conteneur.

Ces propriétés décrivent le décalage à partir du bord le plus proche du bloc conteneur. Par exemple, top indique à quelle distance le bord de la marge haute de l’élément positionné doit être placé depuis le bord supérieur de son bloc conteneur.

Les valeurs assignées à ces propriétés peuvent être positives ou négatives.

Notez que les valeurs positives provoquent un décalage vers l’intérieur, déplaçant les bords vers le centre du bloc conteneur, et que les valeurs négatives provoquent un décalage vers l’extérieur.

Il faut également comprendre que ces propriétés définissent le décalage depuis le côté analogue du bloc conteneur et non depuis son coin supérieur gauche.

Par exemple, left définit un décalage par rapport au côté gauche.

Sur le schéma ci-joint, le bord externe gauche de l’élément positionné est placé à 90 px du bord gauche du bloc conteneur.

Largeur et hauteur

Les propriétés width et height permettent de fixer respectivement la largeur et la hauteur d’un élément positionné. Si il est important parfois de fixer ces propriétés, on s’aperçoit que ce n’est pas toujours nécessaire. En effet le placement des quatre côtés d’un élément à l’aide de top, right, bottom, left peuvent fixer implicitement largeur et hauteur par les décalages qu’ils induisent.

Si par nécessité il faut limiter la largeur et la hauteur d’un élément, CSS2 met à disposition les propriétés min-width et min-height qui donne une dimension minimum à la zone de contenu d’un élément, et les propriétés max-width et max-height qui, vous l’aurez deviné, donne une dimension maximum à la zone de contenu d’un élément.

Débordement

Si le contenu d’un élément est trop important pour la taille de ce dernier, il risque de déborder de l’élément lui-même. Cette situation peut être contrôlé à l’aide de la propriété overflow dont les valeurs possibles sont visible (par defaut), hidden, scroll, auto, inherit.

• - La valeur visible signifie que le contenu de l’élément reste visible hors de la boîte d’élément.

• - La valeur scroll signifie que le contenu est rogné sur les côtés de la boîte d’élément mais on laisse à l’utilisateur la possibilité de lire le contenu supplémentaire à l’aide de scroll par exemple.

• - La valeur hidden signifie que le contenu est rogné sur les côtés de la boîte d’élément mais le contenu supplémentaire est caché à l’utilisateur.

• - La valeur auto signifie que c’est au navigateur de déterminer le comportement à employer.

Visibilité

La propriété visibility contrôle la visibilité d’un élément. Les valeurs possibles sont visible (par defaut), hidden, collapse, inherit.

• - La valeur visible signifie que l’élément est visible.

• - La valeur hidden signifie que le contenu est rendu invisible mais l’élément affecte toujours la mise en page du document comme si il était visible. Notez la différence avec display:none où l’élément disparaît complètement y compris du document si bien qu’il n’a plus aucun effet sur la mise en page.

• - La valeur collapse est employé dans l’affichage des tables CSS.

Placement sur l’axe z

Lorsque plusieurs éléments positionnés se chevauchent ou veulent coexister au même endroit, il se peut qu’un élément soit caché par un autre de superficie supérieure.

L’ordre d’empilement naturel des éléments est déterminé par la position de l’élément dans le flux. Le dernier élément affiché dans le flux se trouvera au dessus des autres.

Cet ordre peut être contrôlé par la propriété z-index, en effet, un élément dont la valeur numérique de z-index est élevée se trouve en avant par rapport à un élément dont la valeur de z-index est faible. L’élément dont la valeur est la plus élevée se trouve donc au dessus des autres éléments.

Positionnement absolu

Un élément positionné de manière absolue est retiré du flux puis positionné par rapport à son bloc conteneur. L’élément positionné de façon absolue peut chevaucher d’autres éléments ou être chevauché.

Le bloc conteneur d’un élément positionné de manière absolue est l’élément parent le plus proche dont la valeur de position est différente de static. Il est courant de choisir un élément qui servira de bloc conteneur à un élément positionné de manière absolue en lui assignant une position relative sans préciser de décalage. Si il n’y a pas de parent dont la valeur de position est différente de static, le bloc conteneur de l’élément positionné de manière absolue est le bloc conteneur racine.

Exemple :

<html>
<head>
<style type="text/css">

.main {
    margin:100px 0 0 100px;
    border:1px solid #d0d0d0;
    width:30%;
}

.conteneur {
    position:relative;
    background:#ff5555;
}

b {
    position:absolute;
    background:#fff888;
    top:50px;
    left:50px;
}

</style>
</head>

<body>

<div class="main">
<p>
Ce paragraphe ne joue pas le rôle de conteneur à l'élément
<br />
<b>en gras</b> positionné de manière absolue.
</p>

<p class="conteneur">
Ce bloc établit un conteneur pour l'élément
<br />
<b>en gras très gras</b> positionné de manière absolue.
</p>
</div>

</body>
</html>

Si vous souhaitez contrôler le bloc conteneur initial plutôt que de laisser le navigateur s’en charger, il suffit d’assigner par exemple au body
de votre document une position relative :

body {position:relative;}

Il est important de comprendre aussi que lorsqu’un élément est positionné de manière absolue, il définit un bloc conteneur pour ses éléments enfants.

Positionnement relatif

Dans le cas d’un positionnement relatif, l’élément reste dans le flux. Le décalage s’opère de la même manière que pour le positionnement absolu mais l’élément laisse un espace blanc à l’endroit où il aurait dû se trouver dans le flux normal de la page. Un élément positionné de manière relative établit un nouveau bloc conteneur pour ses enfants à l’endroit où l’élément a été positionné.

Je rappel que pour les éléments non-racine positionnés de façons relative, le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.

Reprenons notre exemple mais en positionnant l’élément <b> de manière relative.

<html>
<head>
<style type="text/css">

.main {
    margin:100px 0 0 100px;
    border:1px solid #d0d0d0;
    width:30%;
    z-index:0;
}

.conteneur {
    position:relative;
    background:#ff5555;
    z-index:1;
}

b {
    position:relative;
    background:#fff888;
    top:50px;
    left:50px;
    z-index:2;
}

</style>
</head>

<body>

<div class="main">
<p>
Ce paragraphe joue le rôle de conteneur à l'élément
<br />
<b>en gras</b> positionné de manière relative.
</p>

<p class="conteneur">
Ce bloc établit un conteneur pour l'élément
<br />
<b>en gras très gras</b> positionné de manière relative.
</p>
</div>

</body>
</html>

On observe sur la copie d’écran les espaces vides laissés par les éléments <b> positionnés de manière relative. Nous avons rajouté des z-index pour que tous les blocs soient visibles et que les plus grand ne masquent pas les plus petits.

Ici les deux bloc parents <p> jouent un rôle de conteneur pour l’élément <b>.

Conclusion

La mise en page par flottement est plus populaire auprès des designer et intégrateurs web que la mise en page par positionnement. Cela est probablement dû au fait que la mise en page par flottement est plus simple à appréhender que celle par positionnement.

Cependant, l’utilisation des blocs flottant pose parfois problème, ce système étant très sensible aux dépassements de longueur, et de largeur. L’utilisation du positionnement absolu et relatif peut être une solution alternative beaucoup plus robuste si elle est utilisée avec habilité. Je pense que cette technique vaut la peine qu’on y accorde quelques gouttes de sueurs.

Une dernière remarque : pour que le positionnement ne pose pas de problème lors d’un changement de résolution de l’écran, il est conseillé de d’attribuer des valeurs en % ou en em aux propriétés width et height.

Mes sources

Ouvrage :

L’essentiel de cet article a été rédigé à partir du livre « CSS, La référence » écrit par Eric A. Meyer, traduit par Hervé Soulard aux éditions O’Reilly.

Je ne parlerai pas ici du thème Sandbox mais bien des microformats. Avant d’entamer le sujet, j’aimerai définir le mot « sémantique ».

La sémantique

La définition du mot « sémantique » est complexe. Ce mot est abondamment utilisé chez les linguistes. En informatique, on l’utilise généralement pour exprimer le fait de « donner du sens ».

Prenons un exemple : ma grand mère. Si elle me donne une mixture dans un récipient sans aucune autre précision, je reste sceptique sur la nature de la chose. Par contre, si elle colle une étiquette et y indique « Confiture de fraise – avril 2007 – jardin de Normandie » je sais immédiatement qu’il s’agit d’une mixture sucrée à base de fraise, encore comestible car datant de cette année et que c’est sans conservateur car provenant directement de son jardin Normand. En quelque sorte, ma grand mère, grâce aux indications portées sur son étiquette, à donné du sens à cette mixture rougeâtre. Ma grand mère fait de la sémantique sans le savoir !

Prenons maintenant l’exemple du HTML. La balise <H1> est plus sémantique que la balise <DIV>. En effet, la balise <H1> m’indique, si elle est bien utilisée, que son contenu est un titre et que ce titre est de niveau 1 alors que la balise <DIV> ne m’indique pas grand chose sur la nature de son contenu. Je sais seulement que ce contenu se comportera dans ma feuille de style comme un élément bloc.

C’est quoi les microformats ?

Pour aller droit au but, je dirai que les microformats sont des étiquettes que l’on rajoute au HTML pour le rendre plus sémantique que ce qu’il est actuellement par le biais uniquement de ses balises. Comment ? En utilisant des éléments et attributs déjà existant dans le HTML. Il s’agit de l’élément « meta », des attributs « rel » et « rev » et de l’attribut « class »

<meta name="description" content="Site sur les microformats"/>
<link href="/css/feuille.css" rel="stylesheet"/>
<span class="name">Durand</span>

Son implémentation est donc très simple et se base sur les possibilités préexistantes du HTML 4.0. En effet, les initiateurs des microformats ont souhaité mettre en place plus de sémantique dans le HTML sans avoir à réinventer la roue et sans avoir à attendre l’élaboration d’une interminable spécification.

Les microformats ont été mis en place par des passionnés qui avaient besoin de structurer d’avantage les données publiés sur le web. Ils ont donné naissance à une communauté ouverte qui met en place le processus de standardisation. Tout le monde peut participer à faire évoluer les microformats, ils ne sont la propriété de personne et leur évolution ne dépend ni d’un organisme ni d’intérêts privées.

Vous pouvez retrouver cette communauté sur le site officiel. Il existe également une communauté francophone.

Ca sert à quoi les microformats ?

Comme indiqué dans le chapitre précédent, les microformats permettent de structurer d’avantage les données des pages web en rajoutant de la sémantique dans le code HTML. C’est en quelque sorte une façons de tagger les données d’un contenu web.

Oui mais dans quel but ?

Dans le but de pouvoir partager de l’information en facilitant son extraction du code HTML.

Prenons un exemple :

Si dans une page web je trouve le code

<span>20070112</span>

s’agit il d’une référence produit, d’un numéro de téléphone, du nombre total d’un produit en stock ?

Si je rajoute une information à l’aide de l’attribut class

<span class= "date">20070112</span>

je peux en déduire par la valeur de l’attribut class qu’il s’agit en fait d’une date.

Pour aller plus loin je peux aussi écrire

<span class= "date  naissance" >20070112</span>

pour indiquer qu’il s’agit d’une date de naissance.

Ce qui fait la force des microformats c’est qu’ils sont facilement lisibles et compréhensibles pour l’être humain mais aussi lisibles par les applications informatiques comme les navigateurs, des moteurs de recherche, des clients mail, des logiciels d’agenda etc. Ainsi les données peuvent aisément être partagées ou traitées et stockées dans des bases de données distantes.

Par exemple, l’extension Firefox Opérator permet à l’utilisateur de détecter dans une page web la présence de microformats, de les extraire et de les exporter dans un format compatible avec des gestionnaires de contacts ou des calendriers.

Imaginez, vous êtes à la recherche de clients potentiels. Vous vous rendez sur le site d’un prospect. Opérator détecte sur la page contact un microformat qui vous permet d’extraire les coordonnées de votre prospect. Il vous suffit alors de l’extraire et de l’importer dans votre application bureautique qui gère une liste de clients potentiels que vous contacterez ultérieurement pour proposer vos services.

Pour en savoir plus sur l’utilité des microformats vous pouvez aussi lire la page wiki intitulée « Que pouvez-vous faire avec les microformats ? »

Standardisation des microformats

Pour que tout le monde parle le même langage et utilise les mêmes conventions, les microformats sont d’abord discutés puis validés avant d’être utilisés. C’est le rôle de la communauté dont nous avons déjà parlé. Les microformats ne sont pas figés mais en constante évolution selon les besoins des utilisateurs. Il existe aujourd’hui plusieurs familles de microformats en fonction du type de donnée à traiter. Vous pouvez vous même proposer un microformat à l’étude de la communauté pour un type d’information non abordé par les familles de microformats actuelles.

Voici pour exemple quelques une des familles de microformats parmi les plus connus :

hCard – pour les informations de contact
hCalendar – pour les événements
rel-nofollow – pour combattre les spams
XFN – pour les relations sociales

Conclusion

Il s’agissait ici de présenter succinctement et simplement les microformats. Je vous laisse le soin d’approfondir l’aspect technique de leur implémentation. Vous trouverez quelques références à la fin de cet article pour approfondir le sujet. Un prochain article plus technique fera peut être son apparition sur ce blog.

Les microformats progressent sur le web mais sont encore en construction. De grandes entreprises comme Yahoo ou Flickr les utilisent déjà. De nombreuses familles de microformats sont en gestation et d’autres feront leur apparition dans un futur proche. Le grand intérêt de cette technologie est qu’elle permet facilement d’extraire des données web pour être converties en n’importe quel autre format ou type de fichier exploitables par de nombreuses applications.

Alors qu’avec le XML chacun définie le vocabulaire sémantique qui va structurer son document, les microformats reposent sur une standardisation des propriétés et l’accord sur une terminologie commune permettant l’interopérabilité et le transfert des informations.

Mes sources et quelques liens en plus

Site officiel :
- microformats.org

Sites web francophones :
- http://www.elanceur.org/microformats/
- http://microformateurs.org
- Microformats wiki

Ouvrages :
- Utiliser les microformats – Edition O’Reilly – Focus – Brian Suda
- Microformats: Empowering Your Markup for Web 2.0 – John Allsopp

Valeurs par défaut des balises HTML

Le W3C a préconisé une feuille de style pour attribuer des valeurs par défaut aux éléments HTML. Malheureusement pour les webdesigner, l’ensemble des navigateurs ne respectent pas à la lettre cette feuille de style et ont leur propre CSS de valeurs par défaut.
Vous trouverez sur le sujet d’excellents articles sur le site Alsacréations : Le rendu par défaut des éléments HTML et sur le site OpenWeb : Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design.
Pour observer les différences de valeurs par défaut des éléments HTML appliquées dans les navigateurs, Julien Royer d’Alsacréations, a développé un outil intéressant que vous trouverez disponible à cette adresse.

Méthode du « Reset CSS »

Certains webdesigners, pour contourner ces différences de valeurs par défaut entre navigateurs, choisissent de réinitialiser eux mêmes les éléments HTML à zéro. Cela peut être obtenu de façons très simple avec les lignes de code suivantes :

* {
    margin:0;
    padding:0;
    border:0:
    }

Le sélecteur « * » étant le sélecteur désignant tous les éléments HTML.

A charge ensuite au webdesigner de redéfinir les éléments selon ses besoins.

Cependant, cette façons de réinitialiser les éléments HTML est un peu brutale car elle détruit totalement le rendu de certains éléments comme par exemple ceux des formulaires. Il est plus judicieux de choisir les balises que l’on souhaite initialiser et de leur donner des valeurs prédéfinies. Cette méthode est appelée par les anglo-saxons le méthode du « Reset CSS »

Pour mieux comprendre de quoi il s’agit, voici quelques exemples de CSS mettant en application la méthode du « Reset CSS » :

Feuille « Reset CSS » proposée sur le site Crucial Web Hosting.

/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 arial, helvetica, sans-serif;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font:2em arial, helvetica, sans-serif;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font:1.5em arial, helvetica, sans-serif;
}

h3 {
font:1em arial, helvetica, sans-serif;
font-weight:bold;
}

p, ul, ol {
margin:0;
padding:0 0 18px 0;
}

ul, ol {
list-style:none;
padding:0 0 18px 40px;
}

blockquote {
margin:22px 40px;
padding:0;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a, a:visited {
text-decoration:none;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em arial, helvetica, sans-serif;
}

textarea {
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 18px 0;
padding:0;
}

        table tr td {
        padding:2px;
        }

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear                  { clear:both; }

.float-left     { float:left; }
.float-right    { float:right; }

.text-left              { text-align:left; }
.text-right     { text-align:right; }
.text-center    { text-align:center; }
.text-justify   { text-align:justify; }

.bold                   { font-weight:bold; }
.italic                 { font-style:italic; }
.underline              { border-bottom:1px solid; }
.highlight              { background:#ffc; }

.wrap                   { width:960px;margin:0 auto; }

.img-left               { float:left;margin:4px 10px 4px 0; }
.img-right              { float:right;margin:4px 0 4px 10px; }

.nopadding              { padding:0; }
.noindent               { margin-left:0;padding-left:0; }
.nobullet               { list-style:none;list-style-image:none; }both

Feuille « Reset CSS » proposée par Eric Meyer.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

Feuille « Reset CSS » proposée par Christian Montoya.

/* =INITIAL
   v2.1, by Faruk Ates - www.kurafire.net
   Addendum by Robert Nyman - www.robertnyman.com
   Addition by Christian Montoya - www.christianmontoya.net */

/* Neutralize styling:
   Elements we want to clean out entirely: */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling:
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea {
        font-size: 100%;
                font-family: inherit;
}

Pour ou contre la méthode « Reset CSS »

La méthode du « Reset CSS » est utilisée par de nombreux webdesigner dont je fais partie, cependant, elle ne fait pas l’unanimité. C’est le cas notamment du collectif Alsacréations qui à ce propos dit dans son article Le rendu par défaut des éléménts HTML :

« Cette méthode impose de repréciser, dans la feuille de style, des marges et padding pour tous les éléments qui le nécessitent, sous peine d’obtenir un document peu lisible. Une opération qui non seulement prend du temps, mais en plus n’est pas fiable : on risque d’oublier de redonner des marges à certains éléments, et de se retrouver avec un rendu problématique sur telle ou telle page du site.
Mais surtout, cette technique est largement inutile ! Car, le plus souvent, les différences de rendu et le caractère « imprévisible » des marges par défaut ne sont pas liés aux styles par défaut, mais plutôt :
à des bugs des navigateurs ;
à une incompréhension, du côté du concepteur web, de certains mécanismes de base comme la fusion des marges entre un élément et son bloc parent.
… »

Le collectif Alsacréations préconise donc d’identifier les différences d’affichage des navigateurs qui sont peux nombreuses et de d’en tenir compte dans le développement. Pour cela Julien Royer a développé un outil qui permet d’observer les différences de rendu par défaut des navigateurs.

Pour ma part j’utilise la méthode du « Reset CSS ». Je redéfinie les éléments XHTML en reprenant la feuille CSS de rendu initial préconisé par le W3C pour les développeurs de navigateurs.

Je mets en commentaires certaines lignes de cette feuille de style et redéfinie les éléments qui m’intéressent.

Je ne prendrais pas position sur le bien fondé de l’une où l’autre des ces méthodes, à vous de voir la solution qui semble la plus adapté à votre façons de travailler.
Par contre je n’hésite pas à dénoncer des navigateurs comme Internet Explorer qui respectent peu les préconisations du W3C et pourrissent la vie des webdesigner.

Utiliser plusieurs fichiers CSS

Plutôt que de réunir tous vos styles dans un seul méga-fichier, utiliser plusieurs feuilles de style. Attention, ne pas abuser du nombre car chaque feuille crée sera autant d’appels au serveur. Je pense que 4 où 5 feuilles sont un maximum.

Pour ma part, j’en utilise 4 :

- une feuille principale (style.css)
- une feuille pour réinitiliser les balises (reset.css)
- une feuille pour ie6 (ie6.css)
- une feuille pour ie7 (ie7.css)

Les feuilles CSS pour Internet Explorer sont appelées à l’aide d’instructions conditionnelles qui sont considérées comme des commentaires par les autres navigateurs.

<!--[if IE 6] >
< link rel="stylesheet" href="http://www.pixenjoy.com/xx/css/ie6.css"
type="text/css" media="screen" / >
< ![endif]-->

<!--[if IE 7] >
< link rel="stylesheet" href="http://www.pixenjoy.com/xx/css/ie7.css"
type="text/css" media="screen" / >
< ![endif]-->

Abuser des commentaires

Ne pas hésiter à utiliser les commentaires pour organiser la mise en page de votre feuille de style. Pour ma part j’utilise les commentaires pour décrire :

- une table des matières
- noter des informations utiles
- mettre à disposition un pense bête des principales couleurs
- diviser mon document en plusieurs grandes partie (HTML, Head, Main, Foot …)

Voici ce que cela peut donner :

/* --------------------------------------------*/
/* ---------- TABLE DES MATIERES -----------*/
/* ------------------------------------------*/
/*
	- Informations
	- Pense bête couleurs
	- Balises <HTML>
	- #Main
	- #Head
		- Styles pour la partie blog
		- Styles pour la partie CMS
	 - #Wrap
	     - #Wrap_LeftBloc
			- Styles pour la partie blog
			- Styles pour la partie CMS
	- #RightBloc
		- Styles pour la partie blog
		- Styles pour la partie CMS
	- #Foot
	- .class globales
	- Debug

*/

/* ---------- Informations -----------*/
/*
	> Les propriétés sont rangées dans
         l'ordre alphabéthique
	> Les propriétés des balises HTML sont
         ré-initialisés dans la feuille CSS ../css/reset.css
	> Des feuilles de styles séparées ont
        été mises en place pour ie6 et ie7
        ../css/ie6.css et ../css/ie7.css
*/
/* ---------- Pense bête couleurs -----------*/
/*
	Marron foncé (menu principal) : 	#312e2b
	Blanc cassé (fond bas de page) :	#f9f4ef
	Vert Olive (titres blog + Art. prec.)	#6aaf4d
	Vert désaturé (titre blog hover)	#82a474
	Gris (texte)				#686665
	Gris claire (texte footer)		#afacaa
*/

/* ---------- Balises <HTML> (début) -----------*/
/* ---------- Balises <HTML> (fin) -----------*/ 

/* ---------- Balises Head (début) -----------*/
/* ---------- Balises Head (fin) -----------*/

Fixer des conventions d’écriture

Se fixer des conventions d’écriture permets de s’y retrouver plus facilement dans sa feuille de style pour les futurs relectures. Au début cela demande un peu de discipline mais avec l’habitude l’écriture devient instinctive.

J’utilise les conventions d’écriture suivantes :

- Rangement des propriétés dans l’ordre alphabéthique

pre.code {
		background-color:#fafafa;
		border:1px dotted #d0d0d0;
		clear:both;
		margin:2px 0 0 20px;
		overflow:auto;
		padding:10px;
		}

- Les ID commencent par une majuscule, les class par une minuscule

#Wrap {}
.foot_adresse {}

- Répéter dans le nom des class, le nom des ancêtres

#Wrap_leftBlock {}
.wrap_leftBlock_texte {}

- Ecrire ses règles toujours de la même façons

.wrap_leftBlock_texte {1 seule propriété ...}

.wrap_leftBlock_texte {
     plusieurs propriétes ...
     }

Conclusion

Vous forcer à suivre des règles d’écriture pour vos feuilles CSS peut paraître ennuyeux au début. Mais avec la pratique, vous le ferez instinctivement. Mais surtout vous y gagnerez en lisibilité ce qui vous fera gagner du temps.
Les techniques décrites ci-dessus ne sont que des exemples et choix personnels. A vous d’établir vos propres règles. Vous trouverez dans la source cité ci-après d’autres astuces que vous adopterez peut être.

Mes sources

- Smashing magazine, 70 Expert ideas for better css coding