En tant que « bon » intégrateur nous avons à gérer l’affichage pour tous les types de navigateur. Jusque la nous avions toujours la possibilité d’utiliser les commentaires conditionnels IE pour lesquels Microsoft assure qu’ils seront toujours utilisés…. Mais Microsoft et confiance ne rime pas très bien ensemble.
Nous avions aussi la possibilité d’utiliser le javascript ou php pour loader tel ou tel css.
Voici un petit programme qui va peut etre en aider plus d’un. Conditional-CSS et un fichier php qui sera loader en début de page. Il contient les noms des fichiers css à mettre en ligne et permet d’y intégrer des conditions.
Les conditions sont donc directement inclus dans le css :
div.box {
width: 400px;
[if IE 5] width: 600px;
padding: 0 100px;
}
ou encore :
a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;
text-decoration: none;
outline: none;
[if IE] text-decoration: expression(hideFocus=‘true’);
}
le programme permet d’utiliser php mais aussi c# ou c++. Une fois que vous avez un fichier type il vous suffit d’yajouter les différents css à loader vous n’avez donc pas besoin de générer un fichier pour chaque projet, vous pouvez partir du fichier type.
Le script permet de faire des import css conditionnels, de créer des groupes et d’affecter des règles css à un groupe :
[if cssA] ul.li { }
voici la liste des navguateurs supportés :
- IE – Internet Explorer
- Gecko – Gecko based browsers (Firefox, Camino etc)
- Webkit – Webkit based browsers (Safari, Shiira etc)
- ‘SafMob’ – Mobile Safari (iPhone / iPod Touch)
- Opera – Opera’s browser
- IEMac – Internet Explorer for the Mac
- Konq – Konqueror
- IEmob – IE mobile
- PSP – Playstation Portable
- NetF – Net Front
Un nouveau moyen d’utiliser un seul fichier css plutot que un par browser. Et cela permettra sans doute de facilité les ajustement nécessaires à chacun.
On pourrait d’ailleur envisager d’ajouter des conditions de résolution permettant de gérer très facilement les ecran 800*600.
Donnez-nous vos commentaires si vous essayer cette methode.
