Stephan a écrit :
Après tests, il semble que le @media screen, projection ne masque rien du tout à Internet Explorer. 
De toute évidence on a raté quelque chose. 
En effet, ce n'est pas dans la règle
@media que ce filtre marche. C'est dans la règle
@import. Ce qui permet de faire :
<link rel="stylesheet" type="text/css" href="common.css" />
Pour appeler une feuille qui sera lue par tous les navigateurs (sauf évidemment les IE
3.0, Mosaïc, etc. qui datent d'
avant CSS). Le filtrage se fera dans cette feuille, en jouant sur :
- la règle @import qui exclut les navigateurs anciens (IE4, NS4)
- les guillemets qui excluent ou incluent les IE5.x Mac
- les medias qui excluent les IE5.x et plus Windows.
Pour exclure les navigateurs anciens, les IE Windows, mais admettre les IE5.x Mac :
@import url(advanced.css) screen, projection;
foo {
...
}
la règle @import vise une 2e CSS qui :
- ne sera pas lue par les navigateurs anciens (Windows : IE4, NS4.7), à cause du @import;
- ni par les versions plus récentes d'IE Windows (IE6.0, IE5.5, IE5.0), à cause des medias ajoutés à la règle @import.
- sera cependant lue par IE5.x Mac, à cause de l'absence de guillemets simples.
Le reste de la feuille peut contenir des règles CSS de base (
foo {...}) à la portée des navigateurs qu'on vient d'exclure des styles avancés.
Pour filtrer également IE5.x Mac (et IE5 OSX), en théorie, il suffirait d'ajouter des guillemets simples :
@import url([b]'advanced.css'[/b]) screen, projection;
.foo {
...
}
Et pour ne filtrer au contraire que les navigateurs anciens (IE4, NS4) et accepter les IE5.x Mac et Windows, autre petite modification: on enlève les medias et on modifie les guillemets.
@import url([b]"advanced.css"[/b]);
.foo {
...
}
Ou bien :
@import url([b]advanced.css[/b]);
.foo {
...
}
Pour filtrer les navigateurs anciens (IE4, NS4) et les IE5.x Mac, mais accepter les IE5.x et 6.0 Windows.... Voyons... Logiquement, on ne met pas de media, et on utilise les guillemets simples dans la règle @import
:
@import url([b]'advanced.css'[/b]);
.foo {
...
}
Cette utilisation d'@import permet également d'ajouter les CSS spécifiques aux autres médias (print, handheld, speech) qui ne seront pris en compte que par les navigateurs concernés.
Sinon, une solution plus radicale pour exclure toutes les versions d'IE Windows et Mac (y compris IE7 beta 1):
<link type="text/css; charset=ISO-8859-1" ... />
Il est possible que certains validateurs coincent. Cette syntaxe est un peu biscornue, mais elle est parfaitement conforme aux différentes normes concernées
Enfin, une solution plus pointue, si on pratique la négociation de contenu : adresser deux CSS différentes (et si nécessaire deux structures différentes) selon que le navigateur déclare accepter le content-type
application/xhtml+xml (navigateurs modernes) ou non (navigateurs anciens, toutes les versions d'IE, robots divers).
Remarque pour Stephan : c'est le media
all qui filtre IE5.x Mac avec la règle @media. Mais "
all" n'est pas un très bon média pour des styles
screen
<edit> Une
page test sur ces @import, mais sans garantie qu'il ne s'y est pas glissé une erreur typo. Elle date un peu.</>
Modifié par Laurent Denis (18 Aug 2005 - 09:45)
