28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Le sujet a certainement fait l'objet de quelques débats, mais je ne trouve que des topics qui tournent autour d'IE7 ...

Ma question est plus générale : si un de mes visiteurs arrive sur mon site (tout beau et entièrement mis en page en css) avec un navigateur d'avant-guerre (après tout, c'est son droit !), que se passe t-il ?

Si le navigateur ignore la feuille de style, pas de problème : je lui ai prévu des belles balises hr (!) Mais si la feuille est interprétée partiellement, cela peut devenir gênant, voire déroutant ...

Peut-on faire en sorte de ne pas charger la feuille de style dans ces cas là ?
Modifié par Vero (19 Aug 2005 - 17:10)
Personnellement, j'exclus entre autre Internet Explorer avec un @media screen, projection, puis j'utilise un commentaire conditionnel pour rappeller une feuille de style pour IE6.

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 seulement pour IE6

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

http://forum.alsacreations.com/topic.php?fid=14&tid=1648#p16452
Modifié par Stephan (17 Aug 2005 - 21:17)
Merci Stephan.

A la première lecture, c'est du chinois mais je vais creuser la piste que tu me donnes ...

Alors, toi aussi, tu exclus IE6 ...

Quel intérêt si le style fonctionne avec IE6 : justement, ne pas s'embêter avec les histoires de compatibilité ce qui, certainement permet plus de liberté ?

Mais on en revient à faire une feuille de style par navigateur avec cette méthode ! Je suis un peu d'accord avec Olivier et Dominique (après lecture du topic que tu me proposes)

A la limite, je préfère mettre en place un switcheur (comme sur OpenWeb) et le visiteur choisit si le rendu l'incommode ...

Bon et si je suis bien le code que tu me donnes, c'est media projection qui exclut IE6 puisqu'il n'est pas supporté.

Donc, si je ne veux pas écarté IE6, je lève projection ...

Quant aux commentaires conditionnels, certains navigateurs les lisent ?
(ze savais pas, z'ai dû rater la leçon !)

Smiley cligne Smiley biggrin
Après tests, il semble que le @media screen, projection ne masque rien du tout à Internet Explorer. Smiley confus De toute évidence on a raté quelque chose. Smiley decu
Stephan a écrit :
Après tests, il semble que le @media screen, projection ne masque rien du tout à Internet Explorer. Smiley confus De toute évidence on a raté quelque chose. Smiley decu


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 IE3.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 Smiley murf :

@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 Smiley cligne

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 Smiley cligne

<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)
Vero a écrit :
Quant aux commentaires conditionnels, certains navigateurs les lisent ?
(ze savais pas, z'ai dû rater la leçon !)


Vero : la FAQ, la FAQ, la FAQ ! Smiley ravi
Laurent Denis a écrit :


Vero : la FAQ, la FAQ, la FAQ ! Smiley ravi


Grillée !

Oui, je l'ai vu avant d'aller faire dodo et j'en ai rêvé toute la nuit !

Je venais le dire : la FAQ ... la FAQ !

Ha ! la FAQ ...

Elle n'existait pas encore lorsque j'ai améri ici ... Qu'est ce qu'elle a grandi !
Elle se fait belle !
Bravo ! (on le dira jamais assez ...)

Smiley biggrin
Vero a écrit :

Ah !

Attendons la fée des médias, alors !

Smiley cligne

Merci Laurent Denis. T'es vraiment la fée des médias Smiley lol

upload/196-wand.gif
a écrit :
Ma question est plus générale : si un de mes visiteurs arrive sur mon site (tout beau et entièrement mis en page en css) avec un navigateur d'avant-guerre (après tout, c'est son droit !), que se passe t-il ?
Peut être ceci ? code Morse
Tu penses que je me moque de toi et d"eux"? Rassures-toi, il n'en est rien. je pense qu'il est bon de s'occuper des gens déficients ( et de garder toujours à l'esprit ) mais aussi 90% de la populace qui reste est une somme qui n'est pas à nègliger. Pense à ne pas faire un site "gonflant"
Laurent Denis a écrit :

Pour exclure les navigateurs anciens, les IE Windows, mais admettre les IE5.x Mac :

@import url(advanced.css) screen, projection;

foo {
... 
}


Parfait, ça marche Smiley smile

Laurent Denis a écrit :

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 {
... 
}


hum... fonctionne pas Smiley decu IE/Mac n'est pas filtré Smiley sweatdrop

Laurent Denis a écrit :

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 Smiley cligne

Fonctionne à merveille. Smiley lol

