Gestion des colspan – IE vs FF

Introduction

Lors de l'ajout de la fonctionnalité des multiheader dans le grid de SweetDev Ria, nous avons été confrontés à un problème de compatibilité entre Internet Explorer et Firefox.

Le but étant de pouvoir masquer une colonne dans la grid de SweetDev Ria.

Existence de <colgroup> et <cols>

Tout d’abord un petit rappel sur les structures des tables.
Nous sommes habitués à utiliser le tag <table> avec sa structure classique des <td> inclus dans des <tr>, voir nous utilisons le tag <th> pour avoir de beaux headers de colonnes. Cependant, il est moins connus d’utiliser la structuration des colonnes avec les deux tags que sont <colgroup> et <cols>, ceux-ci permettent ainsi d’appliquer un style à toute une colonne ou un groupe de colonnes.

Avec des colonnes normales sans colspan

Lorsque nous n’avons qu’une seule ligne de header dans la grid, le comportement est plutôt simple. Il suffit dans les grandes lignes de modifier le style de la balise <cols> correspondante. Seulement voilà, le comportement entre Internet Explorer et Firefox n’est pas le même.
Sous Firefox, nous utilisons la propriété visibility que nous mettons à collapse.  Le fait de mettre la visibility à collapse permet de masquer la colonne tout en récupérant la place par les autres colonnes.
Sous Internet Explorer, malheureusement la valeur collapse n’est pas autorisée pour la propriété visibility. Et nous devons utiliser autre chose à savoir display que nous mettons à none et width à 0px pour avoir le même effet que sous Firefox.
Voici le code utilisé dans la table :

<table width="500px" cellspacing="0" cellpadding="0" border="1">
<colgroup id="grid1_headTable_colgroup">
<col style="background-color:red" id="grid1_head_col_0"/>
<col style="background-color:white" id="grid1_head_spliter_0"/>
<col style="background-color:yellow" id="grid1_head_col_1"/>
<col style="background-color:lightblue" id="grid1_head_spliter_1"/>
<col style="background-color:lightgreen" id="grid1_head_col_2"/>
</colgroup>
<tr>
<td>th1</td>
<td>th2</td>
<td>th3</td>
<td>th4</td>
<td>th5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>

Et la fonction qui est contenu dans le bouton :

<script language="javascript">
function test(){
var maCol=document.getElementById("grid1_head_col_1");
maCol.style.visibility="collapse";
}
</script>

Ce qui donne ceci :

Avant de cliquer sur le bouton pour masquer la colonne
Avant de cliquer sur le bouton pour masquer la colonne
Après avoir cliqué sur le bouton "Test"
Après avoir cliqué sur le bouton "Test"

Dans l'autre cas :

<script language="javascript">
function test(){
var maCol=document.getElementById("grid1_head_col_1");
maCol.style.display="none";
maCol.style.width="0px";
}
</script>

Ce qui donne ceci :

Après click du bouton Test

Après avoir cliqué sur le bouton "Test"

Avec le problème du colspan et de la première colonne

La problématique était de rajouter un système de regroupement de colonnes afin de faire du multiheader. Jusque là tout va bien. Les tests que nous effectuons sont sur Firefox. Et donc les colonnes se masquent bien.
Nous faisons alors les tests sur Internet Explorer. Et là, los du masquage de la première colonne d’un groupe, la colonne se masque bien mais la totalité de label et du style du groupe disparait également. Ceci provient du fait que dans la structure de la table nous avons définit un regroupement de la colonne avec l’attribut colspan sur le nombre de colonnes contenu dans le groupe. Nous avons effectué alors effectués quelques tests.
Nous avons créé une table en html contenant des colspan, nous avons également ajouté un bouton qui grâce à du javascript à permis de masquer la première colonne d’un groupe.

<table width="500px" cellspacing="0" cellpadding="0" border="1">
<colgroup id="grid1_headTable_colgroup">
<col style="background-color:red" id="grid1_head_col_0"/>
<col style="background-color:white" id="grid1_head_spliter_0"/>
<col style="background-color:yellow" id="grid1_head_col_1"/>
<col style="background-color:lightblue" id="grid1_head_spliter_1"/>
<col style="background-color:lightgreen" id="grid1_head_col_2"/>
</colgroup>
<tr>
<td>thG1</td>
<td>thG2</td>
<td colspan="2">thG3</td>
<td>thG5</td>
</tr>
<tr>
<td>th1</td>
<td>th2</td>
<td>th3</td>
<td>th4</td>
<td>th5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>

Nous obtenu les résultats suivants :

Table contenant un colspan

Table contenant un colspan

Nous avons tout d’abord utilisé la propriété collapse de visibility (même fonction javascript que décrit dans la partie précédente) ce qui nous a donné les résultats suivants :

Après avoir cliqué sur le bouton "Test"

Après avoir cliqué sur le bouton "Test"

On peut que le résultat est à peu près le même que précédemment à l'exception que l'on perd le style au niveau du regroupement sous Firefox.

Nous avons ensuite essayé le display :none ; width :0px . Voici les résultats :

Après avoir cliqué sur le bouton "Test"

Après avoir cliqué sur le bouton "Test"

On peut voir que la colonne est bien masquée sur Internet Explorer, mais par contre le label a disparu ainsi que le style du regroupement. Ce qui pourrait apparaitre comme étant une réaction tout à fait normal, en effet, on demande au navigateur de masquer une colonne, chose qu'il fait sans se soucier si il y ou non un colspan présent.

Conclusion

Ce problème nous a permis de mettre en évidence un point qui n'est pas trivial. En effet, nous n'avons pas trouvé d'informations particulièrement précises vis à vis de ce problème sur Internet. Il y a bien des sites qui précisent la compatibilité des fonctions et propriétés CSS qui fonctionnent ou non en fonction des navigateurs, mais sans avoir pour autant les solutions à ces différents problèmes.

Pour notre part nous nous referons souvent au site suivant : http://www.quirksmode.org/ qui se veut être une référence dans le domaine

Dans notre cas précis nous nous sommes basés sur cette page là : http://www.quirksmode.org/css/columns.html

Encore une fois, nous nous sommes rendu compte que nous avons pris l'habitude de développer sur Firefox (essentiellement à cause des différents plugins facilitant la vie du développeur) et en pensant que les réactions sont les mêmes sur Internet Explorer (et je ne parle pas ici des autres navigateurs, mais le problème est le même).

Ainsi l'utilisation des CSS nécessite une grande connaissance de leurs rendus sur les différents navigateurs et augmente de manière non négligeable le temps de développement, chose souvent non anticipé.

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.