Cachez moi ce 17-85mm que je ne saurai voir. Le 70-200mm, c’est pour bientôt !
Pendant que Emma Alvarez nous présente 50 outils CSS pour les webmasters et que Matt Jurmann expose 13 raisons pour lesquelles le positionnement CSS est plus efficace que la mise en page par tableaux, Antonio Lupetti dévoile son système de pagination parfaite en CSS et le site cssliquid.com traite du design fluide et élastique en CSS. En attendant de savoir si les variables CSS vont devenir une réalité, je voulais faire un petit tutoriel avec des exemples de 6 techniques CSS que j’estime importantes de connaitre. Pour cet article, NotePad++ sera mon ami
1 - Fixer une base pour la taille de la police
Jusqu’à ce que Internet Explorer finisse par supporter le redimensionnement du texte en pixels, c’est la meilleure technique pour avoir un contrôle total sur vos tailles de police. En fixant la propriété de style font-size de la balise body sur 62.5%, la base de votre taille de police sera de 10 pixels. De cette manière, 1em est égal à 10 pixels.
De ce fait quand la propriété de style font-size sera fixée à 1.2em, cette dernière sera interprêtée comme font-size: 12 px.
2 - Annuler toutes les marges par défaut
Il y a une excellente méthode pour annuler toutes les marges néanmoins je n’ai jamais eu besoin de l’utiliser. Je préfère enlever la marge et le padding de chaque élément.
Ensuite, vous pourrez définir les marges que vous voulez en conséquence.
3 - Mettre un float pour annuler un float
Le flottement (floating) est probablement l’une des choses les plus importantes à comprendre en CSS, mais savoir comment effacer des floats est nécessaire également. Tout ce que vous devez retenir est : Mettre un float pour effacer un float.
J’ai créé une page avec deux colonnes flottantes l’une à côté de l’autre. Vous remarquerez dans l’exemple que le fond gris ne contient pas les colonnes flottantes. Donc, la meilleure chose à faire est de mettre l’élément contenant de flotter. Donc, la meilleure chose à faire est de mettre un float sur l’élément contenant. Mais maintenant, vous verrez que le conteneur de base ne contient pas de la zone de contenu.
Sinon l’autre moyen pour effacer le flotteur, est d’insérer un élément de compensation. Maintenant, il existe d’autres façons pour effacer un flotteur sans marquage mais j’ai remarqué quelques incohérences avec cette technique.
4 - Le remplacement d’image
Bien sûr, il existe plusieurs techniques pour le remplacement d’images. Mais je pense que vous tirerez plus de bénéfices en utilisant cette technique. J’ai également discuté de cette technique dans un article précédent : “Improved Navigation Image Replacement“.
La page HTML
La feuille de style CSS
Finalement, tout ce que nous faisons c’est de positionner une image par dessus le texte HTML.
La raison pour laquelle j’aime bien cette technique s’explique par le fait que, même lorsque les images sont manquantes, le texte est encore visible. Bien sûr cela signifie que vous ne pouvez pas utiliser une image transparente par dessus le texte.
5 - Les fausses colonnes
Il est très fréquent d’avoir 2 colonnes d’une à côté de l’autre, avec une colonne ayant une couleur de fond et l’autre colonne ayant un fond blanc. Ces deux colonnes ne pourront presque jamais recevoir la même quantité de contenu. Le moyen le plus simple de contrer cela est de mettre une image de fond d’un pixel qui va se répéter verticalement dans l’élément qui contient les 2 colonnes.
La page HTML
La feuille de style CSS
Assez simple : Un conteneur, deux colonnes flottantes et un “élément d’annulation” afin que le conteneur englobe les colonnes flottantes (comme noté dans “Mettre un float pour annuler un float” ci-dessus).
6 - CSS Sprites
CSS sprites est une technique qui permet de combiner les images afin de réduire le nombre d’appels au serveur. Au lieu de charger deux images de fond (une standard et une différente au passage du curseur), on ne va charger qu’une seule image en affichant des morceaux différents de la même image au passage de la souris. Nous allons tout simplement effectuer un repositionnement d’image.
Dans cet exemple, nous allons juste avoir un lien de téléchargement et nous voulons que le fond change au passage du curseur sur ce dernier.
La page HTML
La feuille de style CSS
Comme vous pouvez le voir dans le code, dans le hover, nous changeons la position de l’image d’arrière-plan pour afficher une autre partie de l’image.
Oh, et bien sûr, Internet Explorer 6 et 7 suXXent, voici donc la propriété de style que nous allons ajouter à la balise a#download :
Cette liste n’est certainement pas exhaustive, ce sont juste les 6 points qui, je pense, sont extrêmement importants. Quelles autres techniques jugez-vous important de rappeler ?
Astuce : une calculatrice em / px
Piotr Petrus a développé une calculatrice nommée Em Calculator. En effet lors de la construction d’un site et d’une feuille de style, il est très important de faire attention aux unités employées pour la police d’écriture car cela a un impact direct sur les propriétés css enfants de la balise parent. De ce fait la police d’écriture du paragraphe p est directement liée à celle de body. Il est donc bien difficile de savoir, quand on construit sa feuille de style, comment convertir une police en pixels vers son équivalent en unité em.
L’Em Calculator va vous permettre de faire la conversion entre ces unités et de voir quelles seront les conséquences d’un changement de taille au niveau de la balise parent.
Je me suis notamment inspiré d’un article de Travor Davis pour la rédaction du présent billet. Les nombreux liens très intéressants ont quant à eux été trouvés chez Guillaume Bizet (qui m’a aussi fait découvrir la calculatrice em/px) et chez Vincent Battaglia. Thanks!
Si vous constatez des choses à corriger, ajouter, retirer, modifier ou préciser, n’hésitez surtout pas à me le faire savoir.
Je vous laisse découvrir l’astuce inutile mais utile de Mistertel pour envoyer une lettre sans utiliser de timbre…