Les feuilles de style sont une invention merveilleuse : en permettant de gérer de manière indépendante le contenu et la présentation de votre site, elles facilitent grandement la tâche du concepteur-designer.

Malheureusement, leur maîtrise demande une solide expérience. Qui n’a pas un jour, malgré une CSS a priori nickel, été confronté à une série de décalages flippants lors d’un changement de plateforme ou de navigateur ?

Au delà des contraintes graphiques, le bon fonctionnement de vos CSS est révélatrice de la qualité de votre site. Ces quelques conseils vous permettrons de gérer un affichage parfait et une bonne structuration de vos données, quelque soit le contexte utilisateur.

1. La remise à zéro en CSS (reset stylesheet)

Aucun navigateur ne gère ses paramètres de présentation de manière identique : marges, champs de saisie, hauteur de ligne, indentation et force de corps varient de droite à gauche ; pire, le phénomène s’amplifie encore sous Linux ou Mac OS. La solution réside en une feuille de style qui remet tous ces réglages à zéro. Quitte à faire au besoin une petite CSS sur mesure pour compenser tel ou tel défaut de  votre navigateur favori (ou abhorré).

Voici une version simplifiée que j’ai mis au point récemment contre une abominable galère de taille de caractères différente sous Vista et XP (et Firefox et IE7, sans parler de Safari sur Mac)…

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,
b, u, i, center,
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-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    font-size: 10px; line-height: 1;
}

Une version très complète est disponible sur le site d’Eric Meyer – CSS guru et auteur de référence en la matière.

Et si vous voulez voir vos sites affichés sous différents OS via les navigateurs les plus exotiques, un petit tour par là…

2/ Images .png : IE6 vs le reste du monde…

Malgré l’existence de plusieurs techniques - Javascript, hacks CSS – la gestion du format Progressive Network Graphic (et sa merveilleuse transparence alpha) reste très limitée pour les  utilisateurs d’Internet Explorer 6. Selon les statistiques, ils sont encore un bon paquet, particulièrement en milieu professionnel (PME, administrations).

Les patchs à base de JavaScript sont efficaces pour une ou deux images mais j’en ai fait l’expérience, IE6 pête les plombs lorsqu’on utilise des .png de grande taille ou en grand nombre. Comme c’est mon cas pour le présent site, voici ce que vous verrez si vous tentez l’expérience

La solution la plus radicale, qui peut valoir le coup pour réaliser un thème assez simple, est de doubler tous vos .png par des images au format .gif qui seront gérées dans une feuille de style spéciale pour IE6.

3/ Boîtes <div> et coins arrondis

Si vous avez marre des angles droits de vos boxes, il existe une propriété fort utile pour générer des border joliment arrondis : border-radius, qui accepte une valeur en px ou en em. On peut même la décliner pour chaque angle. Malheureusement, son emploi n’est valide que dans la norme CSS 3.0 et de plus, elle est ignorée par Internet Explorer.

La seule solution réellement clean, à condition d’avoir fixé une largeur précise pour ses boxes, est d’utiliser au moins deux images : la première servira à faire la partie supérieure de la box et pourra s’étendre en longueur, en fonction du contexte. La seconde servira pour l’arrondi inférieur.

Voici mon code pour la CSS, puis ce qu’il faut mettre dans la page HTML et enfin le résultat :

#mybox {
    width: 210px; height: auto;
}
.top_box {
    height: auto; min-height: 70px; max-height: 400px;
    background: url('top_box.png') no-repeat top left;
    background-color: #ffffff;
}
.bottom_box {
    height: 30px;
    background: url('bottom_box.png') no-repeat bottom left;
    margin-top: -14px;
}
#mybox h2 {
    font-size: 1.3em; font-weight: bold;
    color: #ffffff; padding: 2px 0 0 24px;
}
#mybox p {
    text-align: left; font-size: 1em;
    color: #404040; padding: 0 12px 0 24px;
}

Des hauteurs mini et maxi ont été précisées pour la box, selon la taille des éléments graphiques. Le code complet et les deux images sont à télécharger ici. Enjoy !

Tags : css, ergonomie, graphic design, infographie, web-design

Cet article publié le Vendredi 20 mars 2009 à 0:36 est classé dans Outils de travail. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.