methode pour gere css et navigateurs

SAM

02/12/2008 à 11:35

Le 12/2/08 9:54 AM, J-F Portala a écrit :

merci pour vos suggestions,
mais je pensais qu'il avait des outils (un peu plus évolués que le code
source de la page)

Le javascript ?

window.onload = function() {
var t = document.getElementsByTagName('TR');
(for(var i=0, n=t.length; i<n; i++)
if(i%2==0) t[i].className='gr';
}

pour travailler avec les CSS et les différents navigateurs.

Dans le code source de la page, si on utilise des classes, on voit juste la
référence à la classe, sans avoir le détail.

et où est le problème ?

c'est quand même :
- plus propre
- moins lourd que de styler chaque cellule de la rangée
10% de poids gagné !

--
sm

SAM

02/12/2008 à 11:37

Le 12/2/08 10:18 AM, Olivier Masson a écrit :

Et donc on utilise un bibli JS comme les excellents prototype ou jquery

T'es louff ou quoi ?
1) ces biblis sont codées avec les pieds
2) 4 lignes de code suffisent

--
sm

SAM

02/12/2008 à 11:47

Le 12/2/08 11:12 AM, Pierre Goiffon a écrit :

Olivier Masson wrote:
Et donc on utilise un bibli JS comme les excellents prototype ou
jquery car 98% des internautes ont JS d'activé. Et les autres, c'est
de la nav texte donc on se fout de ce type de présentation.

C'est une opinion qui me parait un peu excessive ! JavaScript n'est pas
toujours utilisable et cela peut poser des prb...

Heu ... ça doit foonctionner sans JS, toujours !
Ou alors c'est qu'on s'adresse à une clientelle qui sera obligée de
l'adopter (même pb que pour le Flash).

Les applications Web
présentant des grands tableaux de données sont souvent utilisées en
entreprise, et certaines bloquent carrément le Js sur leur proxy...

Alors là, on s'en br...e !
Les applis avec de grands tableaux sont automatisées yaka prévoir le
truc côté serveur (1 ligne maxi à rajouter), c'est tout.

Tout dépend de quelle importance on accorde à cette décoration : si
c'est vraiment accessoire alors on pourra le faire en JavaScript

c'est forcémet accessoire, n'ajoute qu'un peu de commodité à la lecture
(visuelle !).

(attention à l'impact sur les performances client tout de même !)

Nulle si on n'a que ça à faire une class toutes les 2 rangées.
(sauf avec IE assez poussif avec les tables )

Souvent cependant cette décoration est indispensable à la lecture des
données...

seulement si on y voit.

--
sm

Olivier Miakinen

02/12/2008 à 11:55

Le 02/12/2008 11:13, Pierre Goiffon a écrit :

Et si tu as utilisé la pseudo-classe CSS3 « :nth-child »

!!
Ouch mes excuses, ça fait 2 fois que je donne dans un fil une réponse
qui avait été déjà donnée...

Ce n'est pas grave, d'autant plus que tu avais donné une réponse plus
complète que la mienne avec l'URL suivante :
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-pseudos

Décidemment, vivement les vacances ;)

Néanmoins, ceci reste vrai.

SAM

02/12/2008 à 13:18

Le 12/2/08 11:35 AM, SAM a écrit :

Le 12/2/08 9:54 AM, J-F Portala a écrit :
merci pour vos suggestions,
mais je pensais qu'il avait des outils (un peu plus évolués que le
code source de la page)

Le javascript ?

window.onload = function() {
var t = document.getElementsByTagName('TR');
(for(var i=0, n=t.length; i<n; i++)
if(i%2==0) t[i].className='gr';
}

un peu mieux :

<body onload="if(document.getElementsByTagName){
var t = document.getElementsByTagName('TR');
if(t.length)(for(var i=0, n=t.length; i<n; i++)
if(i%2==0) t[i].className='gr';}">

<noscript>
<h2 style="color:red">
sortez votre surligneur et colorisez une rangée du deux pour plus de
lisisibilité
</h2>
</noscript>

--
sm

Olivier Masson

02/12/2008 à 14:07

SAM a écrit :

T'es louff ou quoi ?
1) ces biblis sont codées avec les pieds

Là, avec tout le respect que je te dois, tu me fais bien marrer.

2) 4 lignes de code suffisent

Pour faire une zébrure, oui. 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.

Olivier Miakinen

02/12/2008 à 14:11

Le 02/12/2008 13:18, SAM a écrit :

