Masquer CSS à IE5 ?

C'est suite à la lecture de When Can We Hide From IE5/Win? publié par Dan Cederholm sur son blog le 17 décembre 2004 que j'ai commencé à cogiter.

En résumé, Cederholm se pose la question suite à une conversation avec Douglas Bowman et Ethan Marcotte, ce dernier étant allé plus loin dans la réflexion en décidant carrément de cacher sa feuille de style à IE5/Mac. Il explique sa décision dans IE5/Mac mattered.

Qu'en pensez-vous ?

En complément : Clarification Regarding IE5/Win et Don’t Care About Market Share
Modifié le 30 Jan 2005 - 05:13

Quelques éléments de réflexion en vrac :
- le coût de développement d'une CSS minimale destinée à des navigateurs de ce type est-il dissuasif ? (A estimer au cas par cas)
- dans quelle mesure cette CSS minimale n'est-elle pas dans une logique similaire à celle des CSS par media ?
- le procédé permettant de masquer une CSS "évoluée" au navigateur visé est-il un hack (et donc une source potentielle de problèmes ultérieurs), ou l'application d'un mode de liaison CSS qu'il ignore ?
- faut-il vraiment continuer à raisonner en termes de présentation unique pour un site ? Il me semble qu'il y a là un carcan dans lequel s'enferment beaucoup de designers.

PS: merci d'avoir rassemblé ces excellentes références
Modifié le 30 Jan 2005 - 05:29

Au fait, qui utilise IE5/Win ?

* Quelqu'un utilisant un ordinateur faisant partie d'un parc informatique négligé.
* Quelqu'un ignorant comment mettre son ordinateur à niveau.

Dans les deux cas, nous sommes victimes de l'incompétence ou de l'ignorance, et non du navigateur obsolète.

On s'arrache déjà les cheveux à coder pour qu'IE6 se dégrade élégamment, pourquoi se péter les dents à coder pour IE5/Win ?

Le cas d'IE5/Mac est légèrement différent. Les utilisateurs de Mac OS8 et Mac OS9 n'on guère le choix s'il veulent une expérience satisfaisante. Netscape 6 est viable, Mozilla est souvent trop lourd et Opera 6 est loin derrière.

Laurent Denis a écrit :

- le procédé permettant de masquer une CSS "évoluée" au navigateur visé est-il un hack (et donc une source potentielle de problèmes ultérieurs), ou l'application d'un mode de liaison CSS qu'il ignore ?

Je pense plus à un mode de liaison qu'il ignore, même si ce mode tient un peu du "hack"

Par exemple :

/*	"Underground" skin screen master
	------------------------------
	Author:	Ethan Marcotte
	Version:	2004.05.28
	Haiku:	bunny likes flowers.
		brings the daisy to his mouth
		...chomp, it is no more.
\*/

@import url("prime.css");
@import url("calendar.css");
/* END hide from Mac IE5 */

Source : http://sidesh0w.com/weblog/2004/12/16/ie5mac_mattered/#comment-326
Modifié le 30 Jan 2005 - 06:37

L'utilisation d'une règle @media dans la feuille de style me semble plus consistante que le hack du \*/...

En utilisant un simple <link>

<link rel="stylesheet" type="text/css" href="highpassfilter.css" />

On pourrait par exemple cacher une feuille de style à IE5/Win de cette façon :

@import "null?\"\{"; 
@import "highpass.css";

Cacher cette même feuille à IE5/Mac de cette façon :

/* Commented Backslash Hack
hides rule from IE5-Mac \*/
@import "highpass.css";
/* End IE5-Mac hack */

Ou la cacher aux deux en combinant les deux filtres :

/* Commented Backslash Hack
hides rule from IE5-Mac \*/
@import "null?\"\{"; 
@import "highpass.css";
/* End IE5-Mac hack */

Laurent Denis a écrit :

L'utilisation d'une règle @media dans la feuille de style me semble plus consistante que le hack du \*/...

Ça m'intéresse. Des suggestions de lecture ?

Ah ! J'ai trouvé : http://w3development.de/css/hide_css_from_browsers/media/
Modifié le 30 Jan 2005 - 10:49

Laurent Denis a écrit :

- faut-il vraiment continuer à raisonner en termes de présentation unique pour un site ? Il me semble qu'il y a là un carcan dans lequel s'enferment beaucoup de designers.

Dans ce cas, il faudrait penser en terme de "présenter à" au lieu de "cacher à".

Stephan a écrit :
Ou la cacher aux deux en combinant les deux filtres :

/* Commented Backslash Hack
hides rule from IE5-Mac \*/
@import "null?\"\{"; 
@import "highpass.css";
/* End IE5-Mac hack */

beurk !

Stephan a écrit :

Ah ! J'ai trouvé : http://w3development.de/css/hide_css_from_browsers/media/

Plus complet sur le support de @media : http://w3development.de/css/assigning_external_css/at_media.html

