CSS : 50 outils, 13 raisons, 6 techniques, la pagination, les variables et la calculatrice
22.04.2008 | 19 Commentaires | 468 lectures |
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
Tant qu’Internet Explorer ne supporte pas 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…
My YouTube...
My Flickr...
Terrible !!!
Bon, honnetement j’ai le cerveau en vrac après ton article !! Très bien par contre, mais j’avoue mes limites… ;)
Pour ce qui est du conseil de Mistertel, excellent, mais si trop diffusé et utilisé, ils vont trouver une parade …
Mais un article de qualité comme toujours
Juste pour m’abonner à ce billet, j’ai oublié de cocher avant
Roooh… Et le clearfix ? Et les contexte de formatage ?
Allez un petit article de mon cru :
http://smashingcoding.com/2007[...]c-les-css/
@Séverin : J’savais pas que tu étais éditeur sur Smashing Coding ! Ca c’est la classe internationale (ou pas). Non mais tu vois, je fais en sorte de rester à un niveau relativement accessible hein ! C’est pas un blog de dev (ni de photos d’ailleurs) alors j’aborde quelques sujets mais je reste assez soft. En plus je me suis inspiré d’un article anglophone, je voulais pas trop traduire « float » par « flotteur » ou « flottant », etc… Enfin bref c’est la merde
Toi le prochain coup tu vas en avoir des capotes 
He oui, c’est la classe (ou pas).
Je comprends le truc, mais le clearfix ça me parait plus simple que le float pour annuler un float… Enfin, point de vue de dev
Oula, dangereux ta dernière phrase… Mais avec plaisir
Pour ce qui est des capotes, la version 2 est actuellement en bureau d’études (ma chambre)
J’ai remanié le logo, les polices de caractères et le slogan 
La phase de tests s’avère être plutôt prometteuse pour l’instant 
Préparez vous à passer commande prochainement !
PS : Les capotes seront offertes aux participants de la soirée Blogueurs des Alpes (surtout aux participantes KrKrKr)
Paul, je pourrais en avoir une? C’est pour ma collection perso « capotes NightAngel »
Hihi à utiliser, tu sais avec qui
Bisoussss tireur d’élite !!!
euh Paul,t’as un pôle réclamation pour les capotes?
testes bien la version 2 car la version 1 n’est malheureusemen aussi résistante que ce que tu m’as vanté.
par contre même si je suis pas à la soirée,j’ai le droit aussi aux capotes version 2???
Justement nous en parlions hier soir … la version deux est beaucoup mieux ^^
Un petit coucou matinal pour te dire que tu occupes toute la place sur mon blog ce matin, spéciale dédicace à mon petit loulou préféré (pour le coup je suis vraiment grillée) pas grave!!!
Je t’embrasse
Comme dirais Caro… C’est Meugnon l’amouuuuur !!!
Heu Maiwenn là je crois qu’il va falloir arrêter de délirer deux minutes.
Désolée de casser l’ambiance… lol
Et pis me réponds pas avec des « Haaaan j’fais ce que je veux.. » jdisais pareil pendant ma crise d’ado à 13ans.
Alors FLÛTE!
Scène de famille en plein blog …. Détendu … :p
Non mais t’inquiète pas ça va pas partir en live, c’est juste que là y’a des limites à pas franchir!
Vive la crise de la quarante à cause de… nan je dis pas ça va pas être cool.
Désolée
mais il y a des choses qui ne rentrent pas dans mes moeurs, il faut que je l’exprime car on est libres de le dire, même si ça ne plait pas! Et d’ailleurs des actions qui ne me plaisent pas se font, sans que j’ai quoi que ce soit à dire, je le sais je l’avoue, tant pis je le dis quand même…
Bisous à tous
Oups mais c’est la guerre ici. Mon chéri on ne peut plus rien faire ça va plus je vais la répudier si ça continue
Bisous à tous et à toutes
Bon Caro faut se détendre, y’a pas l’feu au lac comme ils disent à Genève !!!
Tout va bien enfin de mon côté c’est OK
PTDR … non c’est sur mais il faut y mettre plus d’accentuation : Il y aaa paaaas le feeeuuuuuu auuuuuu laaaaccc Hein !
Bref … Caro, si tu as des « comptes à régler », je ne pense pas que ce soit le lieu ^^ Ici c’est CSS, ou bien la la limite la poste et ces astuces :p
Mais je trolle moi mon petit Monsieur
!
