[Résolu] SELECT imbriqués, c'est imposible

(reprise du message précédent)

Bonjour,

boteha_2 a écrit :
Est-ce assez bien supporté, question importante ?

C'est supporté assez largement. On oublie ie, mais bon, ie est-il encore un navigateur ?

Il y a quelques petits bugs mineurs d'affichage qui peuvent se manifester ici et là, mais ça marche quand même pas trop mal.

Surtout, ça permet d'afficher/cacher du contenu facilement sans bricolage et sans js. C'est son point fort.

Voir https://jeudego.org (qui est le site mentionné dans mon profil) en fenêtre pas trop large. On peut alors afficher/cacher le menu en cliquant sur "menu" en haut à gauche ("menu" n'apparait que si la fenêtre n'est pas trop large).

Ça marche aussi si on désactive js (j'ai prévu dans ce cas un comportement un peu différent : le menu peut être caché/affiché quelque soit la taille de la fenêtre).

Lorsqu'il n'y a qu'un contenu d'un seul niveau, tout un tas d'autres solutions sont possibles. Mais si tu passes à un contenu avec plusieurs niveaux d'imbrication (comme cela semble être ton cas), ça peut devenir vraiment intéressant d'utiliser la balise <details>.

Amicalement,

Bonjour parsimonhi,

Merci pour ton suivi.

Je trouve ton lien Menu sur jeudego.org magnifique.

Je vais réfléchir à utiliser <details> pour mon problème.

Je vous tiens informés.

Bonjour,

Parsimonhi m'a convaincu de l'intérêt de <details>, ce n'est pas tous les jours qu'une petite balise hrml peut remplacer plusieurs lignes de codes JS et CSS.

J'essaierai quand même de trouver une alternative pour IE.
Au cas où IE traite <details> comme un <div> cela ne devrait pas être trop difficile.

Mon nouveau codepen présente donc les deux options : JS ou <details>

Par contre, en terme de positionnement, je ne vois par du tout comment placer le titre "Produit 1979" sur la même ligne que le bouton summary, comme c'était fait facilement avec le <button>.

Je précise que la largeur de "Produit 1979" est inconnue, elle varie selon les numéros de produits et je n'ai aucune envie de la calculer avec JS.

En CSS, voyez-vous une stratégie de positionnement possible ?

Bonjour,

J'ai mis en place <details> sur mon site de test et cela semble bien fonctionner.

Juste deux remarques.

1)
Pour limiter la zone active de <summary> à son contenu j'ai été étonné de devoir ajouter :

summary {display: list-item inline}

Sans cette déclaration la zone active s'étend à toute la largeur du bloc parent.
Sans le type list-item (qui est par défaut celui de summary) on perd le petit triangle.
J'en conclus que par défaut le display de summary est : list-item block

2) Sur le dernier IE (IE 11 je suppose) <details> est ouvert et aucune action sur summary n'est possible.
J'ai cherché des techniques pour cibler IE mais rien trouvé de convaincant.

On va dire que plus personne n'utilise IE.
Modifié par boteha_2 (02 Jan 2022 - 20:43)

Bonsoir et bonne Année à tous.

Float peut éventuellement être appliqué au p qui se tient juste devant details : https://codepen.io/gc-nomade/pen/mdBxgRg

Cdt

edit: Pour les vieux IE, si tu as déjà un polyfill , peut-être en changer ou le compléter.
Modifié par gcyrillus (02 Jan 2022 - 23:11)

Bonjour,

1) Intéressante remarque. J'en étais resté pour supprimer le triangle à une combine compliquée :

summary
{
	list-style-type:none; /* Firefox */
}
summary::-webkit-details-marker
{
	display:none; /* Chrome */
}

Ta solution pourrait simplifier les choses dans pas mal de cas (à vérifier les implications éventuelles).

2) En 2022, IE n'est plus un navigateur !

Amicalement,
Modifié par parsimonhi (03 Jan 2022 - 12:35)

Bonjour,

Merci de votre suivi.

1) Float, Ok.

2) Dès que tu affectes à summary un display autre que list-item le triangle disparait.
Notamment avec inline ou inline-block que j'ai testés.

3) Edge ne comprend pas cette déclaration

summary {display: list-item inline}

Pourtant à ma connaissance c'est du CSS 3.

4)

a écrit :
Pour les vieux IE, si tu as déjà un polyfill , peut-être en changer ou le compléter.

