| www.lehollandaisvolant.net | ||||
| Ubuntu | Windows | Tutoriels | Pokemon | Divers |
« Faire ça en Javascript, c'est bien ; le faire en CSS, c'est de l'Art ! »
On m'a dit ça une fois, je crois que c'était Rochdi…
Sommaire
Dans ce tuto, je vous donnerais le code CSS et xHTML pour faire des choses que l'on fait normalement en JavaScript par exemple.
Si vous voyez des des effets étranges sur ce site, vous les retrouverez ici.
Je précise que la plus part du temps, je n'ai rien inventé. Je me suis inspiré de choses déjà existantes et je mettrait mes sources, cependant, j'ai amélioré à ma guise le code.
J'ai indiqué la compatibilité suivant les navigateurs. Les versions testés sont : Firefox 3 & 3.5, Internet Explorer 8,7 Opera 10, Safari 4, Chrome 3.
Pourquoi faire ça en CSS alors que l'on peut le faire en JavaScript ? En clair : pourquoi faire simple quand on peut faire compliqué ?
J'ai récemment lu une réponse à certaines de ces astuces qui disait « le css sert avant tout au design, pour le reste il faut prendre les JavaScript. » Je suis d'accord mais, tout comme une grande partie des internautes bloquent les fenêtres intempestives ou les publicités (Adblock, dans Firefox par exemple), beaucoup bloquent les scripts. Dont les JavaScript.
Pour vous donner une idée, les deux extensions les plus utilisées pour Firefox sont Adblock Plus (pour effacer les pub) et no-scripts (qui bloque les scripts). Si les scripts sont bloqués, plus de JavaScript. Les CSS peuvent se désactiver (désactivation des styles), mais ça ne sert à rien (sauf éventuellement les personnes malvoyantes). Les CSS ne sont pas dangereux : les CSS ne peuvent pas êtres des codes malveillants.
Voilà pourquoi je préfère utiliser les CSS plutôt que du JavaScript. En plus, c'est plus classe :-)
Ce que cette page est censé apporter, ce sont des bouts de codes, quelques explications ainsi que des exemples à chaque fois.
Mon menu est inspiré de : cette page ; cela dit… Désormais je fais mes menus déroulants sans aide.
Compatibilité :
Principe : on utilise une liste <ul> dont les éléments <li> seront placés horizontalement les un à coté des autres grâce à la propriété float. Les <li> sont affichés en block (display: block) et avec une largeur fixe.
On ajoute ensuite les sous menus (les sous listes) dans chaque <li> du menu.
Ces sous-listes, pour n'êtres visible que lors du passage de la souris seront caché : l'élément conteneur, le <li> du menu aura une hauteur défini et on cache se qui dépasse (overflow: hidden). On utilisera ensuite le pseudo-classe :hover sur les <li> de la liste principal auquel on applique une hauteur automatique height: auto.
Compatibilité : (IE 8 seulement)
Principe : mon popup est tout bête : on affiche l'image en petit (taille fixe), et lorsque l'on maintient le clic dessus, on l'affiche en grand (taille auto).
Pour éviter que toute page se déforme, il est nécessaire aussi de créer un <div> contenant l'image, ayant les dimensions de l'image en petit. Ce <div> sera en positionnement relatif, tout comme l'image devra l'être lors du maintient du clic :
Compatibilité : (3+) (10) 
Rien de plus simple. En Css3, la nouvelle propriété rgba(xxx, xxx, xxx, .x) permet d'utiliser directement la transparence.
Cette solution marche avec la plupart des navigateurs à jours (sauf IE, évidement). Le problème c'est que si vous affichez votre page dans une autre navigateur, le rgba() sera ignoré ! Transparence totale donc. On doit donc mettre deux fonds : une pour les navigateurs compatibles que le navigateur en priorité et une autre utilisée le cas échéant.
Cela forcera le navigateur à utiliser le Alpha si possible, sinon il utilisera la couleur sans transparence.
Cette technique compliquée ajoute le navigateur Opera 9.x à la liste des navigateurs compatibles. L'inconvénient, c'est qu'il faut intervenir sur le HTML (ajout d'un <div> vide).
Cette technique est directement inspirée de : http://www.hedgerwow.com/360/dhtml/css-opacity-inherit.html, je ne fais ici que l'explication, quelque peu sogrenue….
Compatibilité :
Principe :On crée un premier <div> contenant le texte mais sans couleur de fond. Au début de ce <div> on va en placer un autre que l'on fermera tout de suite. C'est lui que l'on va étirer au bord du premier et via un z-index: -1, on le placera en arrière du texte et on lui donnera une couleur de fond, ainsi que l'opacité réduite.
De cette manière, le <div> semi-opaque sera sous le <div> contenant le texte : au final, on aura l'impression d'avoir un seul <div< avec un fond transparent comme s'il s'agissait du RGBA.
Compatibilité : Cette technique marche pour IE 7 & 8.
IE ne reconnais pas la propriété opacity. Elle connais cependant une propriétée non officiel qui fait le même effet : filter:alpha().
Cette propriété marche comme la technique de l'opacité (on doit créer un <div> supplémentaire).
Pour l'utiliser, c'est très simple : remplacez simplement
par
Utiliser une image semi transparente pour image de fond. (comme si personne n'y avait pensé :D)
Je ne sait pas si le titre de ce paragraphe est assez clair, donc je vous propose directement mon exemple pour comprendre de quoi je parle. En fait, si on a une image ronde, on voudrait que le texte entoure l'image de façon circulaire, et non carrée. Cette astuce simplissime permet cela.
Compatibilité : (IE toutes versions)
Principe : on a une grande image et que l'on veut que le texte entoure bien l'image : il suffit de découper l'image en plusieurs parties et de les recoller manuellement.
Chaque morceau d'image à donc une largeur différente qui fait que le texte s'adaptera à chaque image et non à l'image de départ.
Le code est super simple : il suffit de mettre chaque image en float d'un coté et de leurs donner une marge nulle en haut et en bas :
Il faut cependant réduire la largeur de l'image en retirant les « blancs » inutiles.
Un autres exemple ici.
Inspiré de http://www.commentcamarche.net/faq/sujet-19477-popup-en-css-sans-javascript
Compatibilité : (IE 7, 8)
Principe : pour faire une bulle sur un texte ou autre, on connait la propriété HTML title. Le problème, c'est que cette bulle n'est absolument pas personnalisable.
Ce que l'on fait, c'est faire la même bulle, mais à l'aide d'un <span> qui lui est totalement personnalisable !
En fait, on crée deux <span> l'un dans l'autre. Celui à l'intérieur est caché via CSS. Lorsque l'on passe la souris au dessus du <span> extérieur, on affiche le <span> intérieur. Simple. Il faut juste appliquer les bon positionnements… et il fallait y penser !
Évidement, nous avons là un popup très basique, mais on peut aller bien plus loin et ajouter couleurs, images et bordures. Les possibilités sont énormes et n'ont de limites que votre imagination. En attendant, voici ce que donne la mienne, d'imagination : exemple 9.
Alors celle là… Un vrai casse tête !
On pourrait penser que mettre deux colonnes de hauteur identique est simple, mais il n'en est rien ! Ce ne sont pourtant pas les techniques qui manquent, mais chacune d'elles ont des avantages et des inconvénients. À ce jour, seule l'utilisation d'un tableau permet d'avoir un design hautement personnalisable et très bien supporté par les navigateurs. Mais… Les tableaux ne sont pas recommandés par le W3C pour le design.
Voici donc plusieurs alternatives :
Compatibilité :(IE toutes versions)
Principe. Cette technique est connue : on met la petit colonne en flottant à gauche, sans bordure, largeur fixe.
On ajoute une colonne de droite à largeur variable avec une marge à gauche de la taille de la petite colonne.
Ensuite, on met le tout dans une autre boîte <div> (elle contient donc la colonne et la partie principale). Cette boite aura une image de fond, mais seulement sur le coté gauche !et c'est cette image qui simulera le fond et la décoration de la petite colonne.
Pourquoi ça marche ?Cette astuce marche car on applique une image de fond au <div> contenant les deux colonnes. Or, ce <div> là prendra toujours la hauteur de la colonne la plus grande (à condition de mettre un petit <br/> avec un clear: right; à cause de la colonne flottante). Or n'est-ce pas ce que nous voulons ?
Le code, je ne le donnerais pas ici, cette astuce est si connue que le web regorge de tutoriels pour celle là. De même que d'exemples.
Compatibilité :(IE toutes versions)
Principe : cette technique est directement inspirée de http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/. Elle utilise la bordure de la grande colonne comme fond de la petite. Pas besoin d'image. Il faut mettre le fond de la petite colonne de la même couleur que le bord de la grande. Le bord de la grande est de même dimension que la largeur de la petite colonne.
Le code est fourni sur le lien, mais je la remet ici, en entier :
(ici la colonne de gauche n'a pas exactement la même largeur que la bordure car il faut compter en plus les marges (margin & padding))
Compatibilité :(IE 8 seulement)
Principe :On sait que les tableaux permettent une personnalisation très puissante et ont justement des colonnes de même hauteurs. Cependant, le W3C préfère qu'on ne les utilise pas pour la mise en page.
Bon, ils ne veulent pas de tableau en html ? Très bien : fessons-les en CSS !
On utilise des <div> : un que l'on transformera en tableau et les autres en cellules du tableau à l'aide des display: table et display: table-cell. Ça peut paraître minable comme solution, mais elle existe.
Compatibilité :
Principe : On utilise, un positionnement absolu pour la petite colonne, et une marge sur le côté pour la grande. Le tout est placé dans une <div> afin que le haut des deux soit commune. La suite ? Étirer la colonne la plus petite jusqu'en bas graçe à un bottom: 0; top: 0;. La colonne possède également une largeur fixe.
Compatibilité : (IE 8 seulement, mais absolument sans incidence pour IE6 & 7. Simplement de l'esthétique.)
Principe : On utilise une double bordure : l'une formée par la propriété border, et l'autre par la propriété mal connue “outline”. Cette dernière permet d'afficher une bordure supplémentaire à l'élément.
Attention, si vous utilisez une bordure arrondie, il faut aussi mettre l'outline en arrondi. Pour le moment, seul Firefox permet cela. Il suffit d'utiliser -moz-border-radius: 15px;, et -moz-outline-radius: 17px; pour arrondir le “outline”.
On pourra remarquer que j'ai mi 17px pour l'outline, et non 15. Pour un effet optimal, la rayon de l'outline doit être égale au rayon du border + 2 × l'épaisseur du bordure (ceci afin de compenser le fait que l'outline doit entourer 2px de plus : ceux de la bordure !)
Compatibilité : (IE 8 seulement)
Un titre pour ses paragraphes, c'est simple à faire, il existe les balises <h1>, <h2> jusqu'à <h6> exprès pour cela. Mais comment les numéroter ?
Il est évidement possible de mettre directement les numéros dans le titre, en les tapant simplement au clavier, mais cela vous oblige à changer tous les titres une par un si un jour vous ajoutez un chapitre en plein milieu ! C'est pas très pratique…
Je vais vous montrer une astuce très peu connue mais qui existe ! Elle est un peu technique mais facilement compréhensible.
Le CSS permet d'appliquer un compteur sur chaque élément. Chaque fois que l'élément apparaître à l'écran, le compteur s'incrémentera. La valeur de compteur peut ensuite être placée devant chaque menu. Ainsi, votre numérotation sera faite de manière automatique !
Et le CSS qui va avec :
Les compteurs sont nommés comme on veut. Je les ait nommé count0 et count1. Voici le code expliqué rapidement ligne par ligne :
On peut mettre autant de compteurs que l'on veut. Il suffit de ne pas se perdre. Mieux : on peut même faire des listes comme « II.A.1 » en mettant tous les niveaus des puces en même temps. Par exemple, voilà le CSS et un exemple (même HTML que ça dessus)
Je vous ait dis que l'on mettais ce que l'on voulait dans content() : on peut très bien mettre les deux compteurs.
Compatibilité :
Pour centrer un élement horizontalement, on lui donne une largeur fixe, et une marge extérieure "automatique" sur les cotés. Le navigateur fera en sorte que les marges sur les cotés seront de même taille, donc de façon à center l'élément.
Pour le centrage vertical, c'est une autre histoire. Biensûr, on connait la propriété vertical-align, mais elle ne marche pas pour centrer par exemple un dans un autre >div< (elle ne marche que dans les tableaux et dans les éléments de type inline quand une hauteur de ligne est déclarée).
Alors comment faire ?
Ce que l'on veut, c'est centrer un bloc, par exemple un >div<. Pour être plus précis, on veut que le point central du bloc (l'intersection des diagonales) soit au milieu de la fenêtre du navigateur.
Or, ce que l'on fait quand on met un margin: 50% auto auto 50%;, c'est placer le coin supérieur du bloc au centre de la page :
Maintenant, observez le point central du bloc bleu : la distance centre-du-bloc-blue / centre-de-la-page est exactement égale à la moitié du bloc bleu : 
Alors ?
Alors on va mettre une marge négative au bloc bleu : une marge en haut et à gauche qui vaut exactement la moitié de la taille du bloc bleu : 
En terme de code, c'est très simple :
Et le CSS qui va avec :
Compatibilité : (IE 6,7,8)
Cet astuce vous permet de mettre votre adresse E-mail dans une page web sans risquer de vous faire spammer ! En effet, il ne faut jamais poster votre E-mail dans une page web : les spammeurs fabriquent des logiciels qui cherchent tout ce qui ressemble à une adresse E-mail, et y envoient des tonnes de spam… ! On a différentes solutions contre ça :
J'ai trouvé ces techniques sur la page http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/. Il y en a deux en CSS. On les utilise séparément (d'après le test décrit dans le lien, elles sont toutes les deux très efficaces contre le spam). En bas de cette page, vous voyez mon E-mail. J'ai fusionné les deux solutions pour encore plus de sécurité (mais encore une fois, IE n'affiche pas ça correctement, et je dois mettre une solution de rechange pour lui. Je n'expliquerais ici que les méthodes séparés, si vous êtes curieux, regardez le code source de ma page :-)
Celle-ci est super simple : par exemple on écrit « ruojnoB » et ça affiche « Bonjour ». En CSS on peut inverser l'ordre des lettres.
Le fait d'avoir écrit « ruojnoB » permettra de voir « Bonjour » à l'écran. En revanche, un robot qui explore le code source ne verra que le texte à l'envers. Si l'on applique cela à une adresse E-mail, le robot ne trouvera pas votre adresse et vous ne risquez absolument rien !
À aucun moment votre adresse mail ne se retrouve à l'endroit dans le code source !
Simple aussi : on écrit le début de notre adresse Mail, on insère quelques lettres bidons puis la fin de l'adresse. En CSS, on cache le texte bidon, fessant en sorte de n'afficher que notre adresse, qui, encore une fois ne se retrouve jamais tel quel dans le code source.
Ici le texte à l'intérieur du span n'est pas affiché à l'écran, il sert juste à scinder notre E-mail en deux, pour qu'il ne soit pas affiché en clair dans le code source !
Voici des liens utiles quand on fait des CSS : le validateur CSS du W3C, ou des sites d'apprentissage comme Alsa Creations. Mais surtout, voici tout un tas de liens avec des effets plus ou moins beaux :
Icônes des navigateurs de Morcha
L'ensemble de ce site est sous licence Creative Commons "Paternité".