Validé avec succès sur http://validator.w3.org/ et http://www.validome.org/
Stephan a écrit :
hum... fonctionne pas Smiley decu IE/Mac n'est pas filtré Smiley sweatdrop


lol.

J'avais bien fait de préciser "en théorie" Smiley cligne

Un heureux possesseur de Mac pourrait-il confirmer si IE5Mac est filtré par l'une des règles suivantes:


@import'styles.css';

ou le même avec juste un espace supplémentaire : 

@import 'styles.css';

ou :
@import"styles.css";

ou :
@import url('styles.css');


Auquel cas, ce serait l'ajout des descripteurs de media qui neutraliserait le filtrage...

Ou bien le fait que ces filtres ne marcheraient que dans un élément <style>, et non dans une CSS externe...
Modifié par Laurent Denis (19 Aug 2005 - 07:13)
Tiens donc ! Ça fonctionne maintenant !

J'ignore où j'me suis emmèlé les pinceaux Smiley confus

IE/Mac est filtré par les déclarations suivantes :

@import'advanced.css';

@import 'advanced.css';

@import"advanced.css";

@import url('advanced.css');

@import'advanced.css' screen, projection;

@import 'advanced.css' screen, projection;

@import"advanced.css" screen, projection;

@import url('advanced.css') screen, projection;

Je vais refaire des tests pour être certain Smiley lol

Done.

IE6/Win est filtré par les déclarations suivantes :

@import'advanced.css' screen, projection;

@import 'advanced.css' screen, projection;

@import"advanced.css" screen, projection;

@import url('advanced.css') screen, projection;

Voilà. Je pense que ça y est Smiley smile
Modifié par Stephan (19 Aug 2005 - 07:16)
Une précision, au passage, sur la présence ou non d'url+parenthèses, et des guillemets simples ou doubles : toutes ces syntaxes sont également valides en CSS2.1 :
- les guillemets sont optionnels, mais leur présence évite d'avoir à échapper certains caractères dans l'url (cas rares d'une parenthèse, d'une virgule, d'un espace dans l'url)
- les guillemets simples et doubles sont strictement équivalents pour la norme.
a écrit :
Peut être ceci ? code Morse
Tu penses que je me moque de toi et d"eux"? Rassures-toi, il n'en est rien. je pense qu'il est bon de s'occuper des gens déficients ( et de garder toujours à l'esprit ) mais aussi 90% de la populace qui reste est une somme qui n'est pas à nègliger. Pense à ne pas faire un site "gonflant"


Sympa le traducteur !
Je vais répondre en clair, quand même ...

Je vais peut-être commencer par remplacer mes links par @import, comme j'ai pu le lire (et l'oublier) dans le livre de Raphael (cela m'avait pourtant marqué !)

Tête de linote, ce post aura au moins permis à Stephan de mettre au point son filtrage ... et à moi de penser à regarder l'évolution de la FAQ de temps en temps !

Je crois que nous pouvons clôre le débat par un beau "résolu" et rejoindre le pays des fées ...

Merci Laurent pour tes coups de baquettes !
Bonjour
Et comment adresser alors au navigateur exclu une feuille de style qui lui correspondent sans qu'elle soit chargée par les autres navigateurs... en fait une page spécial pr IE ...???
j'ai tenté le [if IE] dans le code html, mais IE mac veut pas en entendre parler... Je vais retenter, mais si vous avez une réponse... merci !!
alinea a écrit :
Bonjour
Et comment adresser alors au navigateur exclu une feuille de style qui lui correspondent sans qu'elle soit chargée par les autres navigateurs... en fait une page spécial pr IE ...???
j'ai tenté le [if IE] dans le code html, mais IE mac veut pas en entendre parler... Je vais retenter, mais si vous avez une réponse... merci !!


Un peu tard, mais pour mémoire, ici:
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

Attention: IE5Max n'implémente pas les commentaires conditionnels.
Modifié par Laurent Denis (28 Aug 2006 - 15:13)
Puisque le sujet est remonté, il y a une petite erreur :
Internet Explorer 4 ne sera pas filtré avec
@import url("advanced.css");

mais le sera avec :
@import "advanced.css";

(netscape 4 le sera bien dans les deux cas)
Le forum ne semble pas traiter du cas ou l'on veut que IE n'interprete pas certaines lignes présentes dans un fichier css

je tenais juste à donner une méthode simple :

Remplacer
.content {
  width:300px;
} 

par
html>body .content {
  width:300px;
} 


qui est surement sujette au débat en fonction des navs utilisé en tout cas ca peut servir à certaines