Accueil

CSS : 50 outils, 13 raisons, 6 techniques, la pagination, les variables et la calculatrice


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 :razz:

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…

Article rédigé le Mardi 22 avril 2008.


19 Commmentaires
  • avatar

    Mardi 22 avril 2008

    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 … :petard:

    Mais un article de qualité comme toujours :nickel:

  • avatar

    Mardi 22 avril 2008

    Juste pour m’abonner à ce billet, j’ai oublié de cocher avant :oops:

  • avatar

    Mardi 22 avril 2008

    Roooh… Et le clearfix ? Et les contexte de formatage ?

    Allez un petit article de mon cru :
    http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec-les-css/

  • avatar

    Mardi 22 avril 2008

    @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 :lol: Toi le prochain coup tu vas en avoir des capotes :???:

  • avatar

    Mercredi 23 avril 2008

    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 :razz:

  • avatar

    Mercredi 23 avril 2008

    Pour ce qui est des capotes, la version 2 est actuellement en bureau d’études (ma chambre) :lol: J’ai remanié le logo, les polices de caractères et le slogan :ooo La phase de tests s’avère être plutôt prometteuse pour l’instant :non: Préparez vous à passer commande prochainement !

    PS : Les capotes seront offertes aux participants de la soirée Blogueurs des Alpes (surtout aux participantes KrKrKr) :razz:

  • avatar

    Mercredi 23 avril 2008

    Paul, je pourrais en avoir une? C’est pour ma collection perso « capotes NightAngel »
    Hihi à utiliser, tu sais avec qui :razz:
    Bisoussss tireur d’élite !!! :lol:

  • avatar
    nathanaelle

    Jeudi 24 avril 2008

    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é. :lol: :lol: :lol: :lol:
    par contre même si je suis pas à la soirée,j’ai le droit aussi aux capotes version 2??? :oops: :oops: :oops: :oops: :oops:

  • avatar

    Jeudi 24 avril 2008

    Justement nous en parlions hier soir … la version deux est beaucoup mieux ^^ :nickel:

  • avatar

    Jeudi 24 avril 2008

    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

  • avatar

    Jeudi 24 avril 2008

    Comme dirais Caro… C’est Meugnon l’amouuuuur !!! :lover: :lover: :lol: :lol: :lol:

  • avatar

    Jeudi 24 avril 2008

    Heu Maiwenn là je crois qu’il va falloir arrêter de délirer deux minutes.
    :petard:
    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!

  • avatar

    Jeudi 24 avril 2008

    :lol: :lol: :lol:

    Scène de famille en plein blog …. Détendu … :p

  • avatar

    Jeudi 24 avril 2008

    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.

  • avatar

    Jeudi 24 avril 2008

    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

  • avatar

    Jeudi 24 avril 2008

    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

  • avatar

    Jeudi 24 avril 2008

    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

  • avatar

    Jeudi 24 avril 2008

    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

  • avatar

    Jeudi 24 avril 2008

    Mais je trolle moi mon petit Monsieur :D !
    :lol:

Laisser un (gentil) commentaire

Un jour je créerai une radio, elle s’appellera Skyrap et passera du rock.

Blog propulsé par WordPress et développé à l'arrache par moi-même.