Conseils et astuces pour débutant en CSS

Quand nous donnons nos formations en HTML CSS à Marseille ou que nous intervenons en assistance ou création de site Web nous prodiguons souvent les mêmes conseils pour aider les débutants en CSS.

Voici donc, en vrac, quelques conseils et erreurs à éviter pour se perfectionner en développement CSS. Bien sûr cette liste n’est pas exhaustive et l’on compte sur vous pour nous aider à la compléter dans les commentaires.

Vérifier la compatibilité multi-navigateur

Il faut vérifier souvent, même très souvent, voire trop souvent, la compatibilité de votre développement sur l’ensemble des navigateurs que vous ciblez. N’attendez pas d’avoir fini le développement de votre CSS pour vérifier qu’il marche sur les autres navigateurs. Il est en effet beaucoup plus facile de corriger au fur et à mesure les problèmes de compatibilité multi-navigateurs.
Voici une liste d’outils pour vous aidez à rendre compatible votre site pour l’ensemble des navigateurs.

Anciennes versions de Firefox

Pour tester votre site sur les anciennes versions de Firefox, le plus simple est de télécharger ces anciennes versions de Firefox au format portable sur le site Portableapps.com.

Il existe aussi un soft pour les utilisateurs Mac : le logiciel MultiFirefox.

MultiFirefox pour Mac

Anciennes versions de Safari

Il est possible d’installer les versions antérieures de Safari uniquement sur Mac en utilisant les versions standalone de Safari fournies par Michel Fortin.

Safari en Standalone

Anciennes versions d’Internet Explorer

Plusieurs solutions existent pour tester sur des versions antérieures d’Internet Explorer.

IETester

IETester est une application qui contient toutes les versions 5.5, 6, 7 et 8 d’Internet Explorer, un onglet correspondant à une version.

Présentation d'IETester

Internet Explorer Collection

Internet Explorer Collection contient les version standalone de toutes les versions d’Internet Explorer.

Internet Explorer Collection

Expression Web SuperPreview

Microsoft propose l’application SuperPreview pour vérifier le rendu dans différentes versions d’Internet Explorer. Cette application permet de superposer le rendu de deux navigateurs afin de pouvoir comparer les différents rendus (c’est l’application dont rêvent tous les « psychopathes de la compatibilité au pixel près »).

Expression Web SuperPreview

Les sites faisant des photos d’écran sur différents navigateurs

Adobe BrowserLab

Adobe propose sa solution BrowserLab qui vous permet d’avoir une photo du rendu d’une url dans différents navigateurs.

Abode BrowserLab

Browsershots.org

Browsershots.org est une solution similaire à BrowserLab sauf qu’elle propose plus de navigateurs à tester.

Browsershots.org

Browsercam

Browsercam ressemble fortement à BrowserShots mais propose des services payants en plus.

Browsercam

float:left n’est pas toujours la bonne solution

Quand on débute en CSS et que l’on vient de découvrir le positionnement à l’aide de float on pense souvent avoir la solution idéale pour tous les cas de figures. Or, positionner les éléments à l’aide d’un float:left ou float:right n’est pas toujours la bonne solution. J’ai même tendance à préférer les autres solutions. Je vous recommande donc de réfléchir d’abord en essayant de positionner à l’aide de la propriété position (avec des calques en relative et absolute) et de garder la propriété float pour les cas que vous maitrisez.

Développer en premier pour les navigateurs conformes

Tout est dit dans le titre du paragraphe. Pour maximiser vos chances de compatibilité multi-navigateur, il faut écrire un code valide qui sera bien interprété par les navigateurs conformes aux standards. Il vous reste ensuite à rajouter quelques styles pour rendre compatible votre page avec les anciens navigateurs non conformes, en gros rajouter des styles spécifiques pour ce superbe navigateur qu’est Internet Explorer 6 sans qui le cyberespace ne serait pas tout à fait le même.

Avoir un code facile à maintenir

