Web アプリで Android / Chrome の「タップして検索」を出したくない時の CSS

Web アプリで Android / Chrome の「タップして検索」を出したくない時の CSS

January 24, 2022

Android の Chrome ブラウザに存在する機能の「タップして検索(Touch to Search)」が出て欲しくない時は、

user-select: none;

しましょう。

user-select - CSS: カスケーディングスタイルシート | MDN

とはいえ #

これによる副作用もあるため、補足を挟みつつ整理したいと思います。

補足1 #

「タップして検索」が Chrome に追加されたのは 2015 年です。その頃の Google Developers に本件に関する投稿(Touch to Search を無効化する)があります。

Manage the Triggering of Touch to Search | Web | Google Developers

詳細は上記を読むと良いです。user-select: none; とは少し違うことが書かれています。

補足2 #

上記記事の方法では、短いタップの「タップして検索」については停止できますが、長押しし後に表示されるダイアログから実行する検索を止めることはできません。

以下の Stack Overflow のコメントが参考になります。

Disable mobile Chrome 43’s “Touch to Search” feature programmatically - Stack Overflow

As of 2021, it isn’t possible to disable touch-to-search (when this is triggered by a long-press for text selection) in chrome mobile. The article that Kinlan is referencing is apparently concerned only with touch-to-search triggered through a tap gesture.

Quoting donnd, from bugs.chromium.org:

Regarding #2 – developer control: The 2015 article that you mentioned (https://developers.google.com/web/updates/2015/10/tap-to-search) focuses on triggering through the tap gesture. As you correctly point out, it does not address the long-press gesture triggering. Touch to Search responds to both tap and long-press but treats them differently. As I’m sure you know, the long-press gesture activates a whole set of features which can include copy, translation, smart text selection, and Web Search. A site developer can markup their page text as non-selectable in order to disable the long-press gesture entirely, but currently there’s no way to disable only the Touch to Search response to long pressing. If you’d like to work with us to add such a feature, let us know and we’ll file a separate feature request.

そして以下が上記コメント内で引用されている chromium の Issue です。

949698 - Unable to Suppress the Triggering of Touch to Search - chromium

先の Google Developers の記事の方法だと長押しからの検索操作を止めることができないため、それも停止させたいのであれば、その要素を non-selectable にするほかない様子。

ただしそうすると長押しによって実行できる他の操作(コピーや翻訳)なども使えなくなります。

ということで #

本記事冒頭に書いた user-select: none; 指定は、完全に non-selectable にする方法です。他の長押し操作も合わせて無効化して良いのであればこちらで良いでしょう。

一方で短いタップの検索だけが停止できれば十分であれば、Google Developers の方法を実践すると良いでしょう。