OVH Cloud OVH Cloud

methode pour gere css et navigateurs

75 réponses
Avatar
J-F Portala
Bonjour,
j'ai quelques difficultés à obtenir le même rendu sur les navigateurs IE et
firefox.
J'utilise des CSS. (enfin j'essaie)
J'affiche un tableau dans lesquels les lignes paires et impaires ont un fond
blanc ou vert.
Avec firefox, cela se passe bien, avec IE, j'ai un fond completement gris.

Je ne vous demande pas de débugger mon probleme, mais juste de m'indiquer
quelle est la méthode à utiliser ou éventuellement les outils
pour rechercher ce type de probleme.

Merci

Jeff

10 réponses

Avatar
Pierre Goiffon
SAM wrote:
A quoi peuvent bien servir les sélecteurs CSS dans une librairie JS ?






(...)
* C) méthode par délégation de l'événement



Tu donne un exemple simple avec un ul contenant déjà un id... mais ce
n'est pas bien souvent le cas !




(...)
Exemple avec des infobulles à afficher avec quelques effets lorsque
l'on survole des icônes identifiées (aide contextuelle). Le contenu à
afficher est en title de chaque image.



Ou bien je n'ai pas compris ?
Ou bien ton truc n'est pas assez compliqué ?



Les images sont disposées n'importe où dans la page, il y en a
plusieurs, on ne peut pas savoir à l'avance où elle sont à moins de
créer une usine à gaz, elles ne sont pas forcément identifiables
facilement par rapport aux images qui ne doivent pas déclencher d'aide
contextuelle (if ((...) && (...) && (...)...) ), etc.