L'avantage des règles @media, c'est qu'elles servent vraiment à quelque-chose, indépendamment du fait de masquer des styles à tel ou tel navigateur...
Modifié le 30 Jan 2005 - 07:46

Laurent Denis a écrit :

beurk !

On pourrait donc cacher des déclarations à IE5/Mac de cette façon :

@media all { 
tag { 
   property: value; 
}
tag { 
   property: value; 
}
}

Pourquoi encourager l'usage du media all, qui revient à distribuer des règles CSS inutiles un peu partout ?

@media screen { 
tag { 
   property: value; 
}
tag { 
   property: value; 
}
}

Je me pose une question, vous allez surement éclairer mon ignorance :
@media screen et @media all sont supporté mais @media speech par exemple ne l'est pas. C'est ça ?

Donc du côté des supporté :

@media screen
@media print
@media all
@media handled /* ou un truc du genre */

Et du côté des non supportés

@media speech

Et à part ça ??

J'ai bon, dites j'ai bon ? !

Laurent Denis a écrit :

Pourquoi encourager l'usage du media all, qui revient à distribuer des règles CSS inutiles un peu partout ?

Par ignorance je suppose ?

Olivier a écrit :
Je me pose une question, vous allez surement éclairer mon ignorance :
@media screen et @media all sont supporté mais @media speech par exemple ne l'est pas. C'est ça ?

Supportés :
- all
- screen (attention : certains navigateurs pour mobiles également)
- print
- handheld (OpenWave, Nokia, Opera. J'ai un doute pour NetFront)
- projection (opera uniquement, à ma connaissance)
- tv (navigateurs spécifiques web-tv uniquement)

Non supporté et bientôt déprécié :
- aural

Non supporté, mais non encore officiellement normalisé :
- speech

Non supportés, à ma connaissance :
- braille
- embossed
- tty

Hypothétique:
- reader

A l'essai (Opera uniquement à ma connaissance):
- un des précédents + raffinement par media queries
Modifié le 30 Jan 2005 - 09:07

Donc on pourrait avoir un lien qui appelle une feuille "style.css"

<link rel="stylesheet" type="text/css" href="style.css" />

Puis on exclut IE5/Win, IE4 Win et Mac, Ns4 Win et Mac.

@import "null?\"\{"; 
@import "highpass.css";

Ensuite on cache les déclarations à IE5/Mac.

@media screen { 
tag { 
   property: value; 
}
tag { 
   property: value; 
}
}

Qu'en pensez-vous docteur ?
Modifié le 30 Jan 2005 - 10:50

Tu peux sauter l'étape du <link>, inutile, et utiliser directement des @import dans un élément <style>.

Et :

@import "null?\"\{"; 

... reste vraiment très très laid

Il y a un autre moyen d'exclure les versions 5 d'IE tout en conservant la version 6 ?
Modifié le 30 Jan 2005 - 09:21

Il me semble que non, à moins :
- de masquer la CSS à IE5 et 6 (avec par exemple un @media screen, projection)
- et de réappeler la CSS pour IE6 seul à l'aide d'un commentaire conditionnel.

Ouin !
Le commentaire conditionnel, c'est pas un peu de la bidouille aussi ?
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

Je ne connais pas beaucoup !

Olivier a écrit :

Ca serait pas plus simple de faire un truc qui marche pour IE5 ?

bah.. j'ai pas IE5 d'installé sur mon PC pour tester mes pages et ce n'est pas dans mes projets de l'installer. Je fais attention au "box model" et puis c'est tout.

Donc si je recommence, on pourrait avoir un lien qui appelle une feuille "style.css"

<link rel="stylesheet" type="text/css" href="style.css" />

Une feuille de style qui exclut IE5 Win et Mac, puis IE6.

@media screen, projection { 
tag { 
   property: value; 
}
tag { 
   property: value; 
}
}

Et on rappelle une feuille de style pour IE6

<!--[if IE 6]>
<style type="text/css">
@import url("styleIE6.css");
</style>
<![endif]-->

Ça ressemble à ça docteur ?

<edit />
Cette discussion se poursuit ici :
http://forum.alsacreations.com/topic.php?tid=6312&fid=4&p=1#p54966
Modifié par Stephan (19 Aug 2005 - 02:42)

... Et on peut rien faire pour les navigateurs plus anciens ????

Plus sérieusement, je me refuse à entrer dans ce cercle infernal qui consiste à détecter les versions des navigateurs.

Ca n'engage que moi, mais...

- La part des éditeurs est de créer des navigateurs de plus en plus conformes aux standards.
- La part des créateurs de sites est de faire des sites de plus en plus proches des standards.
- La part des internautes est d'utiliser les outils qui se rapprochent le plus des standards.

Si chacun joue le jeu, tout le monde s'y retrouve. Là, j'ai le sentiment que c'est toujours aux créateurs de sites de faire le maximum.

Est-ce bien raisonnable de se torturer ainsi l'esprit, combien faudra-til, à ce rythme là, de feuilles de styles dans 4 ou 5 ans ????