Le CSS dans toute sa splendeur

Le CSS est un élément indispensable aux intégrateurs web qui permet de transformer techniquement l’aspect graphique d’un site en quelques clics !

Le potentiel de cet outil a été dupliqué avec l’arrivé de la troisième génération (CSS3) qui s’accorde à l’évolution engagée avec l’arrivée du HTML5. Cependant sans même parler de CSS3, le CSS2 offrait déjà des possibilités souvent ignorées, laissant donc inexploité, un potentiel extraordinaire.

Grâce à quelques astuces vous serez désormais en mesure de proposer une sémantique plus propre et de cibler de façon plus spécifique des éléments sans avoir besoin de recourir à des classes ou des identifiants complexes. Autres avantages : votre code et vos styles seront plus flexibles et donc plus faciles à optimiser.

Voici quelques exemples de sélecteurs CSS particulièrement utiles mais peu utilisés car souvent incompris :

• « ul > li »
  Le sélecteur « > » permet de cibler tous les éléments « enfants » directs d’un élément spécifique. 
• « h2 ~ p »
  Le sélecteur « ~ » permet de cibler tous les éléments « frères » d’un élément donné.

Pour mieux comprendre le fonctionnement de ces sélecteurs je vous conseille ce site : reference.sitepoint.com, vous y trouverez des explications détaillées et des exemples live.

Vous pouvez également jeter un œil à ces excellents articles qui abordent également le sujet :

• http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
  
• http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
• http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html