<noscript>
<h2 style="color:red">
sortez votre surligneur et colorisez une rangée du deux pour plus de
lisisibilité
</h2>
</noscript>

:-D

Olivier Masson

02/12/2008 à 14:13

Olivier Masson a écrit :

Olivier Miakinen a écrit :

Difficile de te répondre comme ça, parce qu'une grande partie des bugs
d'Internet Explorer consiste juste en des trucs non implémentés. Il y a
peut-être des sites qui les recensent, mais sinon la lecture régulière
de ce groupe permet d'en connaître pas mal.

Commencer par utiliser ce travail plutôt exhaustif (hors navigateurs
manquants)

Je note au passage que mon message a été bien lu...
J'ai donc oublié le lien (plus un bonus du coup) :
http://www.webdevout.net/browser-support-css
http://www.quirksmode.org/css/contents.html

Laurent vilday

02/12/2008 à 15:57

Pierre Goiffon :

Sergio :
Bien, mais pas moyen de le faire automatiquement ? Parce quand on
rajoute une ligne, il faut tout décaler, et du coup, on peut se planter.

Il me semble de manière assez sûre que les sélecteurs CSS3 apportent des
réponses à ce prb ?
http://www.alistapart.com/articles/zebratables
Qui renvoie vers :
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-pseudos

Sinon à ce jour on est obligé de se débrouiller... La plupart du temps
c'est un traitement serveur qui va générer de toute façon le tableau :
on a particulièrement besoin de ces alternances sur de gros tableaux,
ils sont souvent générés côté serveur depuis une source de données. Donc
on adapte ce traitement pour qu'il génère une fois sur 2 un class=...
On peut aussi le faire avec un script JavaScript... JQuery parait un bon
candidat pour réaliser ce genre de choses (on peut aussi le faire
soit-même)

Euh, JQuery pour faire un bête zebra des fils d'un élément ? Ca me
parait un peu trop pour le besoin, de toute façon JQuery est (entre
autre) trop lourd pour tout et n'importe quoi.

// pour structures simples parent/child
// du style <ul><li>, <tr><td>, etc.
function zebra(elt)
{
var
i,
pos = 0,
c = elt.childNodes,
odd = arguments[1] || 'odd',
even = arguments[2] || 'even';
for ( i = 0; i < c.length; i++ )
{
// 1 == document.ELEMENT_NODE
if ( c[i] && c[i].nodeType == 1 )
{
c[i].className = pos%2? odd:even;
pos++;
}
}
}

// pour structures tablesques plus complexes, parent/child/child/
// du style <table><tbody><tr>
function zebraTable(tbl)
{
var
i, j, c,
pos = 0,
tbodies = tbl.tBodies,
odd = arguments[1] || 'odd',
even = arguments[2] || 'even';
for ( i = 0; i < tbodies.length; i++ )
{
c = tbodies[i].childNodes;
for ( j = 0; j < c.length; j++ )
{
// 1 == document.ELEMENT_NODE
if ( c[j] && c[j].nodeType == 1 )
{
c[j].className = pos%2? odd:even;
pos++;
}
}
}
}

Evidemment, tout est a adapter selon les exigences du contexte :
- reinit odd/even quand on sort/entre d'un tbody ?
- conserve className existant ?
- cycle sur X pas au lieu de Y pas, 2 en l'occurence (odd/even) ?
- tests de contrôle basique du genre, mon élément est bien là ?
- etc.

--
laurent

Pierre Goiffon :

Sergio :

Bien, mais pas moyen de le faire automatiquement ? Parce quand on
rajoute une ligne, il faut tout décaler, et du coup, on peut se planter.

Il me semble de manière assez sûre que les sélecteurs CSS3 apportent des
réponses à ce prb ?
http://www.alistapart.com/articles/zebratables
Qui renvoie vers :
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-pseudos

Sinon à ce jour on est obligé de se débrouiller... La plupart du temps
c'est un traitement serveur qui va générer de toute façon le tableau :
on a particulièrement besoin de ces alternances sur de gros tableaux,
ils sont souvent générés côté serveur depuis une source de données. Donc
on adapte ce traitement pour qu'il génère une fois sur 2 un class=...
On peut aussi le faire avec un script JavaScript... JQuery parait un bon
candidat pour réaliser ce genre de choses (on peut aussi le faire
soit-même)

Euh, JQuery pour faire un bête zebra des fils d'un élément ? Ca me
parait un peu trop pour le besoin, de toute façon JQuery est (entre
autre) trop lourd pour tout et n'importe quoi.