Je n'ai rien pour IE, je me suis débrouillé pour avoir du code compatible mais avec <details> je ne vois pas comment faire.

Bonjour,

Chrome ne comprend pas bien non plus cette déclaration :

summary {display: list-item inline}

Comme avec Edge, summary est un bloc de la largeur du parent de details.
Il n'y a que Firefox qui fait le boulot.

Par contre, en changeant le display de details :

details {display: inline-block}
summary {display: list-item inline}

Cette fois le résultat est celui attendu, la largeur de summary est celle du contenu et il y a le triangle.
Je ne comprends pas mais cela marche avec les trois navigateurs sur PC.
Je vais tester sur téléphone.

EDIT :

En fait seule la déclaration sur détails suffit :

details {display: inline-block}

Dans ce cas :

summary
conserve list-item comme type d'affichage intérieur.
adopte inline comme type d'affichage extérieur.
Modifié par boteha_2 (03 Jan 2022 - 22:11)

Bonjour,

Pour Chrome sous Androïd, il faut les deux déclarations :

details {display: inline-block}
summary {display: list-item inline}

Et Firefox sous Androïd continue à considérer summary comme si display block, je trouve cela étonnant.

Je n'ai pas Safari sous la main.

Autrement, je me suis dit qu'il pourrait être sympa sur les téléphones de fermer le details par un clic n'importe-où sur la page.

J'ai tenté ce code JS :

const tableau = document.querySelector ('details');

document.body.addEventListener ('click', function ()
{
if (tableau.getAttribute('open') == 'open') {tableau.setAttribute ('open', '');}
});

Cela ne marche pas, voyez-vous où est l'erreur ?
Modifié par boteha_2 (09 Jan 2022 - 12:45)

Bonjour,

Ça a l'air de fonctionner avec Safari sous Mac OS sans problème.

Pour changer la valeur de l'attribut "open" qui est un booléen :

if (tableau.getAttribute('open')) {tableau.setAttribute ('open', false);}

Amicalement,

Bonjour parsimonhi,

Merci de ton suivi.

J'ai fait un copier-coller de ton code :

const tableau = document.querySelector ('details');

document.body.addEventListener ('click', function ()
{
if (tableau.getAttribute('open')) {tableau.setAttribute ('open', false);}
});

Et à mon grand étonnement cela ne fonctionne pas, voir le codepen.

Bonjour,

boteha_2 a écrit :
Et à mon grand étonnement cela ne fonctionne pas, voir le codepen.

1) Ma mère m'a toujours dit : "teste toujours avant de donner une solution !". J'ai été fainéant, je n'ai pas testé, et je me suis fait prendre.

2) Je ne comprends rien à Code pen (et je m'en méfie quand on fait dans le bizarre).

3) Quand on manipule des attributs boléens, c'est délicat d'utiliser les méthodes getAttribute() et setAttribute(). Les tests et les changements d'état se font de manière moins naturels, et c'est vite fait de se tromper. Il est plus facile d'utiliser :

if(e.a) e.a=false

plutôt que quelque chose du genre

if(e.getAttribute('a')!==null) e.removeAttribute('a');

4) Il faut aussi se méfier de document.body : un clic n'importe où dans la fenêtre sera-t-il capturé comme attendu ?

5) Le code ci-dessous semble fonctionner :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<details><summary>Table d'orientation</summary>
Contenu de ma table d'orientation
</details>
<p>La suite</p>
<script>
document.addEventListener('click',function(ev){
	let e=document.querySelector('details');
	if(e.open)
	{
		ev.preventDefault();
		e.open=false;
	}
});
</script>
</body>
<html>

EDIT: j'ai rajouté la ligne ev.preventDefault(); car sinon, un clic sur <summary> quand <details> est "ouvert" a certes pour effet de "fermer" <details> mais aussi de le "ré-ouvrir" immédiatement.

6) C'est selon moi une mauvaise idée de faire une action sur un clic de l'utilisateur "n'importe où" dans une fenêtre. On s'expose avec une forte probabilité à des comportements inattendus ou non désirés par l'utilisateur dès que la page devient un peu complexe.

Amicalement,
Modifié par parsimonhi (07 Jan 2022 - 07:51)

Bonjour parsimonhi,

Ton code fonctionne parfaitement sur le codepen.

Je le mets ce soir sur le site de test.

