Quelques trucs et astuces

Voici quelques trucs et bonnes pratiques pour démarrer vos futurs projets.

CSS Table Grid

On a souvent besoin de spécifier des largeurs aux colonnes de tableau. Au lieu d'ajouter une ligne CSS à chaque tableau ou encore, de spécifier directement dans le code, on peut prévoir une série de classes pour avoir des dimensions en pourcentage (%), donc responsive. Par exemple t10 pour 10% et t20 pour 20% qui sont facile à se rappeler. Voici un exemple complet en action de ce que je veux dire. Remarquez que l'utilisation des largeurs en pourcentage permet d'avoir un site dit "responsive".

CSS Diagnostics

L'idée est d'utiliser les sélecteurs CSS afin de mettre en évidence le mauvais code (oublie de l'attribut alt) ou les éléments oubliés (balise vide).

*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] { border: 5px solid yellow !important; }
img[alt=""] { border: 3px dotted red !important; }
img:not([alt]) { border: 5px solid red !important; }

Pour plus d'exemples, visitez le site CSS-Tricks. Je vous conseil cependant d'ajouter !important à chaque instruction afin d'être certain de bien mettre en évidence tous les éléments. Idéalement, il vous faut bien sûr un navigateur assez récent, sinon, vous pouvez utiliser ces même sélecteurs avec JQuery afin d'ajouter une classe.

Centrer verticalement

  • Centrer dans un bloc avec les pseudos éléments (hauteur connue) : Voir le code ici.
  • Centrer dans un bloc avec display: table-cell; (hauteur connue) : Voir le code ici.
  • Centrer dans un bloc/fenêtre de façon responsive et de dimensions inconnues (%) : Voir le code ici (IE9+)
  • Centrer horizontalement et verticalement en absolu : Voir l'article ici.