Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Changement dynamique de classe CSS - IE me gonfle !

17 réponses
Avatar
Patrick 'Zener' Brunet
Bonsoir.

Le problème du jour est de faire bien proprement (donc en CSS) un effet dans
une page Web, l'effet étant simplement déclenché (pas réalisé) par du
Javascript.

Donc en fait le JS assigne un className à un élément et le but est que le
look correspondant soit défini en 100% CSS.

Evidemment ça marche très bien partout sauf avec la crotte qui équipe encore
60% des visiteurs. En fait IE fait la modification de className, mais il ne
retrace pas (ça sert à quoi alors ?).

En fouillant les forums, j'ai trouvé des solutions pour forcer le retraçage,
consistant à commuter la propriété visibility ou display de l'élément.

Mais, expérimentation à l'appui, ça ne marche pas si les styles sont dans
une CSS séparée plutôt que dans la page elle-même. Au moins sur IE 6.
En fait le seul truc que j'avais trouvé, c'est:

document.body.innerHTML = document.body.innerHTML;

Ca force la réinterprétation générale. Mais bon, ça risque aussi de faire un
gros flash, surtout si on fait plusieurs effets à la suite...

Une idée pour forcer le recalcul sélectif d'un élement avec sa nouvelle
classe à aller lire dans la CSS ?

Merci d'avance.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe

7 réponses

1 2
Avatar
Patrick 'Zener' Brunet
Bonjour (à nouveau :-).

"SAM" a écrit dans le message
de news: 4903b2b1$0$963$
Le 10/25/08 7:07 PM, Patrick 'Zener' Brunet a écrit :
> Bonsoir.
Ha! Oui! bonsoir,

> Mais je ne sais pas si ça fonctionne sur IE pour Mac.

Pas essayé.
Voici capture : <http://cjoint.com/?kAbJOQLxpx>
(avec menu illisible)
et le même en fr : <http://cjoint.com/?kAbL2TfCjw>




Visiblement ce sont des captures de www.ipzb.fr et le menu est en mode fixe.
Voilà de quoi ça a l'air normalement avec le menu escamotable:
http://cjoint.com/?kAjZtLMTmY

Mais l'effet dont nous parlons ici n'est pas en place sur ce site.
Seulement sur www.ipzb-pro.com (j'ai uploadé une maquette extraite de
ipzb.fr pour les posts précédents).