C’est une règle assez commune en développement mais elle s’applique d’autant plus que le code CSS n’est pas modulable. Si vous ne faites pas l’effort d’avoir un code propre et commenté, la maintenance va vite devenir problématique car il est difficile plusieurs mois après l’écriture d’une feuille CSS de comprendre pourquoi on avait utilisé tel ou tel style pour le rendu.
Je vous recommande donc de systématiser les espaces dans votre code CSS et le point virgule à la fin, d’utiliser les propriétés raccourcies pour ne pas surcharger les styles, d’utiliser des conventions de nommage, de commenter votre code à chaque fois que vous utilisez une astuce ou quelque chose qui sort de l’ordinaire et enfin de définir vos styles en les classant du générique au spécifique et en respectant l’ordre linéaire de votre HTML (c’est très pénible de devoir chercher le style d’un header et de le retrouver en bas de la feuille de style).

Avoir une bonne base pour commencer

Il est important quand on débute en développement HTML/CSS d’avoir une base HTML/CSS solide. Je vous recommande la lecture de l’article 12 points essentiels pour construire une base HTML solide qui reprend en détail les points importants qu’il ne faut pas oublier.

Faire de la veille grâce aux blogs et réseaux sociaux

Nous conseillons très souvent aux débutants en développement Web de s’abonner aux blogs et réseaux sociaux des sites faisant référence dans le domaine. La majeure partie de la veille des experts Kiwano s’effectue via RSS et Twitter. Nous vous conseillons donc de vous abonner au flux RSS de Kiwano ou mieux, pour être informé en temps réél de l’actualité sur le développement HTML CSS, de suivre Kiwano sur Twitter.

Ne pas hésiter à poser des questions sur les blogs et forums

Si vous bloquez sur un problème, demandez de l’aide à la communauté. En expliquant votre problème sur les blogs et forums d’aide au développement CSS, vous serez surpris de la rapidité pour avoir une réponse de qualité. Pour démarrer vous pouvez utiliser les forums de Alsacréations et Developpez.com.

Savoir utiliser les classes et ID

Les débutants en développement CSS ont tendance à ajouter des classes et des ID sur l’ensemble des éléments de leur page. Vous devez essayer de réduire au maximum l’utilisation de ces classes et ID. Un ID sert à cibler un élément unique dans votre page comme un élément de navigation. Une classe permet elle d’appliquer un style pour plusieurs éléments dans votre page, elle est donc réutilisable. Par exemple vous pouvez définir une classe pour afficher vos éléments dans un mode erreur avec une classe « .error ».
Exemple de code superflus:

<div id="sidenav" class="left">
    <p class="nav-heading">
        <strong class="green">Menu</strong>
    </p>
    <p class="nav-menu1">
        <a href="#" class="blue-link">Accueil</a>
    </p>
    <p class="nav-menu2">
        <a href="#" class="blue-link">A propos</a>
    </p>
    <p class="nav-menu3">
        <a href="#" class="blue-link">Services</a>
    </p>
    <p class="nav-menu5">
        <a href="#" class="blue-link">Contact</a>
    </p>
</div>

Le même code allégé :

<div id="sidenav">
    <h2>Menu</h2>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Distinguer le contenu de la mise en forme

C’est une règle que vous avez déjà lu plusieurs fois sur Kiwano : il est judicieux de séparer le contenu qui doit être dans votre code HTML de sa mise en forme qui doit être dans vos feuilles de styles. Il est également important de réfléchir à la sémantique des éléments HTML que vous manipulez. Plus vous serez précis pour donner du sens à votre code HTML plus la mise en page sera facilitée.
Il est ainsi important de se protéger du fameux virus qui menace les développeurs HTML/CSS. Je ne parle pas de la grippe A (H1N1) mais de la tristement célèbre maladie de la divite aigue dont les symptômes les plus flagrants sont des excès de tags <div> dans le code HTML qui remplacent alors les <td> des tableaux de présentations.
Donc encore une fois, il vaut mieux éviter le code suivant :

<div style="font-size: 24px; font-weight: bold;
 font-family: arial; color: red; padding: 10px; 
margin: 10px;">Mon titre</div>

Pour lui préférer le code qui suit.
HTML :

<h1>Mon titre</h1>

CSS :

h1 {
    font: 2em bold arial;
    color: red;
    padding: 10px;
    margin: 10px;
}