parsimonhi a écrit :
6) C'est selon moi une mauvaise idée de faire une action sur un clic de l'utilisateur "n'importe où" dans une fenêtre. On s'expose avec une forte probabilité à des comportements inattendus ou non désirés par l'utilisateur dès que la page devient un peu complexe.

Entièrement d'accord.
Cette action ne sera disponible que sur les téléphones, pas sur les PC.
C'est demandé par certains utilisateurs et en l’occurrence si action non désirée tu peux corriger rapidement en recliquant sur summary.

Bonjour,

Un dernier détail sur details...

parsimonhi a écrit :
EDIT: j'ai rajouté la ligne ev.preventDefault(); car sinon, un clic sur <summary> quand <details> est "ouvert" a certes pour effet de "fermer" <details> mais aussi de le "ré-ouvrir" immédiatement.

ev.preventDefault();
Le problème est que les liens dans la balise details sont alors bloqués.
Normal ?

Par contre cela semble bien marcher avec :
ev.stopPropagation ();

Bonjour,

boteha_2 a écrit :
Le problème est que les liens dans la balise details sont alors bloqués.
Normal ?

Tout dépend de ce que tu veux faire. Il faut adapter. Et tu n'as pas fini de devoir adapter. C'est la raison pour laquelle je n'aime pas ces clics "globaux".

Amicalement,

Bonjour,

parsimonhi a écrit :

Tout dépend de ce que tu veux faire. Il faut adapter. Et tu n'as pas fini de devoir adapter. C'est la raison pour laquelle je n'aime pas ces clics "globaux".

Comme déjà dit je suis 99 % d'accord.

Le 1 % ce sont les utilisateurs qui sur téléphone aiment bien pouvoir fermer en cliquant n'importe-où.

Dans un premier temps je vais mettre en production la version sans le javascript, donc sans clic global.

J'attends un peu avant de cocher Résolu.

Encore MERCI de ton aide.

Bonjour,

Je pense que c'est impossible mais je pose la question.

Y a-t-il un moyen de tester la prise en compte de <details> par le navigateur ?

Par exemple, existe-t-il un équivalent à ce type de déclaration ?

@supports not (display: contents)
{
ma feuille de style alternative
}

Je n'ai pas trouvé la réponse dans cette doc sur @supports.

Cela dit un vieux coucou qui ne comprend pas <details> ne comprendra sans doute pas plus @supports not .

Merci d'avance de vos lumières.
Modifié par boteha_2 (15 Jan 2022 - 15:49)

Bonjour,

Il est évidemment possible de tester si la balise details est comprise par le navigateur. Par exemple :

1) Tu fais un petit code javascript sur un navigateur moderne qui :
- récupère l'objet du DOM correspondant à la balise "details"
- liste les propriétés de l'objet et ses méthodes

2) Pour fabriquer ton test en js, il suffit alors qu'il récupère l'objet du DOM correspondant à la balise "details" et qu'il teste l'existence de l'une des propriétés ou méthodes de l'objet, qui sont spécifiques de la balise "details". Sur un navigateur ne supportant pas la balise "details" ces propriétés ou méthodes n'existeront pas dans l'objet correspondant à la balise "details".

Cette méthode est généralisable à toute sorte de balises et de propriétés.

Ceci dit, comme tu le supposais en fin de ton post, ça n'a sans doute aucun intérêt en 2022 de tester si "details" est supportée ou pas. Si c'était moi qui faisais ce code, je ne testerais pas.

Amicalement,
Modifié par parsimonhi (15 Jan 2022 - 20:32)

Bonjour parsimonhi,

Merci de ton suivi.

Tu me dis que c'est possible avec JS.

Aucune solution en CSS, voire en HTML ?

Bonjour,

En cherchant bien, on devrait pouvoir trouver sur les vieux navigateurs qui seraient concernés (c'est à dire ne supportant pas la balise "details"), des propriétés css permettant de cibler ces navigateurs uniquement et en conséquence on pourrait imaginer de faire un code css pour ces navigateurs-là. Il y a par exemple des tas de moyens de faire du code css pour le non-navigateur ie.

Mais si tu fais ça, tu perds ton temps, et celui de la quasi-totalité de tes visiteurs qui vont attendre une fraction de seconde supplémentaire que tes hacks se chargent pour rien.

À proscrire selon moi !

Le meilleur service que tu puisses rendre à la planète, c'est de ne rien faire pour sauver la mise des utilisateurs surfant avec des navigateurs hors d'âge, de manière à ce qu'on en soit débarrassé le plus vite possible.

Amicalement,