OVH Cloud OVH Cloud

[Firefox] Problèmes CSS - Où en est-on ?

11 réponses
Avatar
Patrick 'Zener' Brunet
Bonjour.

Moi je suis resté pour l'instant à la 1.0.7 (je ne peux pas passer tout mon
temps à faire des mises à jour, et surtout je voudrais prendre en compte les
visiteurs qui ne le font pas non plus).

J'ai quelques problèmes de respect des règles CSS identifiés avec la 1.0.7,
mais Google m'en est témoin, je n'arrive pas à savoir si c'est réglé dans
les suivantes ou si ça persiste.

Le plus gênant est le suivant:

* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".

(contrairement à IE 6.0).

Et donc il y a des éléments qui ne se cachent pas comme prévu.

Connaissez-vous ce problème et est-il résolu (ou alors une astuce pour le
contourner) ?

Merci,

Cordialement,

--
/***************************************\
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
\***************************************/

10 réponses

1 2
Avatar
Damien Hardy
Patrick 'Zener' Brunet a écrit :
Bonjour.

Moi je suis resté pour l'instant à la 1.0.7 (je ne peux pas passer tout mon
temps à faire des mises à jour, et surtout je voudrais prendre en compte les
visiteurs qui ne le font pas non plus).

J'ai quelques problèmes de respect des règles CSS identifiés avec la 1.0.7,
mais Google m'en est témoin, je n'arrive pas à savoir si c'est réglé dans
les suivantes ou si ça persiste.

Le plus gênant est le suivant:

* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".

(contrairement à IE 6.0).

Et donc il y a des éléments qui ne se cachent pas comme prévu.

Connaissez-vous ce problème et est-il résolu (ou alors une astuce pour le
contourner) ?

Merci,

Cordialement,




Je n'ai pas compris ton bug est ce que tu as une entrée sur le bugzilla qui détaille un peu plus ?

chez moi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<p>jaune</p>
<p>bleu</p>
</body>
</html>

fonctionne tres bien avec ces css :
style.css : p { color: yellow; }
print.css : p + p { color: blue; }

A l'affichage tout est jaune, en apperçu avant impression le deuxieme paragraphe est bleu.

Dam
Avatar
Damien Hardy
Patrick 'Zener' Brunet a écrit :
Bonjour.

Moi je suis resté pour l'instant à la 1.0.7 (je ne peux pas passer tout mon
temps à faire des mises à jour, et surtout je voudrais prendre en compte les
visiteurs qui ne le font pas non plus).

J'ai quelques problèmes de respect des règles CSS identifiés avec la 1.0.7,
mais Google m'en est témoin, je n'arrive pas à savoir si c'est réglé dans
les suivantes ou si ça persiste.

Le plus gênant est le suivant:

* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".

(contrairement à IE 6.0).

Et donc il y a des éléments qui ne se cachent pas comme prévu.

Connaissez-vous ce problème et est-il résolu (ou alors une astuce pour le
contourner) ?

Merci,

Cordialement,




Je n'ai pas compris ton bug est ce que tu as une entrée sur le bugzilla qui
détaille un peu plus ?

chez moi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<p>jaune</p>
<p>bleu</p>
</body>
</html>

fonctionne tres bien avec ces css :
style.css : p { color: yellow; }
print.css : p + p { color: blue; }

A l'affichage tout est jaune, en apperçu avant impression le deuxieme
paragraphe est bleu.

Dam
Avatar
pascal
Patrick 'Zener' Brunet a écrit :
Bonjour.

Moi je suis resté pour l'instant à la 1.0.7 (je ne peux pas passer tout mon
temps à faire des mises à jour, et surtout je voudrais prendre en compte les
visiteurs qui ne le font pas non plus).

J'ai quelques problèmes de respect des règles CSS identifiés avec la 1.0.7,
mais Google m'en est témoin, je n'arrive pas à savoir si c'est réglé dans
les suivantes ou si ça persiste.

Le plus gênant est le suivant:

* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".

(contrairement à IE 6.0).



Je ne vois pas où est le bug dans ce que tu décris, all en anglais ça
veut dire "tous" et dans "tous" il y a "print", si tu ne veux pas qu'une
feuille soit appliquée pour l'impression, il ne faut pas mettre all !!

Pascal
Avatar
Patrick 'Zener' Brunet
Bonjour.

Je réponds à Damien Hardy
qui dans 439c7b22$0$29336$ a écrit :
Patrick 'Zener' Brunet a écrit :
[...]
* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".
(contrairement à IE 6.0).
Et donc il y a des éléments qui ne se cachent pas comme prévu.






chez moi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-15" /> <link rel="stylesheet" type="text/css"
media="all" href="style.css" /> <link rel="stylesheet"
type="text/css" media="print" href="print.css" /> </head>
<body>
<p>jaune</p>
<p>bleu</p>
</body>
</html>

