Après l’article commencé hier et essentiellement consacré aux bonnes pratiques vis à vis de XHTML, nous pouvons nous pencher sur le cas des bonnes pratiques en CSS.
Avant de partir sur les bonnes pratiques, petit récapitulatif. Il existe trois façons d’intégrer du CSS, les deux premières sont directement incluse dans le fichier XHTML de structure et la troisième (celle des bonnes pratiques) dans fichier à l’extension .css
Comment utiliser du CSS dans une page web
Dans une balise avec l’attribut style
Intégrer du CSS dans une balise doit rester quelque chose de ponctuel et d’exceptionnel. On pourrait par exemple s’en servir pour modifier un élément sans avoir accès au fichier CSS directement par exemple mais… A éviter.
<p style="color: #ff017d">Mon texte en rose</p>
Dans une page avec la balise style
Second moyen de faire toujours dans une page, utiliser la balise. On retrouve donc une séparation de la structure et du CSS mais tout se trouve dans le même fichier. A éviter donc, quitte à séparer, autant utiliser deux fichiers.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR"> <head profile="http://gmpg.org/xfn/11"> <title>Exemple</title> <style type="text/css"> p { color: #ff017d; } </style> </head> <body> <p>Un texte en rose</p> </body> </html>
Dans un fichier CSS
Enfin une bonne façon de faire sur toute la ligne. En procédant de cette manière, la structure et la mise en page se font bien dans deux fichiers différents et indépendants l’un de l’autre. Il est donc possible de faire intervenir deux personnes différentes n’ayant pas directement accès à l’un ou l’autre des fichiers.
Cela se décompose en deux étapes, la première, le fichier XHTML de structure. Tout se passe dans la partie head.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR"> <head profile="http://gmpg.org/xfn/11"> <title>Exemple</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>Mon texte en rose</p> </body> </html>
Enfin un fichier CSS qui devra donc s’appeler dans mon cas style.css
p { color: #ff017d; }
Trois manières de faire pour un même résultat. N’est-ce pas franchement sympa ? 
Comment cibler un élément en CSS
Il existe plusieurs moyens de cibler un élément.
Via le nom de sa balise afin de redéfinir tous les styles des balises XHTML :
body { mes styles pour body; } p { mes styles pour p; }
Via l’id afin de cibler un élément unique dans la page :
<div id="paragraphe"> <p>blablabla</p> </div>
#paragraphe { mes styles pour parapgrahe } #paragraphe p { mes styles pour p dans le div paragraphe }
Via les class qui peuvent être utilisés autant de fois que nous le souhaitons sur une page :
<div class="paragraphe"> <p>blablabla</p> </div> <div class="paragraphe2"> <p>blablabla</p> </div> <div class="paragraphe"> <p>blablabla</p> </div>
.paragraphe { mes styles pour .parapgrahe } .paragraphe p { mes styles pour p dans .paragraphe } .paragraphe2 { mes styles pour .parapgrahe2 } .paragraphe2 p { mes styles pour p dans .paragraphe2 }
Trois possibilités donc avec lesquelles il faudra apprendre à jongler. Essayez cependant de limiter le nombre d’id au profit de class pour assurer une plus grande flexibilité du code.
Bonnes pratiques
La partie introduction terminée, penchons nous sur les bonnes pratiques associées à l’utilisation des CSS.
Inclure correctement un fichier CSS
Comme nous l’avons vu plus haut, nous utilisons link associé à l’attribut type, rel et href pour inclure correctement un fichier CSS. Seulement voila, mon code plus haut n’est pas forcément le meilleur. En effet et après un peu de pratique vous pourrez vous apercevoir qu’un attribut supplémentaire baptisé media peut venir chambouler les choses.
Il existe donc plusieurs types de media, par media comprenez interface de visualisation. CSS prends donc tout cela en charge afin d’optimiser voir de changer tout votre design suivant le type de périphérique connecté sur votre site.
La liste complète :
- all : Cela porte plutôt bien son nom, tous les medias sont concernés par all
- screen : Un écran d’ordinateur
- print : Une imprimante
- projection : Un vidéo projecteur
- handled : Un périphérique portable de type pocketpc ou palm
- tv : Les écrans de télévisions
- aural : Pour les lecteurs vocaux
- braille : Les appareils à retour tactiles
- embossed : Les imprimantes brailles
- tty : Les petits périphériques portables à la navigation limitée
Autant de médias, autant de possibilités. La simplicité rimerais donc à spécifier all et à ne pas trop se poser de questions. Malheureusement, nous aimons bien réfléchir un peu et pourquoi pas optimiser pour les différents medias par exemple :
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen, projection" />Ainsi nous disons : Si tu es un media de type ordinateur ou vidéo-projecteur, charge le fichier style.css dans le répertoire style. Pourquoi dire screen et projection ? Tout simplement car Opera en plein écran est un media de type projection. Il serait bête de ne plus voir de CSS dans ce cas .
Seconde optimisation (et nous aurons fait le tour des plus courantes), l’imprimante. Reprenons donc notre code et ajoutons lui une ligne.
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
Deux fichiers différents seront donc chargés. style/style.css dans le cas d’un média de type écran ou vidéoprojecteur et le fichier style/print.css dans le cas d’une imprimante. Le minimum syndical est donc fait, nous pourrions en plus (vu la démocratisation) nous intéresser au périphérique mobile pour avoir le minimum syndicale de 2009 .
Quant aux autres types de médias, ils n’auront alors aucun fichier de style mais par moment, cela n’est pas forcément une lacune. Bien au contraire.
Remettre sur un pied d’égalité l’ensemble des navigateurs
Une fois nos CSS correctement déclarés dans la structure XHTML, il faut se poser la questions des navigateurs. Un peu de pratique vous mettra donc devant le fait accompli : les navigateurs ne sont pas tous sur un pied d’égalité concernant CSS. Pourquoi ? Parce qu’il ne respecte pas de la même manière les standard du web.
La meilleure façon de faire est donc de remettre l’ensemble des valeurs par défauts et donc tout à 0. Cela s’appelle le reset et un peu de recherche sur google vous conduira vers une tonne de ressource consacrées au reset css dont css4design (le retour de ce cher br1o) qui a décrypté plusieurs façons de faire. N’aimant pas réinventer la roue, allez donc faire un tour du coté de son site.
Éviter les hacks CSS inutiles
Une fois remise à zéro, vous vous apercevrez toujours que certains éléments ne sont pourtant pas correct sur tous les navigateurs. La tentation est donc grande de procéder à un hack css pour rectifier la valeur simplement
Prenons par exemple un problème de marge sur Internet Explorer 6. IE6, le meilleur ami de l’intégrateur… Ou pas. Nous avons donc fait un CSS qui s’affiche correctement sur Firefox et Opera mais pas sur IE6, nous pouvons alors utiliser la règle !important.
#container { margin: 0 10px; margin: 0 15px !important; }
Ainsi, IE6 ne n’aura que 10px à gauche et à droite du #container alors que Firefox en utilisera 15.
Seulement, la chose à ces limites et !important ainsi que tous les hacks CSS ont toujours leurs limites. Les bonnes pratiques consistent donc à utiliser une autre règle afin de dire au navigateur d’ouvrir ou non certains fichiers CSS et ainsi rectifier le CSS correctement et explicitement (dans un autre fichier). Nous procéderons donc de la façon suivante :
<!--[if IE ]> <link rel="stylesheet" href="css/ie.css" type="text/css" /> < ![endif]-->
Ainsi si le visiteur utilise IE, le fichier ie.css sera automatiquement chargé. Il existe d’autres utilisation de if comme gt (greather than), lt (lower than) ou gte/lte (greather than or equal/lower than or equal) pour les différentes version d’un navigateur IE 6, IE 5, IE 7 ou même plus tard IE8.
Un CSS pour les dominer tous
Nous reviendrons sur le problème plus tard mais utiliser un fichier master css qui appelle d’autres fichiers css a quelques avantages. En effet si l’on reprends le code suivant :
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
Nous pouvons nous poser la question suivante Vais-je utiliser un master css ou non ? J’aurais tendance à dire oui. Prenons le cas de notre fichier de reset amicalement baptisé reset.css. Il sera tout aussi important dans le cas de l’affichage sur un écran que sur une simple feuille de papier alors pourquoi le copier coller deux fois ? Autant le mettre à part et l’appeler de la façon suivante :
@import url("css/reset.css");Puis de procéder ainsi pour un ensemble de fichier. Un gain de temps non négligeable, surtout pour les personnes pointilleuses avec la mise en page.
Utiliser une librairie CSS afin d’accélérer la mise en page
Tout le monde à l’habitude d’utiliser des classes CSS et de s’en fabriquer quelques unes afin d’accélérer l’intégration alors pourquoi ne pas en profiter ? Nous pourrions par exemple très simplement créer un fichier css répondant au doux nom de classe.css et incorporer des éléments redondants comme par exemple :
.FloatLeft { float: left; } .FloatRight { float: right; } .Clear { clear: both } .Border { border: 1px solid; }
Ne reste donc plus qu’à inclure notre fichier class.css dans notre master.css.
Commenter son CSS et l’organiser
Un fichier CSS peut rapidement devenir un grand n’importe quoi. Il est donc important de commenter votre feuille de style et l’organiser correctement. Il n’y a malheureusement pas grand chose d’autres à dire, tout dépend de l’individu. Vous pouvez cependant commenter les parties comme générale, header, sidebar, footer afin de vous repérer ou encore indenter votre code CSS.
Pour ma part je nomme les parties dans mon fichier css mais n’indente pas et tape tout sur une ligne (à moins d’avoir beaucoup de valeur). C’est ma façon de faire et je m’y retrouve très bien .
/*------------------------------------------------------*/ /*--------- Un exemple de commentaire en css --------*/ /*------------------------------------------------------*/
p { margin: 10px 0; text-align: center; }
ou
p { margin: 10px 0; text-align: center; }
Concaténer les valeurs
Nous pouvons concaténer certaines valeurs en css afin de gagner quelques lignes et au passage, se prendre un peu moins la tête. Par exemple pour une marge, je peux aussi bien faire :
p { margin-top: 10px; margin-right: 0 px; margin-bottom: 10px; margin-left: 0px; }
que
p { margin: 10px 0; }
ou encore
p { margin: 10px 0 10px 0; }
Ceci est valable pour définir margin, padding, font et border.
Exemple pour margin (même chose pour padding):
p { margin: top right bottom left; } p { margin: 10px 0 10px 0; } p { margin: top/bottom right/left; } p { margin: 10px 0; } p { margin: top/bottom/right/left; } p { margin: 10px; }
Pour border :
p { border: width style color; } p { border: 1px solid #ff017d; }
Pour background :
p { background: color image repeat attachment position; } p { background: #f00 url(background.gif) no-repeat fixed 0 0; }
Pour font :
p { font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; } p { font: italic small-caps bold 1em/1.6em "Lucida Grande",sans-serif; }
Éviter le trop noir ou le trop blanc
Vous pouvez éviter d’utiliser #000000 pour du noir (au passage cela peut aussi s’écrire #000) et #ffffff pour du blanc (#fff) afin de protéger les écrans et les yeux de vos lecteurs.
On utilisera donc par exemple #fefefe pour du blanc cassé et #1b1b1b pour du noir pas tout à fait noir .
Penser sa cascade
CSS c’est avant tout Cascading StyleSheet. Tout fonctionne en cascade de haut en bas. Si je modifiais 10 fois ma balise p en mettant autant de couleur différente, seule la dernière ligne serait interprétée. A contrario, je peux définir une première fois des valeurs globales puis affiner au fur et à mesure comme par exemple :
body { font: 1em/1.6em "Lucida Grande",sans-serif; } p { color: #333; margin: 10px 0; } a { color: #ff017d; text-decoration: none; border-bottom: 1px solid #ff017d; }
Toute ma page respectera donc la taille 1em avec 1.6em d’interligne dans la police Lucida Grande, mes paragraphes auront 10px de marge en haut et en bas et mes liens seront roses. Rien ne sert de spécifier à chaque fois la taille de ma police, cela est déjà fait. J’utilise donc la cascade comme il se doit.
Je pourrais tout aussi bien prendre le même code :
body { font: 1em/1.6em "Lucida Grande",sans-serif; } p { color: #333; margin: 10px 0; } a { color: #ff017d; text-decoration: none; border-bottom: 1px solid #ff017d; font-family: arial, verdana; }
Et faire la même chose pour ne modifier que la police des liens pour utiliser arial.
Définir une famille de police
Sans pour autant rentrer dans le débat des différents choix de police, pensez à utiliser une famille de police plutôt qu’une police seule. En effet un visiteur ne possédant pas la première police passera automatiquement à la suivante puis la troisième et ainsi de suite. Cela reflète aussi l’importance d’utiliser des polices de type web.
p { font-family: Arial, Verdana, Helvetica, sans-serif; }
Et la suite ?
Je vous propose tout simplement de passer aux commentaires afin de laisser vos propres bonnes pratiques. Nous pourrions par exemple aborder le sujet des 100,01%, des 62,5% pour utiliser em comme px et de pleins d’autres choses. Les bonnes pratiques CSS méritent à elles seules 3 chapitres
Nous en reparlerons cependant très vite avec la construction d’une librairie CSS reprenant l’ensemble des bonnes pratiques.
Bonjour et bienvenu sur un vol de la compagnie "pocky airlines". Vous trouverez à gauche les dernières nouvelles du commandant de bord. Elles ne seront pas forcément passionnantes mais vous devrez faire avec.
Ah oui, nos hôtesses sont bien entendue à votre disposition
jparia
9 octobre à 22:04
Permalien
Bon début, on peut associer des class à une balise par exemple:
input { font-family: Arial, Verdana, Helvetica, sans-serif; font-size:12px; border:1px solid ##333; }
input .obligatoire{ background-image=url(images/etoile.gif) ; background-repeat:no-repeat; background-position:right; }
input .majuscule{ text-transform:uppercase; }
input .minuscule{ text-transform:lowercase; }
on peut ainsi appliquer plusieurs class à une balise comme par exemple pour un champ input obligatoire et en minuscule: