5568 sujets

Sémantique web et HTML

[Résolu] Details et Summary sous Edge

Bonsoir à tous,

J'ai fait une recherche sur Google, mais je tombe sur des forums anglais et je ne parle pas anglais :x

Comment faire pour que 
Details
et 
Summary
soient actifs sous edge, il y a un correctif possible ? Je l'utilise en bas de page pour mettre des articles comme une sorte de blog, donc si on ne voit que le titre ça ne prend pas de place, par contre si on voit tout ça prend beaucoup de place… j'ai testé sur plein de navigateurs et seul edge snobe ces balises (encore et toujours microsoft, comme pour les onglets dans l'explorateur qu'on attend depuis 10 ans !)…

Merci Smiley smile
Modérateur
Bonjour,

Tu peux au choix :
1) oublier edge vu leur part de marché (leurs utilisateurs ont l'habitude que ça marche mal de toute façon)
2) attendre que edge supporte "details" et "summary" (je pense que ça ne devrait pas tarder parce qu'il semble que Microsoft veuille enfin faire ce qu'il faut, mais ça peut aussi ne jamais arriver)
3) utiliser ce qu'on appelle un polyfill, c'est à dire un code qu'on insère dans la page et qui fait en sorte que tout fonctionne correctement. J'en ai trouvé un, mais que je n'ai pas testé (teste-le et dis si ça marche ou pas) :

<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>

EDIT: je viens de voir qu'il y a une version plus récente (ils annoncent plus de 6 000 000 d'utilisation le mois dernier, tu ne seras pas tout seul à l'utiliser). A priori, ça se met n'importe où entre les balises <body> et </body>.

 <script src="//cdn.jsdelivr.net/npm/details-polyfill@1.1.0/index.min.js" async></script>

4) utiliser des bidouilles variées que je ne détaillerai pas : ton code ne mérite pas ça très certainement (i.e. vaut mieux que ça et ne mérite pas ce mauvais traitement)

A ta place, je teste le 3) et si ça ne marche pas je fais le 2) (attendre sans rien faire).

Amicalement,
Modifié par parsimonhi (04 Nov 2019 - 23:44)
parsimonhi a écrit :

2) attendre que edge supporte "details" et "summary" (je pense que ça ne devrait pas tarder parce qu'il semble que Microsoft veuille enfin faire ce qu'il faut, mais ça peut aussi ne jamais arriver)


Bonjour,

A ce propos, non pas que Microsoft projette de faire ce qu'il faut mais simplement qu'il enterre Edge au profit de Chrome. En effet, MS compte s'appuyer sur Chrome pour son nouveau navigateur, utiliser le moteur de rendu de celui-ci et participer activement au développement même de celui-ci.

Perso, I.E. et Edge sont déjà morts à mes yeux et les motifs m'ayant poussés à cette conclusion sont nombreux (faible part de marché, développement marginal tout comme son utilisation, facilité pour l'utilisateur de switcher vers un autre navigateur etc).

Quoi qu'il en soit, details et summary ne seront jamais pris en charge par Edge. Une autre solution, si toutefois vous persistez à vouloir les rendre "compatible" est de vous appuyer sur le CSS. Un exemple ici.
Bonjour à tous,
Merci de vos réponses Smiley smile

C'est bien si, enfin, Microsoft prend un moteur normalisé pour son navigateur. Mais bon, ça craint un peu quand même que tous les navigateurs soient désormais des surcouches de Chromium… Vivaldi, Brave, Opera etc. Il n'y a que Firefox qui résiste ^^

Pour le polyfill. J'ai donc testé les deux. Pour moi, sur Edge, ça replie bien les textes, mais déjà ça met tout en inline et ensuite ça ne déplie rien.

Mais comme tu m'as donné le nom de polyfill, j'ai cherché un peu et en ai testé plusieurs ^^
Celui là fonctionne bien : https://www.npmjs.com/package/details-element-polyfill

Petite question quand même, afin de minimiser la charge serveur, comment puis je restreindre l'appel de ce script 
<script src="details-element-polyfill.js" async></script>
au seul navigateur Edge ?
Raphael avait fait un article intéressant sur le sujet, mais depuis IE10 plus possible de les utiliser
https://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html …

Du coup comment fait-on ? Car c'est quand même 7 ko de chargé juste pour Edge et IE… ^^

Merci
Modérateur
Bonjour,

robert72 a écrit :
Bonjour à tous,
Mais comme tu m'as donné le nom de polyfill, j'ai cherché un peu et en ai testé plusieurs ^^
Celui là fonctionne bien : https://www.npmjs.com/package/details-element-polyfill


Bien joué !

robert72 a écrit :

Petite question quand même, afin de minimiser la charge serveur, comment puis je restreindre l'appel de ce script ... au seul navigateur Edge ?


Aucune idée. Mais bon, 7ko, c'est tout petit, et en plus, il va être en cache ensuite.

Amicalement,
Meilleure solution
Bonsoir,

Perso j'aime mieux la solution JS du polyfill (qui reste en effet lèger et sera mis en cache je pense aussi) que du Query parce que rien que jsquery c'est 84.8 ko Smiley cligne

Donc beaucoup trop lourd à mon gout ^^

Bonne soirée
Sujet clos
Aller à