彩りの大地 Laboratory /ブラウザ情報確認

その通り、みなさんが今使っているブラウザの情報を表示するスクリプト。
ブラウザやOSなどによって表示結果も異なったりする。

最近はUAを廃止するという流れにもなっており、UAによるブラウザ判別自体が需要がないものとなってきている。
そもそもUAを判別してブラウザごとに動作を変えるなんて言うこと自体が時代錯誤、その結果、UA要らないという図式である。

が、変化による遊び心を置き去りにしたくない当サイトにとっては(そもそも個人サイトという都合も含め)そんなこと言われてもっていうのが率直な感想。
それにより、本スクリプトのリファクタリングの際、別の方法でブラウザ判別する事が可能というGeminiさんからのアドバイスをいただいた。 本スクリプトの動作には一切影響しないが、ここではヒントだけ記載しておくこととする。
なお、UAで引っ掛ける方法は現段階(2026年)ではまだ有効。ここではUA以外での方法を掲載する。
ただし、当サイトの判別法準拠とする。

1.Firefox、SeaMonkey
A.CSSの独自拡張を検知
typeof CSSMozDocumentRule !== 'undefined' || 'MozAppearance' in document.documentElement.style
B.Blink系にあるはずの userAgentData が「無い」ことを突く(つまり条件分岐で一番最初に判定すること)
!navigator.userAgentData

2.スマホ環境
スマホでも何ブラウザを使用しているか変わると思うが、 ここではスマホの場合はブラウザにかかわらず別動作という処理であることとする。 そのため、他のブラウザの判別よりも先に条件に引っ掛ける必要がある。
'ontouchstart' in window || navigator.maxTouchPoints > 0

3.ク○ブラウザII（Microsoft Edge）
Blinkに移行しているため、ちょろめ(Chrome)・Safari・Blink/WebKit系の条件よりも先に引っ掛けないとそちらに吸い寄せられる。
そのため、Edgeを区別する場合はそれらよりも先に判別する方法を摂らなければならない(これはUAで引っ掛ける場合も同じ)。
navigator.userAgentData?.brands?.some(b => b.brand.includes('Microsoft Edge'));

4.ちょろめ(Chrome)・Safari・Blink/WebKit系
!!window.chrome || typeof webkitConvertPointFromPageToNode !== 'undefined'

5.レガシー環境(ガラケ・ゲーム機)
特殊なオブジェクト検知が不要。ゆえにUAだけで判別する。