5546 sujets

Sémantique web et HTML

[Résolu] Comment gérer une liste sur plusieurs colonnes sans column

Bonjour,

Je cherche une solution pour afficher une liste sur plusieurs colonnes sans pour autant utiliser la propriété css column étant donné que je dois être compatible IE8.

Plusieurs solutions ne me satisfont pas pour le moment, je cherche donc un avis complémentaire à mes réflexions pour le moment infructueuses.

Solution 1 :

<ul class="col">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
</ul>
<ul class="col">
	<li>item 5</li>
	<li>item 6</li>
	<li>item 7</li>
	<li>item 8</li>
</ul>

Mon problème avec ce point, c'est que sémantiquement, je ne devrais avoir qu'une seule liste donc pas génial. Ca pourrait aller s'il existait une solution pour lier sémantiquement les deux listes pour n'en faire qu'une seule mais je ne crois pas que cela existe ou je n'ai jamais vu pour le moment.

Solution 2 :

<div role="list">
	<div class="col">
		<div role="listitem">item 1</div>
		<div role="listitem">item 2</div>
		<div role="listitem">item 3</div>
		<div role="listitem">item 4</div>
	</div>
	<div class="col">
		<div role="listitem">item 5</div>
		<div role="listitem">item 6</div>
		<div role="listitem">item 7</div>
		<div role="listitem">item 8</div>
	</div>
</div>

Le problème de cette solution est que le lecteur vocal considère que la liste contient 0 élément dans la mesure ou les listitem ne sont pas directement ses enfants.

Dernier détail, je ne peux à priori pas directement utiliser de css pour remonter les éléments de la liste via un margin-top ou quoi que ce soit étant donné que ces items peuvent eux même avoir des sous listes dont le nombre d'enfant n'est pas défini donc le margin-top devient aléatoire et donc pas possible de tout aligner correctement.

Du coup, si quelqu'un a un éclair de génie, je lui en serais très reconnaissant (même si ça ne suffit qu'à faire avancer le schmilblick parce que la je patauge un peu dans la choucroute).
Modifié par jbcordina (15 Dec 2014 - 01:27)
Tests complémentaires pour tentative de résolution de mon problème :
http://codepen.io/jbcordina/pen/raeKKj

L'idée ici est quand même de tenter une résolution avec une seule liste au lieu de 2 + css, ca marche quand on bosse dans un environnement statique mais dès qu'on est dans la vraie vie avec CMS, etc. ca coince...
Comme tu me parais toujours patauger, je te donne ma solution pour deux colonnes sans utiliser column, car je ne suis pas sûr qu'IE8 supporte des choses comme li:nth-child(n+3):nth-last-child(-n+2).

<!doctype html>
<html>
<head>
<title>page</title>
<style type="text/css">
body {
	font: 13px/15px Verdana;
	padding: 0;
	margin: 0;
}

article {
	width: 600px;
	margin: 0 auto;
}

.col li {
	width: 300px;
}

.col li + li + li + li +li {
	margin-left: 300px;
}

.col li.col2 {
	margin-top: -60px;
}
</style>
</head>

<body>
<article>
<ul class="col">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li class="col2">item 5</li>
	<li>item 6</li>
	<li>item 7</li>
	<li>item 8</li>
</article>
</body>
</html>


... mais ça ne fait pas avancer le schmilblick pour des colonnes égales avec un nombre d'items variable. Désolé. Je pense que tu devras passer par du JS.
Pour ta solution, on peut optimiser la gestion du margin-left de 

.col li + li + li + li +li {
	margin-left: 300px;
}

à ca :

.col2,
.col2 ~ li {
	margin-left: 300px;
}

Ca permet d'être un peu plus souple sur l'optimisation de la gestion d'un nombre d'éléments dynamiques et c'est compatible IE8.

Parcontre, effectivement, j'avais raté, la compatibilité de li:nth-child(n+3):nth-last-child(-n+2) avec IE8. Je fais joujou avec un peu de js du coup, je mettrais ma solution ici dès que j'aurais quelque chose. Ca me tue de faire de la mise en forme avec du js quand même...
Modifié par jbcordina (14 Dec 2014 - 16:03)
Bon, bah une première solution incluant du js et répondant à mes attentes :
http://codepen.io/jbcordina/pen/zxqaJz

Encore quelques petits soucis à gérer pour les textes d'items trop longs dans certains cas et le positionnement via js de la classe pour indiquer la séparation première / deuxième colonne et ce sera ok.
Un peu de test sur différents navigateurs aussi mais ca a pas l'air trop mal en IE8+...

D'un point de vue purement visuel, mon problème est résolu mais je serais curieux de savoir s'il existe des solutions purement sémantiques telles qu'exposées dans l'ouverture du sujet :
- moyen de relier 2 listes pour n'en avoir sémantiquement qu'une seule (mais ca je me fais pas d'illusion),
- gestion via des rôles aria (ou la je trouve presque bizarre/dommage qu'on ne puisse pas avoir de roles intermédiaires de type presentation entre list et listitem)
Modifié par jbcordina (15 Dec 2014 - 00:25)
Sujet clos
Aller à