Créer une fonction qui parcourt l'ensemble du tableau document.images[]
est faisable et de ce que j'ai pu tester ne pose pas trop de prb de
performances (!!) sur Firefox comme IE 6+ ou Opera. Pour différencier
les images d'aide contextuelle on pourra utiliser un nom de classe par
exemple (bref ce que l'on utiliserai avec une méthode de sélection
d'éléments par sélecteur CSS).

MAIS : à peu près tous les développeurs Web savent lire clairement un
sélecteur CSS. Avoir une ligne claire compréhensible par tous ou
plusieurs lignes avec des if imbriqués... pour la maintenance, mon choix
est fait !
Sachant que dans tous les cas on devra développer quelque chose pour
avoir l'effet à l'apparition...
Bon on en revient à la même chose que d'habitude : pour des besoins
isolés les librairies sont assez superfétatoires, mais dès lors que l'on
a des choses plus complexes on peut se poser des questions.
Avatar
Sergio
Pierre Goiffon a couché sur son écran :

Non, ben justement, à peu près à égalité avec FF3 (P4HT 2,8GHz sous XPSP3),
que ce soit IE7, Opera ou Safari (les navigateurs "modernes" installés sur
ma machine).



Que veux dire le HT derrière le P4 ?
En tout cas il me semble qu'il s'agit d'une bête de course, et que donc la
différence de temps de rendu serait difficilement mesurable car minime vu la
puissance de la machine... non ?



Hyperthread. C'est à dire un "faux" biprocesseur :
http://fr.wikipedia.org/wiki/Hyper-Threading

Pas une bécane de course aujourd'hui (date de 2003). Et comme sous les
4 navigateurs, il y a un léger temps de réflexion (1/2s au pif) à la
génération des 50 tableaux, j'en conclus que ce temps de calcul est de
même ordre pour ces navigateurs !

En passant, je viens de tester sous Konqueror (KDE 4.1.3), le problème
de la première table (moins large que les autres) apparait aussi. (on
ne peux pas les soupçonner d'avoir intégrer du code Microsoft !)

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Pierre Goiffon
Sergio wrote:
Non, ben justement, à peu près à égalité avec FF3 (P4HT 2,8GHz sous
XPSP3), que ce soit IE7, Opera ou Safari (les navigateurs "modernes"
installés sur ma machine).



Que veux dire le HT derrière le P4 ?
En tout cas il me semble qu'il s'agit d'une bête de course



Hyperthread. C'est à dire un "faux" biprocesseur :
http://fr.wikipedia.org/wiki/Hyper-Threading

Pas une bécane de course aujourd'hui (date de 2003).



Ha ok, c'est la génération avant les Core puis Core 2 ?
Avatar
SAM
Le 12/5/08 10:28 AM, Pierre Goiffon a écrit :
SAM wrote:
A quoi peuvent bien servir les sélecteurs CSS dans une librairie JS ?






(...)
* C) méthode par délégation de l'événement





Ou bien je n'ai pas compris ?
Ou bien ton truc n'est pas assez compliqué ?



Les images sont disposées n'importe où dans la page, il y en a
plusieurs, on ne peut pas savoir à l'avance où elle sont



Je n'en vois pas trop l'utilité.

à moins de créer une usine à gaz, elles ne sont pas forcément
identifiables facilement par rapport aux images qui ne doivent pas
déclencher d'aide contextuelle (if ((...) && (...) && (...)...) ), etc.



Problème de création du code de l'image ?

Créer une fonction qui parcourt l'ensemble du tableau document.images[]
est faisable et de ce que j'ai pu tester ne pose pas trop de prb de
performances (!!) sur Firefox comme IE 6+ ou Opera. Pour différencier
les images d'aide contextuelle on pourra utiliser un nom de classe par
exemple (bref ce que l'on utiliserai avec une méthode de sélection
d'éléments par sélecteur CSS).



Disons ... bien qu'il doit il y avoir d'autres moyens

MAIS : à peu près tous les développeurs Web savent lire clairement un
sélecteur CSS. Avoir une ligne claire compréhensible par tous ou
plusieurs lignes avec des if imbriqués... pour la maintenance, mon choix
est fait !




Il est certain que ce peut être + facile avec une bibli si plusieurs
interviennent sur un même code
(ou ont à ré-employer un code pour d'autres fichiers)

la bibli peut être très légère et maison.

Je t'engage sincèrement à trouver qque mns pour essayer le truc présenté
par Laurent.


Sachant que dans tous les cas on devra développer quelque chose pour
avoir l'effet à l'apparition...
Bon on en revient à la même chose que d'habitude : pour des besoins
isolés les librairies sont assez superfétatoires, mais dès lors que l'on
a des choses plus complexes on peut se poser des questions.



Probablement.

--
sm
Avatar
Olivier Masson
Laurent vilday a écrit :
Olivier Masson :
SAM :
Olivier Masson :
SAM :
Mais pour avoir accès aux sélecteurs qui existent mais ne sont pas
sur IE6 voire 7, pour utiliser des sélecteurs qui n'existent pas du
tout.



Refélemele une fois que j'comprenne de quoi toi y en a parler.




Non supportés nativement :
IE6 (20-25% des internautes) :
A > B
A + B
A ~ B
[attr] (et dérivés)
:first-child
:empty
:enabled
:disabled
etc.

IE6+7 (60-70% des internautes) :
:lang()
:after
:focus
:before

FF3, IE, Opera (~90%) :
:nth-child
:nth-last-child

Pour tout le monde :
XPath
:even
:odd
:eq()
:gt()
:lt()
etc.

Avec jquery (et forcément le très puissant prototype), tout cela sur
tous les navigateurs pas trop vieux (IE5 fonctionne la plupart du temps).

Pour ne parler que des sélecteurs.



Mouais !

Mais euh, depuis le temps que je fais du js intensif je n'ai jamais eu
besoin d'utiliser des sélecteur CSS et certainement pas les plus complexes.

A quoi peuvent bien servir les sélecteurs CSS dans une librairie JS ?

Franchement, à part une gestion des events je n'arrive pas à comprendre
à quoi d'autre ça pourrait servir (les sélecteurs CSS), hors une fois
qu'on a compris comment marche les events et surtout comment déléguer
(event delegation) je ne vois pas l'intérêt du sélecteur CSS, si ce
n'est d'aller rapidement placer XXX listeners sur XXX éléments, ce qui
est *très* mal.

Non mais sérieusement, à quoi ça sert concrètement les sélecteurs CSS
dans du code JS ?




Pas trop le temps de polémiquer, d'autant plus que ça ressemble
furieusement au thème "mais à quoi sert un cms ?", "mais à quoi sert le
fait de rendre un site compatible sur IE6 alors que FF c'est tellement
mieux ?", etc.

Je ne doute pas de votre grande connaissance en JS. Un peu plus de votre
expérience de créa de site internet.

Disons que les sélecteurs CSS2.1 et CSS3 ne servent à rien, puique vous
gérez tout avec vos 3 lignes de JS.

Moi, je me sers beaucoup de sélecteurs.

Je pense, par manque de temps (mais également de crainte de parler dans
le vide), les autres nombreux avantages de *certaines* bibli JS.

Comme je le disais, et on le voit ici, on se braque sur les bibli JS,
comme on se braque sur Flash, etc. C'est un état d'esprit, c'est comme ça.
Moi, j'utilise ce qui me parait utile, rapide, tout en gardant la notion
de "progressive enhancement", qui est rarement respecté par les codeurs
rebel, rarement sensibilisé à la notion d'accessibilité.

Alors soyons d'accord : faisons tous uniquement de l'assembleur et on
sera les meilleurs. Mais faudra bosser pour chaque machine, mais
finalement, on se fout de l'idée d'un truc universel.

Au passage, vive la mauvaise fois, puisque jQuery fait 15kb. Mais bon,
SAM a décider que jQuery et consors étaient de la merde, donc c'est ainsi.
Avatar
Pierre Goiffon
SAM wrote:
Les images sont disposées n'importe où dans la page, il y en a
plusieurs, on ne peut pas savoir à l'avance où elle sont



Je n'en vois pas trop l'utilité.



Un formulaire avec beaucoup de champs
A côté de certaines options on a cette icône permettant d'afficher une
aide contextuelle détaillant les usages...

Je t'engage sincèrement à trouver qque mns pour essayer le truc présenté
par Laurent.



Ca n'est pas applicable dans ce cas ! Suffit d'avoir d'autres choses à
gérer de ci de là dans la page (menu déroulant, onglets, ...), et le
gestionnaire d'événement va se charger dans des proportions
déraisonnables (en tout cas non maintenables).
Avatar
Sergio
Après mure réflexion, Pierre Goiffon a écrit :
Sergio wrote:
Non, ben justement, à peu près à égalité avec FF3 (P4HT 2,8GHz sous
XPSP3), que ce soit IE7, Opera ou Safari (les navigateurs "modernes"
installés sur ma machine).



Que veux dire le HT derrière le P4 ?
En tout cas il me semble qu'il s'agit d'une bête de course



Hyperthread. C'est à dire un "faux" biprocesseur :
http://fr.wikipedia.org/wiki/Hyper-Threading

Pas une bécane de course aujourd'hui (date de 2003).



Ha ok, c'est la génération avant les Core puis Core 2 ?



Pentium 4 "Northwood" 0,13µ. Bus 200MHz et FSB 800Mz (d'après Cpu-Z).
Donc bien avant la série Core.

CF ("sapiens cum wikipedia") :
http://fr.wikipedia.org/wiki/Intel_Pentium_4

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
SAM
Le 12/5/08 12:16 PM, Olivier Masson a écrit :

Au passage, vive la mauvaise fois, puisque jQuery fait 15kb. Mais bon,
SAM a décider que jQuery et consors étaient de la merde, donc c'est ainsi.



en parlant de mauvaise foi ... je viens de téléchrger la 1.2.6
et chez moi ça fait de 30 à 100ko

(à charger avant que de ne commencer à tenter quoi que ce soit)


Question subsidiaire à l'usage d'une bibli générique :

Vaut-il mieux se servir de la bibli sur le site de sa naissance ou bien
la faire charger depuis tous les sites qui s'en servent et qque fois en
différentes versions ?

Combien de fois retrouve t-on le même fichier dans le cache ?

J'espère seulement que la 1.2.6 est compatible avec la 0.0.1

--
sm
Avatar
Pierre Goiffon
SAM wrote:
Au passage, vive la mauvaise fois, puisque jQuery fait 15kb. Mais bon,
SAM a décider que jQuery et consors étaient de la merde, donc c'est
ainsi.





Olivier, rédiger un message sous le coup de la colère ne fait
certainement pas avancer la discussion.

en parlant de mauvaise foi ... je viens de téléchrger la 1.2.6
et chez moi ça fait de 30 à 100ko



La version minimale ET gzippée fait 15Ko en effet.
Ensuite sans le gzip mais en minimal c'est un peu plus de 50Ko
Et on peut ajouter aussi tout ce qui est UI... et éventuellement des
plugins !

15Ko pour les services que ça rend, c'est intéressant !

Question subsidiaire à l'usage d'une bibli générique :

Vaut-il mieux se servir de la bibli sur le site de sa naissance ou bien
la faire charger depuis tous les sites qui s'en servent et qque fois en
différentes versions ?



Chez Yahoo les différents modules de la librairie sont disponibles sur
le CDN de l'entreprise, et depuis peu aussi sur celui de Google [1].

Concernant les versions, je vais continuer de parler de la YUI que je
connais le plus... ce n'est pas toujours très chouette avec ça. J'ai
intégré la 2.3 dans le produit de ma société, et déjà à l'époque pendant
le développement le saut de 2.2 à 2.3 m'avait laissé quelques
surprises... Si aujourd'hui on devait passer en 2.6 ça demanderait
quelques efforts...
Cependant plus les versions montent et moins les widgets bougent (en 2.2
et 2.3 plusieurs des choses que l'on utilisait étaient encore en beta)

Pour JQuery à ma connaissance ces prb n'apparaissent pas sur la version
"standard". Par contre la partie UI et les plugins, j'ai bien peur que
ça soit problématique...


[1]
http://googleajaxsearchapi.blogspot.com/2008/11/welcome-yui-scriptaculous-gets-fresh.html
Avatar
Pierre Goiffon
Sergio wrote:
Pentium 4 "Northwood" 0,13µ. Bus 200MHz et FSB 800Mz (d'après Cpu-Z).
Donc bien avant la série Core.

CF ("sapiens cum wikipedia") :
http://fr.wikipedia.org/wiki/Intel_Pentium_4



Parcouru rapidement les articles de Wikipedia, ça permet de se remettre
un peu à jour :) Merci !