introduire
Il ne fait aucun doute que tout concepteur ou développeur Web qui tente d'utiliser CSS constatera que différents navigateurs nécessitent des déclarations de style différentes. Ces désagréments sont dus aux différents degrés d’intégrité de l’implémentation CSS selon les navigateurs et leurs versions. Le CSS conditionnel est une solution à ce problème, reprenant l'idée de la syntaxe de commentaire conditionnel d'Internet Explorer et l'intégrant dans la déclaration CSS.
Utilisation de base
Le CSS conditionnel est principalement utilisé pour indiquer si une instruction CSS particulière doit être utilisée dans un navigateur particulier. Bien sûr, vous ne souhaitez pas faire cela très souvent, mais cela peut être très utile lorsque vous devez cibler un navigateur. Vous pouvez voir dans la liste de support U4EA que la plupart des navigateurs prennent en charge cette méthode.
Toute déclaration ou bloc CSS peut être préfixé par des déclarations conditionnelles. Il existe trois types de préfixes de base :
[si {!} navigateur]
[si {!} version du navigateur]
[si {!} conditionne la version du navigateur]
! - la négation de l'instruction (par exemple NOT) - facultatif
navigateur - le navigateur pour lequel la déclaration est faite
'IE' - Internet Explorer
'Gecko' - Navigateur basé sur Gecko (Firefox, Camino, etc.)
'Webkit' - Navigateurs basés sur Webkit (Safari, Shiira, etc.)
'SafMob' - Safari mobile (iPhone / iPod Touch)
'Opera' - Le navigateur d'Opera
'IEMac' - version Mac d'Internet Explorer
'Konq' - Konquérant
'IEmob' - IE pour mobile
'PSP' - Playstation Portable
'NetF' - Net Front (Désolé pour l'ignorance de Sugar and Tomatoes, je ne sais pas ce que c'est)
version - la version du navigateur à cibler
condition - opérateur arithmétique
lt - moins de
lte - inférieur ou égal à
eq - égal à
gte - supérieur ou égal à
gt - supérieur à
Quelques exemples d'instructions conditionnelles :
// Exemple de syntaxe CSS conditionnelle
[si IE] - si le navigateur est IE
[if ! Opera] - si le navigateur n'est pas Opera
[si IE 5] - si le navigateur est IE 5
[if lte IE 6] - Si le navigateur est IE 6 ou inférieur (IE 5, IE 4, etc.)
[if ! gt IE 6] - équivalent à l'instruction ci-dessus, si la version du navigateur n'est pas supérieure à IE 6
Parce que de nombreux cas pensent que div est une classe de boîte avec une largeur et un remplissage. Cela devrait donc également se comporter correctement dans IE 5 (je vois que beaucoup de gens ont abandonné le support d'IE 5, mais c'est un exemple classique). Le modèle de boîte d'IE 5 n'est pas standard, voici donc comment le résoudre à l'aide du CSS conditionnel :
// Exemple de modèle de boîte CSS conditionnelle
div.box {
largeur : 400 px ;
[si IE 5] largeur : 600 px ;
remplissage : 0 100 px ;
}
Comme vous pouvez le constater, le CSS conditionnel vous permet de conserver un seul fichier CSS au lieu de plusieurs fichiers nécessitant l'utilisation des commentaires conditionnels d'IE. Cela permet de rationaliser la maintenance et de rendre le code plus clair.
En allant plus loin, une caractéristique importante du CSS conditionnel est que lorsqu'il trouve une déclaration CSS @import, il ouvre et insère automatiquement le fichier qui doit être importé. Cela réduit le temps de chargement des pages car le navigateur n'a besoin de faire qu'une seule requête HTTP pour le fichier CSS.
Bien que le CSS conditionnel soit principalement utilisé pour différentes versions des navigateurs IE, le CSS conditionnel est également très utile lorsque vous rencontrez des bugs dans d'autres navigateurs qui sont difficiles à corriger (principalement en utilisant Javascript pour corriger). Les exemples incluent des bogues d'image d'arrière-plan dans Firefox 2 et Safari 2 qui ne prenaient pas en charge « display: inline-block ». Ces bugs ont été corrigés dans les dernières versions de ces navigateurs, mais lorsque ces navigateurs occupent une certaine part de marché, la rétrocompatibilité est très importante.