CSS -webkit-touch-callout

iPhone (Safari on iOS) でリンク等のタッチターゲットを長押しすると、その対象に関する情報がコールアウトで表示される。-webkit-touch-callout は、このコールアウト表示を制御するCSSプロパティである。

構文

-webkit-touch-callout: behavior

次の値を -webkit-touch-callout に指定できる。

behavior

タッチ可能なところを長押ししたときの振る舞いを、次に示す値の中からいずれかを指定する。

-webkit-touch-callout
値 説明
inherit 上位の値を継承する。
none コールアウト表示を無効にする。

iOSでは、リンクなどのタッチターゲットをタッチして保持すると、Safariはリンクに関する情報を含むコールアウトを表示する。このプロパティは、そのコールアウトを無効にすることができる。

Safari on iOS でしか効かない

-webkit-touch-callout プロパティは Safari on iOS (iPhone) の独自拡張機能である。他のWebブラウザで -webkit-touch-callout プロパティは効かない。

-webkit-touch-callout
Webブラウザ 対応状況
Chrome ✗
Chrome Android ✗
Edge ✗
Firefox ✗
Internet Explorer ✗
Opera ✗
Safari ✗
Safari on iOS ✓

他のWebブラウザでは -webkit-touch-callout プロパティの代わりに、user-select プロパティを使用する。

<style>
  .noselect {
    -webkit-touch-callout: none; /* Safari */
    user-select: none;
  }
</style>

user-select プロパティに none を指定することで、その要素を選択できないようにする。これによって、コールアウト表示も無効になる。

-webkit-touch-calloutの使用例と表示サンプル

表示結果はWebブラウザによって異なることがある。

<p><a href="/" style="-webkit-touch-callout: inherit">SE学院</a></p>
<p><a href="/" style="-webkit-touch-callout: none">SE学院</a></p>

SE学院

SE学院

JavaScript

JavaScriptからは element.style オブジェクトの webkitTouchCallout プロパティでCSSの -webkit-touch-callout プロパティを参照及び設定できる。 ただし、すべてのWebブラウザが -webkit-touch-callout プロパティに対応しているわけではないため、webkitTouchCallout プロパティの存在をチェックする必要がある。 

<img id="example" src="/images/example.jpg">
<script>
  let e = document.getElementById("example");
  if ('webkitTouchCallout' in e.style) {
    console.log(e.style.webkitTouchCallout)
  } else {
    console.log("Your browser doesn't support webkitTouchCallout property.");
  }
</script>

関連記事

user-select
ユーザがHTMLの要素を選択したときの動作を制御するCSSプロパティ
-webkit-user-select
ユーザがHTMLの要素を選択したときの動作を制御するCSSプロパティ (Chrome, Safari)
-moz-user-select
ユーザがHTMLの要素を選択したときの動作を制御するCSSプロパティ (Firefox)
-ms-user-select
ユーザがHTMLの要素を選択したときの動作を制御するCSSプロパティ (Internet Explorer)

参考文献

Apple Inc. (2016) Supported CSS Properties