!window.chrome && 'WebkitAppearance' in document.documentElement.style の意味がわからない

Question

このページを読んでいるのですが、
https://chaika.hatenablog.com/entry/2017/09/22/090000

下記のコードの意味が理解できず困っています。

!window.chrome && 'WebkitAppearance' in document.documentElement.style

!window.chrome について

今見ているブラウザがChromeかどうかを判定できるということでしょうか？
window.chromeやJavaScriptMDNで検索しても、これが何を意味するのかを見つけられませんでした。

##'WebkitAppearance' in document.documentElement.style について
「html要素のスタイルに'WebkitAppearance'が含まれているか」
という意味で今のところ解釈しているのですが、
たとえばSafari(Mac)やChrome(Windows)で要素の検証をしてみても「'WebkitAppearance'」が見当たりません。
あと「'WebkitAppearance'」はそもそも何を意味するのでしょうか？

わかる方いたら教えていただけると嬉しいです。
よろしくお願いいたします。

Answer 1

window.chrome は Chromium のバグ周辺の情報から察すると Chrome 拡張機能や Chrome Apps 用の API が間違って一般のウェブページに見えてしまっている状態で、Googleは消したいけども何らかの理由で簡単には消せないようです。

以前は Google Chrome かどうかの判定に使えたのかもしれません。なんにせよ非標準であり将来は消えるかもしれないプロパティなので、参照すべきではありません。

'WebkitAppearance' in document.documentElement.style
HTML要素のstyleプロパティの子プロパティの存在をチェックすることでCSSプロパティのサポート状況を調べることができます。この場合、-webkit-appearance プロパティのサポート状況を調べることになり、これで WebKit 系(SafariやGoogle Chrome)かどうかを判定することが昔はできました。

現在は Firefox でさえ -webkit-appearance をサポートしているので、WebKit系の判定には使えません。

まとめると、!window.chrome && 'WebkitAppearance' in document.documentElement.style は「Safari なら真、それ以外なら偽」を意図していたコードだと思われます。しかし現在は期待どおり動きません。

ブラウザの差異に対処したい場合に「ブラウザ判定するよりは機能判定を」とよく言われます。このケースでは対処したい機能差異とはぜんぜん関係のない機能判定をしてしまっているために失敗している例ですね。

---

リンク先のトピックに関して、現在はIE以外のブラウザは document.scrollingElement に対応しているので、document.scrollingElement || document.documentElement でよいのではないでしょうか。

Comments

[kadot]

返信遅くなりました、申し訳ございません。

今は機能しない書き方だったのですね。
条件の意図もわかり、腑に落ちました。

ありがとうございます。

「ブラウザ判定するよりは機能判定を」
という考え方を今後意識していきたいと思います。

2点質問なのですが、
------------------------------

1.
document.scrollingElement || document.documentElement 　の書き方について

以下のように、!window.chrome && 'WebkitAppearance' in document.documentElement.styleの部分と入れ替えるという認識であってますでしょうか…？

var scrollTag = ( document.scrollingElement || document.documentElement )? 'body' : 'html';

どこにこの条件文を入れればいいか考えたのですが、
僕の理解不足でまだわからない状態で確認したく…。

------------------------------

2.
本題とはズレるのですが、
>HTML要素のstyleプロパティの子プロパティの存在をチェックすることでCSSプロパティのサポート状況を調べることができます。
について質問です。

Chromeでいうと、以下の確認方法であっていますでしょうか？
（自力で調べられるようになりたく、気になりました。）
---
1.デベロッパーツール開く
2.Elementsで、htmlタグをクリックし、Propertiesクリック
3.そのなかのhtmlのタブ開く
4.そのなかのstyleのタブ開く
5.webkitAppearance: ""　がある
→ということは、Chromeでは-webkit-appearanceはサポートされている
---

お手すきの際にお返事いただけると嬉しいです。
よろしくお願いいたします。

[int32_t]

1. いいえ。 $(document.scrollingElement || document.documentElement).animate(...) で動くかと思います。
window.chrome && 'WebkitAppearance' in document.documentElement.style の値はBoolean、document.scrollingElement || document.documentElement の値は HTMLElement です。

2. はい。

[kadot]

ありがとうございます。

Answer 2

window.chrome について

今見ているブラウザがChromeかどうかを判定できるということでしょうか？

「Chromeか判定する」という意図自体は合っています。
ただwindow.chromeオブジェクトが存在するかどうかはブラウザの実装次第です。
読んでいるページにもあるように、旧Edgeにはwindow.chromeオブジェクトが存在するようです。
（※新しいEdgeは、Chrome と同じ Chromium がベース）

古い情報によるとドキュメントはないようですね。
https://groups.google.com/a/chromium.org/g/chromium-html5/c/gax6OvgnKd8

'WebkitAppearance' in document.documentElement.style について

CSSプロパティ名でいうと-webkit-appearanceのことかと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/appearance

基本的に JavaScript からCSSプロパティにアクセスする場合、名前を読み替える必要があります。
※ブラウザによっては、そのままでも解釈してくれるようです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Properties_Reference

Comments

[kadot]

返信遅くなりました、申し訳ございません。

ありがとうございます。
そういうことだったんですね。

ドキュメントは無さそうということでスッキリしました。
（ドキュメントはどこだろうと探していたので）

JSではキャメルケースで書くのですね。

勉強になりました！