Connaitre quelques techniques avancées

Il est utile de connaitre quelques techniques avancées qui correspondent à des cas de mise en page couramment utilisé sur le Web. Comme indiqué précédemment dans cet article, en faisant de la veille sur les blogs et sur Twitter, vous découvrirez au quotidien des nouvelles techniques avancées qui viendront enrichir vos connaissances de développeur CSS.

Centrer horizontalement vos éléments

Pour centrer un élément de type inline contenu dans un élément de type bloc, comme par exemple une image dans un paragraphe, vous pouvez utiliser la propriété text-align qui supporte les valeurs left (aligner à gauche), right (aligner à droite), center (centrer), justify (justifier).
Pour centrer un élément de type bloc, il suffit d’appliquer la valeur auto aux propriétés margin-left et margin-right, exemple :

div#menu {
   margin-left: auto;
   margin-right: auto;
}

Centrer verticalement vos éléments

Pour centrer vos éléments de manière verticale, je vous conseille l’article Vertical Centering With CSS (article en anglais).

Utiliser le mode inline-block pour gérer l’alignement dans vos formulaires

Pour aligner vos éléments de formulaires (label et input) et avoir un code qui marche sur tous les navigateurs, la meilleure technique reste d’appliquer la valeur inline-block à la propriété display de vos labels. Ceci vous permet d’avoir un alignement en standard de la baseline des textes contenus dans les labels et les champs de formulaires.
Code HTML :

<label for="prenom">Prénom : </label>
<input type="text" id="prenom" />

Code CSS :

label {
   display: inline-block;
}

Avoir un Sticky Footer

Voici 2 liens vers 2 techniques différentes permettant la mise en place d’un pied de page toujours positionné en bas de la page.
Techniques de Sticky Footer :

Connaitre les hacks pour implémenter les propriétés CSS non supportés par IE6 mais ne pas en abuser

Il existe un certain nombre de techniques permettant d’utiliser des propriétés CSS bien utiles qui par défaut ne sont pas supportés par IE6. Par exemple, avoir des coins arrondis sur vos boites, pouvoir utiliser des PGN-24 pour utiliser la transparence semi graduelle, gérer l’opacity des éléments, utiliser les min-width et max-width, la gestion du hover sur les éléments qui ne sont pas des liens, etc.
Je vous conseille donc la lecture de l’article 10 CSS properties that ‘were’ impossible to implement in IE6 pour découvrir ces techniques.
Attention, il est déconseillé d’abuser de ces techniques car celles-ci ont un impact significatif sur la performance d’Internet Explorer 6. N’utilisez ces hacks que comme ultime recours.

Connaitre les plugins qui facilitent la vie

Le plugin indispensable pour vous faciliter la vie en développement CSS est le plugin Firebug pour Firefox.

Image de Firebug pour Firefox

Sous Internet Explorer, le plus abouti est la fonction Developer Tools disponible sur Internet Explorer 8. Sur les anciennes versions d’Internet Explorer, il faut télécharger la barre d’outil IE Developer Toolbar. Malheureusement, même si Microsoft a fait un gros effort pour Internet Explorer 8, les barres d’outils pour Internet Explorer n’arrive pas à la cheville de Firebug pour Firefox.

Il existe aussi d’autres plugins pour Firefox qui sont très utiles comme CodeBurner, CSS Usage et Dust-Me Selectors. Je vous conseille aussi l’article intitulé Top 10 Free Online CSS Editors ainsi que l’article 12 add-ons every Firefox user must have.

Conclusion

Les conseils sur le sujet ne manquent pas, nous avons donné ici ceux qui nous semblent les plus importants. Vous pensez que nous avons oublié une astuce incontournable ? N’hésitez pas à nous laisser votre commentaire afin que nous l’ajoutions à la liste.

4 réflexions au sujet de « Conseils et astuces pour débutant en CSS »

  1. Bonjour,
    Très bon article, j’ajouterai pour ma part :
    Faites un dessin de l’architecture de votre page avant de commencer à coder, ce ne sont que quelques minutes qui peuvent vous éviter de perdre des heures.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *