Détection du navigateur

[MrAlinoe]

Alors je sais, c'est probablement débile comme question, mais comment savoir (via JavaScript de préférence), quel navigateur est utilisé...

J'en ai besoin car je me suis aperçu d'une erreur de positionnement avec Firefox et Edge, erreur qui n'est pas présente sur Chrome, je sais comment la corriger, mais il me faut savoir justement si le navigateur utilisé doit oui ou non afficher la correction...

En cherchant en ligne je suis tombé sur l'objet "navigator", qui pour ma part ne parvient pas à me donner le navigateur...

Existe t-il une solution?
Merci d'avance...

[Xenos]

Salut,
ouh, alors ça, c'est la question ultra-récurrente dont la réponse est soit choppe une lib qui le fait plus ou moins bien, soit laisse tomber.

Je pense que la bonne optique ici est de laisser tomber car:
• Es-tu *vraiment* sûr que Firefox/Edge positionnent mal l'élément? C'est peut-être Webkit qui se gourre
• Es-tu sûr que tu n'as pas mal balisé/mal déclaré tes règles CSS? Il se peut que ce soit, par exemple, une mauvaise application de la width théorique et réelle (faut que je retrouve les noms exacts de ces deux concepts). Là, ça se "patch" simplement par l'application de la bonne règle CSS.
• Un ticket est-il ouvert chez ces deux navigateurs pour ce problème? Si oui, attends juste qu'il soit soldé. Perso, Firefox avait planté les bordures de https://iamanoc.com (bordures custom SVG, la v50 était buggée; 2 semaines après, c'était corrigé, sans rien à faire de ma part (et surtout, sans devoir par la suite hériter d'un patch custom perso).

Montre-nous ce soucis de position, ce sera sûrement plus simple pour le résoudre (parce que ton problème n'est pas "détecter le navigateur", c'est "résoudre mon bug de positionnement"; détecter le navigateur et appliquer un patch, c'est une solution très très lourde qui amènera des tas d'effets collatéraux, certainement pires que le problème initial).

[MrAlinoe]

Non c'est bon j'ai trouvé...
J'ai trouvé une fonction qui récupère le nom d'un navigateur, je ne la comprend pas vraiment, mais bon ça marche...

Merci quand même

[Xenos]

Perso, je te repréviens, pardon d'insister, mais tu patches la conséquence d'un problème... Je ne saurai que trop te conseiller de bien être sûr de l'origine du problème, de bien être sûr qu'il ne s'agit pas d'un soucis de ton code (90% du temps, c'est le cas) avant d'ajouter de la complexité à ton projet...

Sinon, laisser le lien vers ladite fonction sera utile aux autres

[MrAlinoe]

J'ai vérifié. La position est en mode fixe avec des coordonnées précises... Sur Firefox et Edge, les éléments ayant un problème de position sont situés à -5 pixels (sur chacun des deux axes) de la position demandée...

Après j'utilise Chrome donc je me suis tardivement aperçu du problème...

Pour ceux que ça intéresse voici la fonction que j'ai trouvé:
https://www.scriptol.fr/javascript/scrip...equise.php

[Xenos]

A mon avis, tu as plutôt mal construit ton CSS (un margin/espace dans le HTML/padding/vertical align qui traîne, ou mauvaise définition du "position" du parent) et tu es en train d'ajouter de la complexité pour tenter de "fixer" ce qui n'est pas un bogue de navigateur, mais un défaut de ton CSS/HTML.
Si tu peux uploader les pages et donner un lien dessus, je pense qu'on pourra te résoudre ton vrai problème

A défaut, j'ouvrirai le ticket correspondant chez Firefox (mais franchement, je ne vais pas te le cacher: il y a 99% de chances pour que Firefox ait juste, et que ton code ait faux)

[incodewetrust]

https://letrainde13h37.fr/28/les-user-ag...st-le-mal/

Tiens il a pas pris une ride cet article, les user agents c'est le mal et une petite explication en mode humoristique qui explique pourquoi !

[Prélude]

Je suis plus que d'accord avec Xenos : il est préférable de revoir tes CSS.
La solution qui consiste à vérifier le navigateur est bancale et plantera un jour ou l'autre.
Il existe, au pire, des CSS dédiés à chaque navigateur avec les prefix -webkit- ou -moz- ...
Même si ce n'est pas mieux que de détecter le navigateur, c'est moins bancale.

[Xenos]

La solution qui consiste à vérifier le navigateur est bancale et plantera un jour ou l'autre.

C'est surtout que, j'insiste vraiment sur cette raison, ce n'est pas le navigateur qui a tort. C'est vraiment:

il est préférable de revoir tes CSS.

C'est toujours soit le CSS qui a été mal fichu (car mal compris?), soit le navigateur utilisé est une version en retard (car le bogue navigateur a été corrigé). En d'autres mots: le navigateur est bon, ton CSS est mauvais.
Les rares cas où cette assertion est fausse (cas où "le navigateur est mauvais, le CSS est bon") sont les cas où la feature CSS n'a pas encore été implémentée dans le navigateur. Mais là, à part pour les propriété très (trop) exotques, je ne l'ai jamais rencontré en pratique. Même le Grid Display est disponible maintenant...

Note que pour l'article de incodewetrust, si je suis d'accord avec le "lâchez l'idée de checker l'agent côté serveur" (qui revient à checker quel client appel un serveur, ce qui est une p***ain d'aberration en soi dans une archi client/server), je ne suis pas d'accord avec l'autre alternative qu'ils laissent en fin d'article (créer des composants dédiés à servir un truc spécifique pour tel client, si je résume ce que j'ai compris). C'est, à terme, ingérable, inmaintenable, et non fonctionnel (quand le bogue navigateur est corrigé, on garde les composants? on les vire? on les modifie pour ne plus les activer pour ces nouvelles versions?).
La solution est de toujours coder par rapport aux specs web, qui sont comme les interface de l'OO: tous les sites qui essaient de prendre en compte tous les navigateurs, c'est irréaliste (NxP combinaisons). Tous les sites qui travaillent avec la même spec (interface) et tous les navigateurs qui font de même, c'est gérable (N+P combinaisons).

[L'Omniscient]

Si tu as vérifié ça à vue d'oeil, tous les navigateurs n'ont pas le même zoom équivalent à 100%, il est possible que le zoom t'ait décalé / agrandi des éléments.

Sinon sous Chrome je crois que les margin (voire padding, et même l'addition margin/margin ou margin/padding un truc comme ça) ne sont pas tout à fait interprétés de la même manière que sous Firefox (et possiblement sous Edge aussi du coup).

Mais 5px de décalage... Est-ce vraiment si dérangeant ? O_O