fonctionne tres bien avec ces css :
style.css : p { color: yellow; }
print.css : p + p { color: blue; }

A l'affichage tout est jaune, en apperçu avant impression le deuxieme
paragraphe est bleu.




Chez moi aussi :-(
Par contre sur mon site en chantier, avec la même configuration d'appel des
CSS, j'introduis pour l'impression les deux règles ci-dessous:

body, #BrowsePath
{
background-color: #FFFFFF !important;
background-image: none !important;
}

#Menu, #ModeBar
{
display: none;
}

La première est appliquée, la seconde ignorée.
J'ai essayé de lui rajouter le !important, mais ça ne change rien.

Par ailleurs cette règle n'en contredit aucune autre: les deux éléments
n'ont pas de propriété display en mode normal...

Problème de sélecteur ? Possible... J'ai eu un autre truc cocasse dans le
genre:

* en écrivant (1):

h1, h2, h3, h4, h5, h6, #Menu
{
font-family: Arial, Helvetica, Verdana, sans-serif;
}

#Menu
{
position: absolute;
...
width: 22ex;
}

au lieu de (2):

h1, h2, h3, h4, h5, h6
{
font-family: Arial, Helvetica, Verdana, sans-serif;
}

#Menu
{
position: absolute;
...
width: 22ex;
font-family: Arial, Helvetica, Verdana, sans-serif;
}

... dans le cas (1) le menu est plus large que 22ex, alors qu'il obéit dans
le cas (2)...

Bref c'est assez stupéfiant... :-)

Merci de vos conseils.
Cordialement,

--
/***************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
***************************************/
Avatar
Patrick 'Zener' Brunet
Bonjour.

Je réponds à pascal
qui dans dni984$c6g$ a écrit :
Patrick 'Zener' Brunet a écrit :
[...]

* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".

(contrairement à IE 6.0).



Je ne vois pas où est le bug dans ce que tu décris, all en anglais ça
veut dire "tous" et dans "tous" il y a "print", si tu ne veux pas
qu'une feuille soit appliquée pour l'impression, il ne faut pas
mettre all !!




Ca m'ennuie un peu par rapport au raisonnement suivant:

- media="print" est plus spécifique que media="all",
- le navigateur ne prend qu'une seule feuille CSS

Donc en utilisant "all", il serait complètement vain de proposer des CSS
plus spécifiques, et en conséquence inutile aussi de préciser l'attribut
media.

J'ai bien cru compendre dans la logique des CSS que le navigateur est
supposé prendre la plus spécifique, "all" signifiant alors "default".

D'ailleurs c'est bien ce qui se passe (cf: ma réponse à Damien Hardy),
puisque ma feuille print.css est finalement exploitée partiellement. Il y a
des règles qui sont appliquées qui ne figurent que dans cette CSS.
Donc le problème est transformé en : pourquoi certaines autres règles
sont-elles ignorées ?

Cordialement,

--
/***************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
***************************************/
Avatar
Pascal Chevrel
Le 12/12/2005 14:26, Patrick 'Zener' Brunet a ecrit :
Bonjour.

Je réponds à pascal
qui dans dni984$c6g$ a écrit :
Patrick 'Zener' Brunet a écrit :
[...]

* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".

(contrairement à IE 6.0).


Je ne vois pas où est le bug dans ce que tu décris, all en anglais ça
veut dire "tous" et dans "tous" il y a "print", si tu ne veux pas
qu'une feuille soit appliquée pour l'impression, il ne faut pas
mettre all !!




Ca m'ennuie un peu par rapport au raisonnement suivant:

- media="print" est plus spécifique que media="all",
- le navigateur ne prend qu'une seule feuille CSS



Ta deuxième supposition est fausse, tu oublies le C de CSS.

Pascal
Avatar
Patrick 'Zener' Brunet
Bonjour.

Je réponds à Patrick 'Zener' Brunet
qui dans 439c6674$0$4285$ a écrit :
Bonjour.

Moi je suis resté pour l'instant à la 1.0.7 (je ne peux pas passer
tout mon temps à faire des mises à jour, et surtout je voudrais
prendre en compte les visiteurs qui ne le font pas non plus).

J'ai quelques problèmes de respect des règles CSS identifiés avec la
1.0.7, mais Google m'en est témoin, je n'arrive pas à savoir si c'est
réglé dans les suivantes ou si ça persiste.

Le plus gênant est le suivant:

* une feuille spécifique avec media="print" est ignorée, l'impression
utilise la feuille media="all".

(contrairement à IE 6.0).

Et donc il y a des éléments qui ne se cachent pas comme prévu.

Connaissez-vous ce problème et est-il résolu (ou alors une astuce
pour le contourner) ?




Alors pour qui serait intéressé, je passe l'info:

Voulant faire très propre, j'avais doté les tags

<link rel="stylesheet">

... d'un attribut: title="nom de la feuille de style"

