Plutôt que de présenter l'intégralité des sélecteurs, propriétés et attributs CSS, je propose ici
des réalisations pratiques qui combinent différents éléments CSS afin d'obtenir des effets pratiques,
originaux ou impressionnants facilement utilisables sur un site Web afin de lui conférer une personnalité
propre.
Il est évident que CSS est d'autant plus efficace que le site est dynamique, c'est-à -dire que le contenu
est géré dynamiquement en fonction des interactions de l'utilisateur. Cela est le plus souvent obtenu
à l'aide d'un langage de script, PHP ou JavaScript. Les exemples proposés ici reposent toutefois
dans leur immense majorité sur un contenu statique rendu dynamique grâce à CSS : ces exemples sont
donc applicables à tout site conçu en HTML, sans recours à des scripts.
Ainsi, certaines des astuces proposées permettent d'éliminer le recours à des scripts, d'accélérer le
chargement des pages et de diminuer le nombre de requêtes vers le serveur.
Les propriétés CSS3 avancées, non encore totalement standardisées, sont intégrées dans les différents
navigateurs de façon un peu aléatoire selon le bon vouloir de leurs développeurs. Selon la version d'un
navigateur particulier, certaines fonctions peuvent n'être prises en charge que partiellement, voire pas
du tout, si bien que les exemples proposés ici pourraient ne pas fonctionner.
Tous ces exemples fonctionnent sur tous les navigateurs récents, avec toutefois parfois nécessité de recourir
aux préfixes dédiés (voir ci-dessous). Chaque exemple signale quels navigateurs sont compatibles au
moment de la rédaction de cet ouvrage, en se fondant sur l'élément le plus restrictif (en pratique, le
plus souvent les transformations 2D et surtout 3D). Plusieurs ressources en ligne peuvent vous aider à
vérifier la compatibilité de tel ou tel navigateur :
Il est capital de bien comprendre l'importance des navigateurs, car selon les cas un nombre non négligeable de vos visiteurs pourrait ne pas être en mesure de voir les effets que vous voulez réaliser. Le tableau suivant montre les parts de marché des principaux navigateurs (source : W3School.com, août 2013).
| Navigateur | Version optimale/Part de marché | Versions antérieures |
|---|---|---|
| Chrome | 26+/50.5% | 2.4% |
| Firefox | 22+/21.4% | 6,8% |
| Internet Explorer | 10+/15.4% | IE9/2.8% ; IE8 et-/5.4% |
| Safari | 6+/3.1% | 0.9% |
| Opera | 12+/0.7% | 1.1% |
Le plus gros problème est en pratique provoqué par Internet Explorer 8 et les versions antérieures, les autres navigateurs permettant de contourner le problème à l'aide de leurs préfixes dédiés comme nous allons le voir maintenant.
Les exemples de code proposés ici ne comportent que les propriétés et fonctions CSS « brutes ». Leur bon fonctionnement est étroitement lié au navigateur sur lequel vous allez les essayer. En raison de l'absence de standardisation complète de certains modules CSS au moment de la rédaction, il est souvent indispensable de recourir au préfixe dédié du navigateur concerné et donc de compliquer le code en ajoutant des définitions préfixées pour chaque navigateur si vous voulez disposer d'une portabilité maximale.
| Chrome, Safari | Firefox, Flock,... | Opera | Internet Explorer |
|---|---|---|---|
| -webkit- | -moz- | -o- | -ms- |
Par exemple, au moment de la rédaction de ces pages, la propriété transform n'est prise en charge
nativement que par Internet Explorer 10, Firefox et Opera (et pour ce dernier, uniquement les
transformations 2D). Safari et Chrome nécessitent l'emploi du préfixe -webkit-, Internet Explorer 9
le préfixe -ms- (et uniquement pour les transformations 2D).
Cela signifie que, pour fonctionner sur un maximum de navigateurs, la définition :
{transform:rotate(-5deg);}
devra être réécrite en :
{
transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-o-tranform :rotate(-5deg);
}
Il existe heureusement une rétrocompatibilité : préfixer transform par -moz- pour gérer les anciennes
versions de ce navigateur n'empêchera pas son fonctionnement dans les dernières versions.
Cela alourdit fortement l'écriture du code CSS. Il existe toutefois plusieurs solutions à ce problème :
Vous saisissez (ou copiez-collez) votre code dans une fenêtre, et dans la seconde apparaît le code préfixé comme il convient. Un tel outil se trouve par exemple à l'adresse http://prefixmycss.com/, mais il en existe d'autres.
Un des plus célèbres est sans doute prefix-free (
http://leaverou.github.io/prefixfree/). C'est un petit fichier JavaScript (2 Ko) développé par Lea Verou,
dont le rôle est d'ajouter automatiquement des préfixes propriétaires nécessaires à la reconnaissance
de certaines propriétés de la spécification CSS3 par les différents navigateurs modernes.
prefix-free est très simple d'emploi. Ajoutez simplement la ligne
< script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js">
juste après la déclaration du CSS.
Vous pouvez également installer ce script sur votre site et l'appeler depuis cet emplacement
(la méthode employée sur tout ce site) :
< script type="text/javascript" src="prefixfree.min.js">
Reportez-vous au site officiel de prefix-free pour plus de détails.
Enfin, un dernier point : la majeure partie de ce site a été récemment rendue adaptative et peut être examinée avec n'importe quel périphérique. Toutefois, certains des tutoriels présentés ici emploient encore des dimensions fixes qui nécessitent un défilement. Tous les rééecrire afin de les rendre totalement adaptatifs ne fait plus partie de mes priorités, j'espère que vous le comprendrez et me pardonnerez.
|
|---|