Vu que mon premier article a l’air d’avoir été apprécié voici une petite suite, toujours en mode “traduction / adaptation” de Smashing Magazine pour les anglophobes !

1/ Quelques astuces de notation

• Utiliser la notation héxadécimale courte de vos couleurs. En effet #000 est exactement pareil que #000000, de même que #3cd est la même couleur que #33ccdd. [Roger Johansson]
• Utiliser l’ordre LoVe/HAte pour définir vos pseudo classes de liens. (Link, Visited, Hover, Active) Cette habitude améliore la lisibilité de votre CSS et vous aide a placer les bonnes propriétés sur les bonnes pseudo classes car elles seront toujours dans le même ordre sur vos feuilles de styles. [Eric Meyer]

Code source :

a:link { color: #00F; }
a:visited { color: #F0F; }
a:hover { color: #3CD; }
a:active { color: #F00; }

• Utiliser l’ordre TRouBLe pour définir vos margin, padding et border. (Top, Right, Bottom, Left) Pour les mêmes raisons que l’ordre LoVe/HAte vous simplifiera le codage CSS de vos liens, l’ordre TRouBLe simplifiera celui de vos margin, padding et border. [Roger Johansson]

Code source :

margin: top right bottom left;
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

• Gagner en lisibilité dans votre code CSS grâce aux notations courtes. Comme dans le démontre simplement l’exemple ci dessous.

Code source :

border: width style color;
border: 1px solid #000;

background: color image repeat attachment position;
background: #f00 url(background.gif) no-repeat fixed 0 0;

font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

Je me suis mis en début de fichier CSS (avec le sommaire et le rappel des couleurs) un bloc astuces permettant d’avoir toutes ces notations sous la main quand j’édite mon code depuis VIM, car sinon quand je suis sous Aptana une infobulle me rappelle la syntaxe correct à utiliser.

2/ Quelques astuces (en vrac)

• Mettre le font-size du body à 100.01%. Visiblement cette astuce permet de corriger quelques bugs d’affichage dans certains navigateurs. [CSS : getting into good habits]
• Améliorer la lisibilité de vos textes. Grâce à un line-height:1.4 et une couleur de texte comme #fafafa (un blanc pas tout a fait blanc pour vos fond sombre) ou #333 (un gris foncé pour vos fonds clairs). [Christian Montoya]
• Débugger votre structure. avec * { border : 1px solid #f00; } dans votre CSS. Cela fera apparaitre vos bordures de Div en rouge.
• Centrer horizontalement votre structure. avec #structure { margin: 0 auto; }

Code source :

XHTML:

<div id=”structure”>
<!- la structure de votre site ici ->
</div>

CSS:

#structure {
width : 800px /*La largeur de votre stucture ici*/
margin : 0 auto; /*Centrer horizontalement votre structure*/
}

Si cet suite vous plait faites le savoir dans les commentaires et n’hésiter pas, vous aussi, à laisser vos astuces !

Profil

Flickr

Le grand YAKA !

Visiteurs