// pour structures simples parent/child
// du style <ul><li>, <tr><td>, etc.
function zebra(elt)
{
var
i,
pos = 0,
c = elt.childNodes,
odd = arguments[1] || 'odd',
even = arguments[2] || 'even';
for ( i = 0; i < c.length; i++ )
{
// 1 == document.ELEMENT_NODE
if ( c[i] && c[i].nodeType == 1 )
{
c[i].className = pos%2? odd:even;
pos++;
}
}
}

// pour structures tablesques plus complexes, parent/child/child/
// du style <table><tbody><tr>
function zebraTable(tbl)
{
var
i, j, c,
pos = 0,
tbodies = tbl.tBodies,
odd = arguments[1] || 'odd',
even = arguments[2] || 'even';
for ( i = 0; i < tbodies.length; i++ )
{
c = tbodies[i].childNodes;
for ( j = 0; j < c.length; j++ )
{
// 1 == document.ELEMENT_NODE
if ( c[j] && c[j].nodeType == 1 )
{
c[j].className = pos%2? odd:even;
pos++;
}
}
}
}

Evidemment, tout est a adapter selon les exigences du contexte :
- reinit odd/even quand on sort/entre d'un tbody ?
- conserve className existant ?
- cycle sur X pas au lieu de Y pas, 2 en l'occurence (odd/even) ?
- tests de contrôle basique du genre, mon élément est bien là ?
- etc.

--
laurent

Vous avez filtré cet utilisateur ! Consultez son message

Pierre Goiffon :

Sergio :
Bien, mais pas moyen de le faire automatiquement ? Parce quand on
rajoute une ligne, il faut tout décaler, et du coup, on peut se planter.

Il me semble de manière assez sûre que les sélecteurs CSS3 apportent des
réponses à ce prb ?
http://www.alistapart.com/articles/zebratables
Qui renvoie vers :
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-pseudos

Sinon à ce jour on est obligé de se débrouiller... La plupart du temps
c'est un traitement serveur qui va générer de toute façon le tableau :
on a particulièrement besoin de ces alternances sur de gros tableaux,
ils sont souvent générés côté serveur depuis une source de données. Donc
on adapte ce traitement pour qu'il génère une fois sur 2 un class=...
On peut aussi le faire avec un script JavaScript... JQuery parait un bon
candidat pour réaliser ce genre de choses (on peut aussi le faire
soit-même)

Euh, JQuery pour faire un bête zebra des fils d'un élément ? Ca me
parait un peu trop pour le besoin, de toute façon JQuery est (entre
autre) trop lourd pour tout et n'importe quoi.

// pour structures simples parent/child
// du style <ul><li>, <tr><td>, etc.
function zebra(elt)
{
var
i,
pos = 0,
c = elt.childNodes,
odd = arguments[1] || 'odd',
even = arguments[2] || 'even';
for ( i = 0; i < c.length; i++ )
{
// 1 == document.ELEMENT_NODE
if ( c[i] && c[i].nodeType == 1 )
{
c[i].className = pos%2? odd:even;
pos++;
}
}
}

// pour structures tablesques plus complexes, parent/child/child/
// du style <table><tbody><tr>
function zebraTable(tbl)
{
var
i, j, c,
pos = 0,
tbodies = tbl.tBodies,
odd = arguments[1] || 'odd',
even = arguments[2] || 'even';
for ( i = 0; i < tbodies.length; i++ )
{
c = tbodies[i].childNodes;
for ( j = 0; j < c.length; j++ )
{
// 1 == document.ELEMENT_NODE
if ( c[j] && c[j].nodeType == 1 )
{
c[j].className = pos%2? odd:even;
pos++;
}
}
}
}

Evidemment, tout est a adapter selon les exigences du contexte :
- reinit odd/even quand on sort/entre d'un tbody ?
- conserve className existant ?
- cycle sur X pas au lieu de Y pas, 2 en l'occurence (odd/even) ?
- tests de contrôle basique du genre, mon élément est bien là ?
- etc.

--
laurent

Laurent vilday

02/12/2008 à 16:08

Pierre Goiffon :

Olivier Miakinen :
Et si tu as utilisé la pseudo-classe CSS3 « :nth-child »

!!
Ouch mes excuses, ça fait 2 fois que je donne dans un fil une réponse
qui avait été déjà donnée... Décidemment, vivement les vacances ;)

Bienvenu dans mon club, j'suis un spécialiste :)

--
laurent

methode pour gere css et navigateurs

10 réponses

Veuillez sélectionner un problème