> Sur mes sites j'ai
> introduit un mode "Minimal" pour les trop vieux navigateurs.
> Donc c'est le comparatif entre Firefox et IE 6 qui m'intéresse
> (la plupart des gens à qui s'adresse le vrai site sont sur IE 6).

C'est avec ça que j'ai regardé.
(enfin une espèce de standalone-émulateur-IE-6-Unix-Mac)




Oui pour le navigateur, mais ce n'est pas le mode minimal.
Tu peux l'engager par la page des Réglages d'accessibilité, bouton "Passer
en mode minimal". Ca ressemble alors à ça:
http://cjoint.com/?kAj5OiuV6m
Horrible mais sans rien qui puisse gêner le plus archaïque des navigateurs
graphiques.

[...]
setTimeout class du body = class du body avec délai 0
(le déclenchement d'une fonction immédiate ne semble pas suffire)



Je vais essayer.

Néanmoins ça reste chiant que les seules CSS ne donnent pas
satisfactions et qu'il faille béquillr en JS.



Oui ! D'où le titre de cette conversation.
D'un autre côté, JS n'est pas désactivable a priori sur IE 6, de sorte que,
même si c'est lourd, j'ai encore une chance de m'en tirer.
(je rappelle que le site fonctionne aussi sans JS ni cookies).

Note que Stu Nicholls arrive à faire des miracles à grands
renforts d'introduction de table(s) par commentaires conditionnels
sur son site CSS Play :
<http://www.cssplay.co.uk/layouts/>
son truc IE6 donne page blanche dans IE Mac.
<http://www.cssplay.co.uk/menus/>

Reste que les tables, côté accessibilité, laissent fortement
à désirer :-(




J'avais vu ce site, mais ça ne me convient pas du tout parce que:

* L'objectif n°1 est l'accessibilité évidemment, y compris en lecture vocale
qui "voit" tout le contenu dans son ordre linéaire et la logique exprimée
par le balisage, pas par les styles appliqués. Au-delà des tables, ça impose
l'ordre logique de tous les éléments.
Sur www.ipzb-pro.com, j'ai eu un gros problème de clear pour faire couler le
"MainContent" à côté du "Summary" ET du "Menu" quand il est fixé aussi.
J'aurais pu facilement le résoudre en modifiant l'ordre des blocs HTML, s'il
n'était pas imposé par cette logique de lecture linéaire.

* Le contenu doit rester le même quand on change la charte graphique, et
indépendant de la charte. C'est impératif pour une génération automatique
(sinon on revient à l'écriture de sites où chaque page a une structure
spécifique). C'est la contrainte "socio-économique" de l'accessibilité du
Web.

Par contre j'ai amélioré bien des choses avec la structure de
www.ipzb-pro.com:

* Je me permets d'injecter quelques éléments HTML de support (neutres par
rapport au contenu: des div et span uniquement) à partir de la charte
graphique. Pour faire ça, les blocs de la page sont servis par un
maître-script recherché dans la charte graphique.

* J'ai restructuré la CSS adaptative.
- Avant j'insérais des sections pour les diverses options, qui devaient
surcharger les sections précédentes (avec un usage abusif de "!important").
- Désormais je n'ai plus qu'une seule CSS dont les sélecteurs utilisent des
"class options" selon les options actives.
- Et les correctifs pour IEvN sont fournis de la même manière (même si
regroupés dans une CSS additionnelle pour alléger la principale).

Evidemment ce ne fut pas simple parce que IE .erde aussi avec les classes
multiples :-@

Dans le code de www.ipzb-pro.com ça se voit au niveau des containers:

<body id='HomePage' class='IE IEv6 umoL-No umoC-N umoM-n umoF-X umoH-On
umoM-Off umoK-Off'><!--
--><div id='MainContainer' class='IE IEv6 umoL-No umoC-N umoM-n umoF-X
umoH-On umoM-Off umoK-Off'><!--
--><div id='MainContainer2' class='IE IEv6 umoL-No umoC-N umoM-n umoF-X
umoH-On umoM-Off umoK-Off'>
(en triple à cause d'IE :-@@@@@@)

Et vous pouvez trouver la CSS dans le code source:
http://www.ipzb-pro.com/css/DarkSteel/HomePage/Fr/NoNnX000F1024/a
http://www.ipzb-pro.com/css/DarkSteel/HomePage/Fr/NoNnX000F1024/iehacks
(la seconde n'existe que si le navigateur est IE).

[...]

> Le jour où j'arrive à la conclusion qu'à cause d'IE on en
> peut faire que des sites hyper-basiques ou bien non accessibles
> à la plupart des visiteurs qui m'intéressent, je supprime tous les miens

Tiens ? une nouveauté (et le mal voyant n'aura qu'à y voir !) :
une *toute petite* icone pour révéler le menu de l'accessibilité !?




Tu ne la vois pas sur le site ?
Je l'ai même améliorée par rapport à avant. D'ailleurs la voilà pour qui en
aurait besoin, car elle n'est pas facile à trouver:
http://cjoint.com/?kAkBt3NLPv
Je l'ai obtenue par extraction bitmap à partir du caractère spécial Unicode:
http://www.fileformat.info/info/unicode/char/267f/index.htm
J'aurais bien aimé utiliser le caractère lui-même, mais il n'est supporté
que par très peu de fontes Unicode, en général indisponibles dans un
navigateur Web. Code2000 est la meilleure, mais elle pèse pas moins de 8Mo.

Et donc bien entenu, sur mes sites ce lien vers les réglages est le premier
élément du contenu de chaque page. Il est donc facile à trouver même en
lecture linéaire. Essayer le site sans CSS pour voir.

Il y aurait-il moyen à ce que ça ne fasse pas descendre
tout le reste ?




Tu as raison SAM. Un instant de découragement...
Retournons creuser dans la mine de... selles.

Ben oui, ce truc qui ne marche pas est bien agaçant !
et reste encore incompréhensible :-(




Chez moi sur IE, j'ai aussi les tooltips qui ne marchent pas. Pourtant ce
sont les tooltips d'origine, aucun hack.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe
Avatar
SAM
Le 10/26/08 10:54 AM, Patrick 'Zener' Brunet a écrit :
"SAM" a écrit dans le message
de news: 4903b2b1$0$963$

Mais je ne sais pas si ça fonctionne sur IE pour Mac.


Voici capture :



Visiblement ce sont des captures de www.ipzb.fr et le menu est en mode fixe.
Voilà de quoi ça a l'air normalement avec le menu escamotable:
http://cjoint.com/?kAjZtLMTmY



Oui, j'arrive à voir ça (avec d'autres brouteurs)

Mais l'effet dont nous parlons ici n'est pas en place sur ce site.
Seulement sur www.ipzb-pro.com (j'ai uploadé une maquette extraite de
ipzb.fr pour les posts précédents).



Je ne sais quoi fait ton php, mais là ça ne passe pas dans mes
IE-4-Linux/IE-4-Mac :-(
fichier 'get.php' ligne 22 : "Argument non valide"
me dit la daube-console-d'erreurs d'IE (5.5 comme 6)
On ne passe pas l'intro.

Ça passe dans IE6 - XP de l'émulateur Windows.

Oui pour le navigateur, mais ce n'est pas le mode minimal.
Tu peux l'engager par la page des Réglages d'accessibilité, bouton "Passer
en mode minimal".



Maisz'où qu'il est ce grmmmblbl de bouton ?
là : <http://www.ipzb-pro.com/>
Bon ... je finis par le trouver qd même.
Penser à styler le cursor des boutons OK car modifiés comme ça, perso je
ne saisis pas bien que ce sont des boutons.


Ca ressemble alors à ça:
http://cjoint.com/?kAj5OiuV6m
Horrible mais sans rien qui puisse gêner le plus archaïque des navigateurs
graphiques.



Je préfère souvent CSS désactivées, au moins et si le html est
correctement foutu, on y voit bien.
Et à la limite pouvoir appliquer ma propre css.

setTimeout class du body = class du body avec délai 0
(le déclenchement d'une fonction immédiate ne semble pas suffire)



Je vais essayer.



J'ai rien vu là qui gigotait (avec Fx ni avec IE6)

Stu Nicholls sur son site CSS Play :
<http://www.cssplay.co.uk/layouts/>

Reste que les tables, côté accessibilité, laissent fortement
à désirer :-(




J'avais vu ce site, mais ça ne me convient pas du tout parce que:

* L'objectif n°1 est l'accessibilité évidemment, y compris en lecture vocale
qui "voit" tout le contenu dans son ordre linéaire et la logique exprimée
par le balisage, pas par les styles appliqués. Au-delà des tables, ça impose
l'ordre logique de tous les éléments.



On peut ordonner logiquement dans des tables (parait-il).
Et cela pourrait passer dans un vocalisateur.

Sur www.ipzb-pro.com, j'ai eu un gros problème de clear pour faire couler le
"MainContent" à côté du "Summary" ET du "Menu" quand il est fixé aussi.
J'aurais pu facilement le résoudre en modifiant l'ordre des blocs HTML, s'il
n'était pas imposé par cette logique de lecture linéaire.



J'avais lu que le menu devait être placé en fin de fichier pour que le
fichier soit politiquement correctement ordonné.
(on n'a pas besoin de naviguer ailleurs avant d'avoir lu la page, évite
de rembobiner le textureur ou vocalisateur pour revenir au menu)


* Le contenu doit rester le même quand on change la charte graphique, et
indépendant de la charte. C'est impératif pour une génération automatique
(sinon on revient à l'écriture de sites où chaque page a une structure
spécifique). C'est la contrainte "socio-économique" de l'accessibilité du
Web.

Par contre j'ai amélioré bien des choses avec la structure de
www.ipzb-pro.com:

* Je me permets d'injecter quelques éléments HTML de support (neutres par
rapport au contenu: des div et span uniquement) à partir de la charte
graphique. Pour faire ça, les blocs de la page sont servis par un
maître-script recherché dans la charte graphique.

* J'ai restructuré la CSS adaptative.
- Avant j'insérais des sections pour les diverses options, qui devaient
surcharger les sections précédentes (avec un usage abusif de "!important").



Si les feuilles externes alternatives sont activées après la principale
il n'y aurait pas besoin de !important
la nouvelle règle écrasant la précédente (au moins les attributs
utilisés et communs)

- Désormais je n'ai plus qu'une seule CSS dont les sélecteurs utilisent des
"class options" selon les options actives.
- Et les correctifs pour IEvN sont fournis de la même manière (même si
regroupés dans une CSS additionnelle pour alléger la principale).

Evidemment ce ne fut pas simple parce que IE .erde aussi avec les classes
multiples :-@



faut bien dire que tu y vas fort !

Tiens ? une nouveauté (et le mal voyant n'aura qu'à y voir !) :
une *toute petite* icone pour révéler le menu de l'accessibilité !?



Tu ne la vois pas sur le site ?



Moi je la vois
Moi je la vois d'autant mieux que je pratique de temps en temps le site
Je doute que ma tante malvoyante la voit ! ! !


Et donc bien entenu, sur mes sites ce lien vers les réglages est le premier
élément du contenu de chaque page. Il est donc facile à trouver même en
lecture linéaire. Essayer le site sans CSS pour voir.



Une fois sans CSS, je n'ai plus besoin du sigle ni de tous les autres
accessoires de mise en forme (et ma tante non plus) il suffit de
demander au navigateur d'agrandir les polices.

Bon, j'ai encore un problème :
une fois sur page d'accessibilité et cliqué le OK minimal
je n'arrive plus à revenir à Normal ...
(pas vu de bouton pour)
(bouton back x fois)


Chez moi sur IE, j'ai aussi les tooltips qui ne marchent pas. Pourtant ce
sont les tooltips d'origine, aucun hack.



Je n'ai pas vu ni trouvé de tooltip
(ou alors on ne parle pas de la même chose ?)

--
sm
Avatar
Patrick 'Zener' Brunet
Bonjour.

"SAM" a écrit dans le message
de news: 49046770$0$879$
Le 10/26/08 10:54 AM, Patrick 'Zener' Brunet a écrit :
> "SAM"
> a écrit dans le message
> de news: 4903b2b1$0$963$
>>
>>> Mais je ne sais pas si ça fonctionne sur IE pour Mac.
>> Voici capture :
>
> Visiblement ce sont des captures de www.ipzb.fr et le menu
> est en mode fixe.
> Voilà de quoi ça a l'air normalement avec le menu escamotable:
> http://cjoint.com/?kAjZtLMTmY

Oui, j'arrive à voir ça (avec d'autres brouteurs)

> Mais l'effet dont nous parlons ici n'est pas en place sur ce site.
> Seulement sur www.ipzb-pro.com (j'ai uploadé une maquette
> extraite de ipzb.fr pour les posts précédents).

Je ne sais quoi fait ton php, mais là ça ne passe pas dans mes
IE-4-Linux/IE-4-Mac :-(
fichier 'get.php' ligne 22 : "Argument non valide"
me dit la daube-console-d'erreurs d'IE (5.5 comme 6)
On ne passe pas l'intro.




Une erreur PHP pour IE4 ?????
Non, je crois comprendre que c'est une erreur JS pour le loader ?

A la ligne 22 il y a:
if( (tAgent.indexOf( "msie 5.5") != -1 ...
avec:
var tAgent = navigator.userAgent.toLowerCase();
Ca doit être trop fort pour IE 4 :-(
Bon, je vais réviser...
En effet ça stoppe l'entrée automatique, mais le bouton du formulaire
devrait permettre d'entrer manuellement ?

Ça passe dans IE6 - XP de l'émulateur Windows.

> Oui pour le navigateur, mais ce n'est pas le mode minimal.
> Tu peux l'engager par la page des Réglages d'accessibilité,
> bouton "Passer en mode minimal".

Maisz'où qu'il est ce grmmmblbl de bouton ?
là : <http://www.ipzb-pro.com/>
Bon ... je finis par le trouver qd même.
Penser à styler le cursor des boutons OK car modifiés comme
> ça, perso je ne saisis pas bien que ce sont des boutons.




????? Comment ça ?
http://cjoint.com/?kAp5YoS0wY dans tous mes navigateurs.

Ca ressemble alors à ça (le mode minimal):
> http://cjoint.com/?kAj5OiuV6m
> Horrible mais sans rien qui puisse gêner le plus archaïque des


navigateurs
> graphiques.

Je préfère souvent CSS désactivées, au moins et si le html est
correctement foutu, on y voit bien.



C'est possible aussi, avec le mode "Texte Pur".

Et à la limite pouvoir appliquer ma propre css.




Ca c'est possible par les options du navigateur lui-même quand il sait
faire.
Mais comme tous ne savent pas, je propose des possibilités.

>> setTimeout class du body = class du body avec délai 0
>> (le déclenchement d'une fonction immédiate ne semble pas suffire)
>
> Je vais essayer.

J'ai rien vu là qui gigotait (avec Fx ni avec IE6)




Je ne l'ai pas encore fait.

On peut ordonner logiquement dans des tables (parait-il).
Et cela pourrait passer dans un vocalisateur.




Au mieux ça restera des tables, donc de la donnée à structure tabulaire. Une
sémantique très artificielle pour un contenu flanqué de son menu...


J'avais lu que le menu devait être placé en fin de fichier pour
que le fichier soit politiquement correctement ordonné.
(on n'a pas besoin de naviguer ailleurs avant d'avoir lu la page,
évite de rembobiner le textureur ou vocalisateur pour revenir
au menu)



Question de mode de lecture, et déjà il faut préciser de quel menu on parle.
Le Menu normalement navigue entre les pages, le Sommaire (quand il existe)
navigue dans la page courante.

Quand on cherche une info et qu'on ne veut pas forcément lire tout le site,
il me paraît naturel de faire un faire un balayage x-y avec le menu et le
sommaire.

Mais c'est vrai que ce que tu dis-là fait référence à un lecteur vocal plus
qu'à un navigateur vocal. Un vrai navigateur devrait pourvoir utiliser les
liens.
Je n'en connais pas des masses... Même Opera avec sa commande vocale ne
savait pas faire (en fait il permettait de prendre les liens, mais ensuite
il reprenait la lecture à la suite de la précédente).

> * J'ai restructuré la CSS adaptative.
> - Avant j'insérais des sections pour les diverses options,
> qui devaient surcharger les sections précédentes (avec un
> usage abusif de "!important").

Si les feuilles externes alternatives sont activées après la
principale il n'y aurait pas besoin de !important
la nouvelle règle écrasant la précédente (au moins les attributs
utilisés et communs)



Ben si, justement quand un attribut de la première doit résister à la
seconde.
Avec une ganularité du niveau de la section entière, on arrive à se trouver
coincé de la sorte.
C'est pour ça que je suis redescendu au niveau de la règle:

> - Désormais je n'ai plus qu'une seule CSS dont les sélecteurs
> utilisent des "class options" selon les options actives.
> - Et les correctifs pour IEvN sont fournis de la même manière
> (même si regroupés dans une CSS additionnelle pour alléger la
> principale).
>
> Evidemment ce ne fut pas simple parce que IE .erde aussi avec
> les classes multiples :-@

faut bien dire que tu y vas fort !



Même avec une bête combinaison ".classA.classB" il est déjà perdu. Il n'en
voit qu'une.


>> Tiens ? une nouveauté (et le mal voyant n'aura qu'à y voir !) :
>> une *toute petite* icone pour révéler le menu de l'accessibilité !?
>
> Tu ne la vois pas sur le site ?

Moi je la vois
Moi je la vois d'autant mieux que je pratique de temps en temps
le site.
Je doute que ma tante malvoyante la voit ! ! !




Le cas des malvoyants est plus difficile que celui des aveugles...
Ils veulent aller sur le terrain des "bien-voyants" plutôt qu'utiliser les
solutions pour non-voyants (quand elles existent bien sûr), et comme le
seuil de "mal-voyance" est une notion floue, le choix technique est assez
indécidable...

J'ai expérimenté que le fait de mettre des aides trop visibles déclenche la
réticence des visiteurs "normaux". C'est pourquoi elles doivent rester relat
ivement discrètes. J'ai d'ailleurs prévu un mode "100% Valide" qui les fait
disparaître.

Il faut aussi noter que changer de mode plus d'une fois n'est pas naturel:
on ne retrouve pas son acuité visuelle au bout de 10mn. Il faut donc
s'intéresser surtout aux possibilités offertes quand on arrive sur le site
dans son état d'origine.

En plus cette icône est une image. Elle ne peut pas se dilater comme un
texte.
Sur www.ipzb.fr, elle le fait mais le résultat n'est pas très heureux.

A ce propos, www.ipzb-pro.com s'adresse à un public a priori du genre
intransigeant sur l'apparence, pour lequel je dois soigner plutôt
l'esthétique. Il en va de ma survie. Sauf si vous connaissez des chasseurs
de têtes mal-voyants qui seraient sensibles à l'argument... Depuis le temps
que je suis sur ce terrain, ça n'a pas l'air d'intéresser grand monde.

> Et donc bien entenu, sur mes sites ce lien vers les réglages
> est le premier élément du contenu de chaque page. Il est
> donc facile à trouver même en lecture linéaire. Essayer le site
> sans CSS pour voir.

Une fois sans CSS, je n'ai plus besoin du sigle ni de tous les
autres accessoires de mise en forme (et ma tante non plus) il
suffit de demander au navigateur d'agrandir les polices.




Pas seulement. Etant le premier élement de la page, il est accessible au
premier coup de Tab + Return, ça compte.
Il y a des tétraplégiques qui voient bien mais qui naviguent sans souris, en
soufflant dans un tuyau.

Et puis le mode sans CSS est surtout idéal pour les aveugles, en lecture
vocale.
Le mode minimal est plutôt un mode de secours pour faire face aux
navigateurs antiques, sans perdre tout l'aspect graphique.

Bon, j'ai encore un problème :
une fois sur page d'accessibilité et cliqué le OK minimal
je n'arrive plus à revenir à Normal ...
(pas vu de bouton pour)
(bouton back x fois)




C'est bizarre. Il y a 3 modes: graphique, minimal et texte pur.
Les deux boutons permettent de choisir les deux alternatives à celui qui est
déjà engagé.

Par contre c'est vrai que le mode est validé pour tout le site et comme il
ne figure pas dans l'URL, le retour en arrière n'a aucun effet sur lui. Il
est mémorisé dans la session et dans le cookie (si les cookies sont
activés), et tu le retrouveras aussi en revenant sur le site avec une
session expirée, si tu as le cookie. Donc il faut le remodifier
explicitement.

Si le mode était dans l'URL, Google et ses copains m'indexeraient le site
dans les contextes les plus surprenants, et les visiteurs suivant ces liens
découvriraient le site ainsi, ils ne comprendraient pas.

De toute manière, je vais réécrire cette page pour en faire un panneau de
réglage complet avec des choix plus intuitifs, au lieu du mix réglages +
explications par options séparées.


> Chez moi sur IE, j'ai aussi les tooltips qui ne marchent pas.
> Pourtant ce sont les tooltips d'origine, aucun hack.

Je n'ai pas vu ni trouvé de tooltip
(ou alors on ne parle pas de la même chose ?)




Le texte du "title" sur les liens et les images, qui apparaît dans une bulle
quand la souris stationne dessus.
Sur mes IE, chez moi uniquement, certains liens avec image incluse n'ont pas
leur bulle :-(

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe
Avatar
Rakotomandimby (R12y) Mihamina
SAM wrote:

surtout avec "style" ou "className" directement accessibles [...]
b.className = b.className==''? 'red' :
b.className=='red'? 'blu' : '';



Mince j'ai meme pas vu.

Ce con, si on lui setAttribte une class
n'est pas capable ensuite de la retrouver par 'className'



Je suis plus con que IE.

--
Serveurs infogérés:
http://www.infogerance.us/infogerance/packs-serveurs-infogeres
Avatar
SAM
Le 10/26/08 4:55 PM, Patrick 'Zener' Brunet a écrit :
Bonjour.

"SAM" a écrit dans le message
de news: 49046770$0$879$
Je ne sais quoi fait ton php, mais là ça ne passe pas dans mes
IE-4-Linux/IE-4-Mac :-(
fichier 'get.php' ligne 22 : "Argument non valide"
me dit la daube-console-d'erreurs d'IE (5.5 comme 6)
On ne passe pas l'intro.



Une erreur PHP pour IE4 ?????



ie4mac = "IE for Mac"
sous-entendu IE 5,5 et 6 et 7 en versions réduites (sans Windows ?)
le tout installés à partir de sources dispos chez M$ (à ce que j'ai
compris du truc)
De là à savoir s'ils ont les activeX ?
Ce sont des versions plus spécialement étudiées pour vérifier comment
peuvent réagir les vrais avec une page web (avec ou sans JS ou CSS)

Non, je crois comprendre que c'est une erreur JS pour le loader ?

A la ligne 22 il y a:
if( (tAgent.indexOf( "msie 5.5") != -1 ...
avec:
var tAgent = navigator.userAgent.toLowerCase();



et donc le faux-vrai IE 5.5 Win nous dit pour userAgent :
"Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)"
tandis que son frère IE 6 patafiole :
"Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)"

Breffle ça bloque là et ne présente pas le bouton pour ceux sans JS


Ca doit être trop fort pour IE 4 :-(
Bon, je vais réviser...
En effet ça stoppe l'entrée automatique, mais le bouton du formulaire
devrait permettre d'entrer manuellement ?



pas vu de bouton !
regarde par toi-même :
<http://cjoint.com/?kAuctQDprg>

Penser à styler le cursor des boutons OK car modifiés comme
ça, perso je ne saisis pas bien que ce sont des boutons.



????? Comment ça ?
http://cjoint.com/?kAp5YoS0wY dans tous mes navigateurs.



Oui, oui, on est d'accord.
J'ai bien ces trucs là et ... ?
à quoi vois-tu que ce sont des boutons ?
On dirait des iconnettes à la M$ de l'époque W95 sinon W3.1
et rien n'indique que ces ico puissent être réactifs.
(a:hover {border-style:inset} ou button {cursor:hand;} )

Je préfère souvent CSS désactivées, au moins et si le html est
correctement foutu, on y voit bien.



C'est possible aussi, avec le mode "Texte Pur".



Vi, mais ça m'est aussi assez simple de désactiver moi-même les CSS

Et à la limite pouvoir appliquer ma propre css.



Ca c'est possible par les options du navigateur lui-même quand il sait
faire.
Mais comme tous ne savent pas, je propose des possibilités.



Toutafé.

J'ai rien vu là qui gigotait (avec Fx ni avec IE6)



Je ne l'ai pas encore fait.



Ha! tout s'esssplique :-)

J'avais lu que le menu devait être placé en fin de fichier pour
que le fichier soit politiquement correctement ordonné.
(on n'a pas besoin de naviguer ailleurs avant d'avoir lu la page,
évite de rembobiner le textureur ou vocalisateur pour revenir
au menu)



Question de mode de lecture,



Il n'y a pas de "mode" (fashion) de lecture :
en gb comme en fr on lit de gauche à droite en suivant les lignes du
haut vers le bas (du début à la fin).

et déjà il faut préciser de quel menu on parle.
Le Menu normalement navigue entre les pages, le Sommaire (quand il existe)
navigue dans la page courante.



Je croyais qu'on parlais "sans CSS" ?
Pour moi le "menu" est ce que je crois que tu appelles le "Menu" :
* Accueil
* Contact
* Introduction et CV
* Présentation
* Domaines de Compétence
* Activité de R&D
* Offre de Service
* Crédits
* Maintenance
et qu'on retrouve bien sur les pages liées.

Tiens ?
Mais que fabriques-tu ?
V'là que je suis bloqué en mode texte !
J'ai dû tuer ton cookie pour revenir à la "normale" ! ! !
(bon, j'ai vu explication bp plus bas et supprimée dans réponse)

Quand on cherche une info et qu'on ne veut pas forcément lire tout le site,
il me paraît naturel de faire un faire un balayage x-y avec le menu et le
sommaire.



J'ai rien compris à rien compris.

Je te parle du mode "texte" (vocalisateur ou brouteur texte)
d'accessibilité quoi.
Le "balayage x-y" ... je ne pense pas qu'il y soit de mise.
(balayage x-y = lecture en diagonale de ce qu'affiché)
(en tous cas != butinage du site)
Peut-être qu'en brouteur-texte on peut jouer de l'ascenseur vertical
pour arriver au menu en bas, ce n'est pas pire que de remonter en haut
quand on a lu une partie et qu'on veut alors butiner plus loin.
Le vocalisateur, je ne sais pas.

Mais c'est vrai que ce que tu dis-là fait référence à un lecteur vocal plus
qu'à un navigateur vocal. Un vrai navigateur devrait pourvoir utiliser les
liens.



Un vrai navigateur-texte devrait afficher ce qu'on voit sans les CSS, le
flux naturel html.
Sauf qu'il est probable que l'affichage sera le + souvent grossi (à 500%
ou plus et qque fois en inverse vidéo) le visiteur lit un mot après
l'autre (s'il est affiché en entier) ou qque fois plusieurs mots avant
de scroller droite pour la suite.

Si les feuilles externes alternatives sont activées après la
principale il n'y aurait pas besoin de !important
la nouvelle règle écrasant la précédente (au moins les attributs
utilisés et communs)



Ben si, justement quand un attribut de la première doit résister à la
seconde.



???
pas ni rien compris
c'est une machine inintelligente qui te crée tes css ?
Si la première doit être conservée yaka ne pas la recouvrir par une
seconde, non ?

Evidemment ce ne fut pas simple parce que IE .erde aussi avec
les classes multiples :-@


faut bien dire que tu y vas fort !



Même avec une bête combinaison ".classA.classB" il est déjà perdu. Il n'en
voit qu'une.



Tiens ? c'est nouvô ça.
Quand je disais "alambiqué" je pense que je n'imaginais pas à quel point.

Normalement (du moins crois-je) on fait :

.classA { color: blue; }
.classB { background: azure }

et on utilise

<p class="classA classB"> test </p>

faire en plus

.classA.classB { color: red }

c'est à mon sens tenter de pousser mémère dans les orties.
(faut quand même à un moment donné savoir ce qu'on veut)


Tiens ? une nouveauté (et le mal voyant n'aura qu'à y voir !) :
une *toute petite* icone pour révéler le menu de l'accessibilité !?




Je doute que ma tante malvoyante la voit ! ! !



Le cas des malvoyants est plus difficile que celui des aveugles...



Oui, mais ... accessibilité, n'est-il pas ?

Ils veulent aller sur le terrain des "bien-voyants" plutôt qu'utiliser les
solutions pour non-voyants (quand elles existent bien sûr), et comme le
seuil de "mal-voyance" est une notion floue, le choix technique est assez
indécidable...



Le choix technique existe, ce qui n'enlève pas la curiosité bien
naturelle et d'essayer de voir ce que voient les autres.

J'ai expérimenté que le fait de mettre des aides trop visibles déclenche la
réticence des visiteurs "normaux".



Cépafo.

C'est pourquoi elles doivent rester relativement discrètes.
J'ai d'ailleurs prévu un mode "100% Valide" qui les fait disparaître.



et hop! un serpentin de plus ;-)

Il faut aussi noter que changer de mode plus d'une fois n'est pas naturel:
on ne retrouve pas son acuité visuelle au bout de 10mn. Il faut donc
s'intéresser surtout aux possibilités offertes quand on arrive sur le site
dans son état d'origine.

En plus cette icône est une image. Elle ne peut pas se dilater comme un
texte.



Ha ?
ça aussi c'est nouvô ?

Sur www.ipzb.fr, elle le fait mais le résultat n'est pas très heureux.



... bon ... je ne l'ai pas vue s'agrandir.
Pourtant je porte des lunettes !
Le site doit bien le voir et m'agrandir le sigle, non ?

A ce propos, www.ipzb-pro.com s'adresse à un public a priori du genre
intransigeant sur l'apparence, pour lequel je dois soigner plutôt
l'esthétique.



C'est vrai que de ce côté il est beaucoup plus soigné que l'autre.

Il en va de ma survie. Sauf si vous connaissez des chasseurs
de têtes mal-voyants qui seraient sensibles à l'argument... Depuis le temps
que je suis sur ce terrain, ça n'a pas l'air d'intéresser grand monde.



Oui, mais nous (moi) on parle de ton sujet : accessibilité.

Une fois sans CSS, je n'ai plus besoin du sigle ni de tous les
autres accessoires de mise en forme (et ma tante non plus) il
suffit de demander au navigateur d'agrandir les polices.



Pas seulement. Etant le premier élement de la page, il est accessible au
premier coup de Tab + Return, ça compte.



et comment je pourrais savoir ça ?
de ttes façons ce truc 'tab' ne fonctionne pas sur mon Fx pour Mac
(tu as tabindexé tes éléments ?)
Chez moi le truc 'tab' ne fonctionne bien que pour les inputs de forms.
Safari fait pareil, sur ta page le tab fait sauter de la barre d'adresse
à celle de Google puis ton truc de login et c'est tout.
(que les champs de texte quoi)
Tiens ?
Option + fleche haute/basse cache/montre le menu d'accessibilté ?!
(Option = Alt)

Il y a des tétraplégiques qui voient bien mais qui naviguent sans souris, en
soufflant dans un tuyau.



Là, je vois mal ce que tu peux faire pour les aider ...
Un gros clavier virtuel ?
Non, le tuyau n'est pas dirigé vers l'écran.
Je vois pas quoi faire.

Et puis le mode sans CSS est surtout idéal pour les aveugles, en lecture
vocale.



ou les mecs comme moi qui sont saoulés par toutes ces fioritures et
images inutiles ?

Le mode minimal est plutôt un mode de secours pour faire face aux
navigateurs antiques, sans perdre tout l'aspect graphique.

Bon, j'ai encore un problème :
une fois sur page d'accessibilité et cliqué le OK minimal
je n'arrive plus à revenir à Normal ...
(pas vu de bouton pour)



C'est bizarre. Il y a 3 modes: graphique, minimal et texte pur.
Les deux boutons permettent de choisir les deux alternatives à celui qui est
déjà engagé.



et comment je reviens à "graphique" ?
Ha! Merdum ! je l'avions point vu non plus ! :-(
(c'est discret)

Chez moi sur IE, j'ai aussi les tooltips qui ne marchent pas.
Pourtant ce sont les tooltips d'origine, aucun hack.


Je n'ai pas vu ni trouvé de tooltip
(ou alors on ne parle pas de la même chose ?)



Le texte du "title" sur les liens et les images, qui apparaît dans une bulle
quand la souris stationne dessus.



ben ... normalement IE affiche ces titles, non ?

Sur mes IE, chez moi uniquement, certains liens avec image incluse n'ont pas
leur bulle :-(



Ben ... pas étonnant, par exemple :

<img src="/image/Images/DirectToJob103x33.gif" alt="Panneau routier
indiquant la voie rapide vers le CV" title="">

title est vide ... hop! pas de ce tooltip, qque soit le navigateur !

Le alt n'est là que pour le texte remplaçant l'image
(ou peut-être commentaire si vocalisateur)

Bien sûr avec :

<a class="ImageLink" href="/0/Fr/Work/NI/Job--1" title="Accès direct à
mon profil de candidat"><!--
--><img src="/image/Images/DirectToJob103x33.gif" alt="Panneau routier
indiquant la voie rapide vers le CV" title=""></a>

j'ai le title du A en "tooltip" avec mon Fx
(j'appelle ça une bulle-info, pour pas mélanger avec les "tooltips"
plutôt en JS) mais pas avec IE qui bouillonne à l'envers comme chacun sait.

Yapuka ne mettre que le title de l'image et zapper celui du A
et tout l'monde y sera content.

--
sm
Avatar
SAM
Le 10/26/08 6:57 PM, Rakotomandimby (R12y) Mihamina a écrit :
SAM wrote:

surtout avec "style" ou "className" directement accessibles [...]
b.className = b.className==''? 'red' :
b.className=='red'? 'blu' : '';



Mince j'ai meme pas vu.



Ça peut être possible ;-)

> Ce con, si on lui setAttribte une class
> n'est pas capable ensuite de la retrouver par 'className'

Je suis plus con que IE.



Non! là je ne peux pas te croire !

--
sm
Avatar
Patrick 'Zener' Brunet
Bonjour, me revoilà.

"SAM" a écrit dans le message
de news: 4904d57c$0$940$
Le 10/26/08 4:55 PM, Patrick 'Zener' Brunet a écrit :
> "SAM"
> a écrit dans le message
> de news: 49046770$0$879$
>> Je ne sais quoi fait ton php, mais là ça ne passe pas dans
>> mes IE-4-Linux/IE-4-Mac :-(
> [...]
> A la ligne 22 il y a:
> if( (tAgent.indexOf( "msie 5.5") != -1 ...
> avec:
> var tAgent = navigator.userAgent.toLowerCase();

et donc le faux-vrai IE 5.5 Win nous dit pour userAgent :
"Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)"
tandis que son frère IE 6 patafiole :
"Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)"

Breffle ça bloque là et ne présente pas le bouton pour
ceux sans JS
[...]
pas vu de bouton !
regarde par toi-même :
<http://cjoint.com/?kAuctQDprg>



Yes... J'avais dû masquer le (hideux) bouton par un autre JS parce que si
Firefox le masquait immédiatement, IE attendait la fin du traçage de la page
:-(

Je n'ai pas pu trouver de faute dans le Detector.js. Rien qui explique un
blocage là pour IE4 :-(
J'ai rajouté un système d'exception, avec restauration du bouton dans ce
cas...

>> Penser à styler le cursor des boutons OK car
>> modifiés comme ça, perso je ne saisis pas bien
>> que ce sont des boutons.
[...]
On dirait des iconnettes à la M$ de l'époque W95
sinon W3.1



Ben justement ils ne sont pas modifiés ! Ca c'est le look par défaut du
input type button... Ils sont simplement plus gros.

et rien n'indique que ces ico puissent être réactifs.
(a:hover {border-style:inset} ou button {cursor:hand;} )



cursor: pointer selon la norme.
Voilà, c'est fait. Mais pour IE c'est à partir de la version 6. Les
précédentes s'en fichent apparemment. J'ai essayé avec hand pour elles, pas
mieux.

> [...]



Revenons au problème du forçage du redraw.

>> J'ai rien vu là qui gigotait (avec Fx ni avec IE6)
> Je ne l'ai pas encore fait.
Ha! tout s'esssplique :-)



Ben voilà, c'est en place et ça ne marche pas...

if( _uDemoStep % 2 == 1)
roMenu.className = "DemoMenu";
else
roMenu.className = "NormalMenu";
if( _bNeedsForceRedraw)
{
/* Actually IE needs a change on the <body>
(cut) itself to wake up :-@ */
setTimeout( 'document.body.className
(cut) = document.body.className', 0);
}

Le booleen est à true bien sûr.
On voit dans la ligne de status de IE6 que le forçage a bien lieu 6 fois,
mais sans effet visuel.

[...]

Le "balayage x-y"...



Je voulais dire:
1) je navigue entre les pages pour choisir la bonne,
2) je navigue dans la page pour choisir le paragraphe qui m'intéresse.

Dans cette logique, l'ordre Menu général puis Sommaire me paraît pertinent.

Pour ce qui est de mettre le menu en bas de page, il fut un temps où dans un
document Word, je plaçais la table des matières à la fin (le
rafraîchissement peut se faire en une fois au lieu de deux). Des pros de
l'édition m'ont expliqué que la placer au début du bouquin est préférable.
Donc en fait c'est un peu une question de logique +/- universelle...
Dûr pour les gens qui ont des marottes perso (j'en ai aussi).

[...]

>>>> une *toute petite* icone pour révéler le
>>>> menu de l'accessibilité !?
>> Je doute que ma tante malvoyante la voit ! ! !



Bien. Désormais sur www.ipzb-pro.com, l'icône est bien visible quand ce lien
prend le focus.
Mais ça ne pourrait pas passer ainsi de manière permanente pour des
visiteurs "bien-voyants".

Je cherche toujours une idée pour détecter le cas de visiteurs ayant
configuré leur navigateur avec de grandes polices...
Il faudrait que j'arrive à faire une mesure d'équivalence du "ex" en "px"
dans la page de détection.

[...]

> Pas seulement. Etant le premier élement de la page,
> il est accessible au premier coup de Tab + Return,
> ça compte.

et comment je pourrais savoir ça ?
de ttes façons ce truc 'tab' ne fonctionne pas sur mon
Fx pour Mac (tu as tabindexé tes éléments ?)



Théoriquement le tabindex ne doit servir que pour modifier l'ordre naturel
des élements accessibles par clavier (notamment si on les repositionne).

Par contre si le navigateur a des moeurs particulières et préfère d'autres
combinaisons de touches, évidemment ce n'est pas à un site de s'y opposer.

Le Tab est un standard de navigation dans les formulaires sous Windows et je
crois aussi sous Linux. Le Mac préfère peut-être les pommes...
Ca peut aussi être un choix du navigateur: il semblerait qu'Opera fasse un
peu bande à part...

Bref remplacer ci-dessus "Tab" par "la commande clavier qui navigue entre
les liens" dans le contexte de chacun.

> Il y a des tétraplégiques qui voient bien mais qui
> naviguent sans souris, en soufflant dans un tuyau.

Là, je vois mal ce que tu peux faire pour les aider ...



Typiquement, il y a des modes qui se déclenchent avec des combinaisons
temporelles de soufflements. Comme on fait avec les clics sur une souris.
Dans certains modes, il y a un balayage automatique de l'écran, ou d'un
clavier virtuel, et on soufle un coup pour faire une action à l'endroit
voulu.

[...]

> Sur mes IE, chez moi uniquement, certains liens
> avec image incluse n'ont pas leur bulle :-(

Ben ... pas étonnant, par exemple :

<img src="/image/Images/DirectToJob103x33.gif"
alt="Panneau routier
indiquant la voie rapide vers le CV" title="">

title est vide ... hop! pas de ce tooltip, qque soit le
navigateur !



En fait j'ai un problème de principe lorsque le lien contient une image ET
du texte.
Il faudrait que la bulle soit présente pour les deux, mais ils se tirent un
peu dans les pattes, au moins avec IE.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe
1 2