Quelques fondamentaux concernant le CSS
Les meilleures solutions sont souvent les plus simples. Dans cet article consacré au CSS, nous allons voir des fondamentaux à respecter pour tous vos projets.
Centrer verticalement votre contenu
Le line-height est primordial, par exemple lorsque vous avez un conteneur avec une height fixe, vous utliserez le line-height pour centrer verticalement votre contenu.
Nettoyer vos flux
Le clear:both est votre ami, plusieurs méthodes:
- Créer une div avec la class CB et lui appliquer un clear:both
- Cacher les élément qui sorte du flux avec l'overflow:hidden
- Appliquer un clear:both à la div concernée
- Appliquer un clear:both à votre conteneur
Les commentaires conditionnels
Super important pour ne pas dés-intégrer votre site ^^
Le min-height pour Internet Explorer
Ici on utlise !important pour déclarer la height de mon élément. !important permet de differience si le navigateur est sous IE ou pas.
Utilisez le Text-Transform
Text-transform n'est pas assez utilisé, je vois trop de texte écrit en brut avec des majuscules, sans utiliser le text-transform, pensez CSS avant tout.
Visibilty et Display
Il y a une nuance dans l'utilisation de ces propriétès:
- Visibility:hidden permet de cacher un élément mais il garde l'espace/la taille de l'élément.
- Display:none, lui cache tout, espace et contenu
Les retours de lignes ou le retour charriot #C++ ^^
Utiliser le white-space:nowrap, pour vos éventuels retour à la ligne.
Class vs ID
Utiliser plutôt des ID pour des éléments qui sont utilisés qu'une seule fois dans votre site, et les Class pour le reste.
Le focus sur vos Formulaires
Simple et efficace, le focus est important. Il permettra au visiteur de savoir sur quelle champ il est positionné.
Un reset efficace
L'utilisation d'un reset est primordiale. Comme tout le monde, je vous conseil celui d'Eric Meyer.
Voila quelques conseils concernant le CSS et son optimisation, d'autres articles viendront par la suite concernant ce thème.
Je vous recommande aussi la lecture des sujets suivants:
- Il était une fois Bing Map, construisons notre carte avec l’API. Une bonne alternative à Google Map.- Sur le chemin qui mène au développement web, il y a des outils à avoir. Amis choisi les bons outils
- La propriété CSS:word-wrap, utile pour un retour à la ligne
3 Commentaires
d40x
mardi 07 juin 2011
Petite coquille sans importance sur l'image, on indique à IE 500 et pas 600px.
Pour le passage flux, je suis perplexe, quelle est la différence entre la div concernée et le conteneur?
Sinon sur le fond.
Sinon, le passage sur les class et ID me fait penser aux microformats et à un article que tu avais publié -> <a href="http://pro.clubic.com/creation-de-site-web/langage-programmation/html-5/actualite-426752-microsoft-google-yahoo-accordent-microformats.html">Voir ici</a>
Pour le passage flux, je suis perplexe, quelle est la différence entre la div concernée et le conteneur?
Sinon sur le fond.
Sinon, le passage sur les class et ID me fait penser aux microformats et à un article que tu avais publié -> <a href="http://pro.clubic.com/creation-de-site-web/langage-programmation/html-5/actualite-426752-microsoft-google-yahoo-accordent-microformats.html">Voir ici</a>
JEi
mercredi 08 juin 2011
@d40x
Exact bien vu.
Exact bien vu.
Le taulier du coin !
Un projet, une collaboration ?
Mes derniers projets !