Ce qui donne en gros:

<link rel="stylesheet" type="text/css" media="all"
href="Tagada.css" title="Charte graphique Tagada" />
<link rel="stylesheet" type="text/css" media="print"
href="Printer.css" title="Adaptations pour impression" />

Et dans ce cas la Printer.css est complètement ignorée lors de l'impression.
Contrairement à ce que je disais à Damien Hardy, ce n'est pas la première
règle correctrice de mise au blanc des backgrounds qui s'applique, c'est une
option à cocher dans Firefox qui l'impose de manière redondante.

Si je vide l'attribut title pour la feuille media="print", alors ça
fonctionne correctement.
Pourtant le title est accepté pour la première (puisqu'il va dans le menu de
sélection des styles).

Ceci est donc visiblement une interférence avec la logique qui ne présente
pas dans ce menu les feuilles non utilisées pour l'affichage à l'écran.

Bref il faut coder:

<link rel="stylesheet" type="text/css" media="all"
href="Tagada.css" title="Charte graphique Tagada" />
<link rel="stylesheet" type="text/css" media="print"
href="Printer.css" title="" />

... en attendant que ça soit corrigé.

(Si quelqu'un peut faire passer l'info à ???Zilla s'il y a lieu, là j'ai pas
le temps de chercher le site. Merci).

Hope It Helps,
Cordialement.css

--
/***************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
***************************************/
Avatar
Steph.K
Patrick 'Zener' Brunet a écrit :
[...]

<link rel="stylesheet" type="text/css" media="all"
href="Tagada.css" title="Charte graphique Tagada" />
<link rel="stylesheet" type="text/css" media="print"
href="Printer.css" title="" />



Et avec le même title="...", ca donne quoi ?

<link rel="stylesheet" type="text/css" media="all" href="Tagada.css"
title="Charte graphique Tagada" />
<link rel="stylesheet" type="text/css" media="print" href="Printer.css"
title="Charte graphique Tagada" />

--
Steph.K
http://stephkup.nexenservices.com/accueil/
Avatar
Patrick 'Zener' Brunet
Bonjour.

Je réponds à Steph.K
qui dans 43a7d45f$0$14559$ a écrit :
Patrick 'Zener' Brunet a écrit :
[...]

<link rel="stylesheet" type="text/css" media="all"
href="Tagada.css" title="Charte graphique Tagada" />
<link rel="stylesheet" type="text/css" media="print"
href="Printer.css" title="" />



Et avec le même title="...", ca donne quoi ?

<link rel="stylesheet" type="text/css" media="all" href="Tagada.css"
title="Charte graphique Tagada" />
<link rel="stylesheet" type="text/css" media="print"
href="Printer.css" title="Charte graphique Tagada" />



Peux pas tester facilement, le texte est généré dynamiquement. Essayez avec
le code de Damien...
A priori non vide => ignoré.

Mais le même titre n'a pas lieu d'être, la feuille Printer.css est unique,
et apporte des **corrections** ponctuelles et **génériques** (exemples dans
mes posts précédents).

Cordialement,

--
/***************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
***************************************/
Avatar
nico
Patrick 'Zener' Brunet wrote:
Et avec le même title="...", ca donne quoi ?

<link rel="stylesheet" type="text/css" media="all" href="Tagada.css"
title="Charte graphique Tagada" />
<link rel="stylesheet" type="text/css" media="print"
href="Printer.css" title="Charte graphique Tagada" />




(...)
A priori non vide => ignoré.

Mais le même titre n'a pas lieu d'être, la feuille Printer.css est unique,
et apporte des **corrections** ponctuelles et **génériques** (exemples dans
mes posts précédents).




Je pense qu'il y a ici un problème d'interpretation de l'attribut "title".

Ici le "title" est considéré comme le titre de LA FEUILLE CSS.

Hors il me semble que le titre devrait plutôt être concidéré comme le
titre du STYLE de manière globale.

Prenons un exemple :

Je fais une page web. Je lui applique une charte graphique à dominante
bleue. Je fais donc un (ou des) fichier CSS pour l'écran, et un pour
l'imprimante.
Ensuite je veux mettre en place une deuxième charte graphique à
dominante rouge. J'aurais alors d'autres fichiers CSS. Mais je peux
placer sur mon fichier HTML les deux styles à la fois. La démarcation
entre les feuilles pourra être faite en fonction du titre (et de la
definition du style en tant qu'alternative ou pas);

On peu alors voir ici l'interet de l'attribut titre.
Toutes mes pages CSS jouant pour le style à dominante bleue auront le
titre "Style Bleu", alors que les feuilles de styles décrivant la charte
rouge s'appeleront "style rouge".

Ainsi dans son navigateur, l'utilisateur aura le choix entre deux styles
pour le page : "Style Bleu" ou "style rouge".

L'attribut titlte est donc le titre du style et pas celui de la feuille CSS.

++
1 2