interest-delay

構成要素のプロパティ

interest-delay プロパティは、以下のプロパティの一括指定です。

• interest-delay-start
• interest-delay-end

構文

/* 単一の値 */
interest-delay: normal;
interest-delay: 2s;
interest-delay: 250ms;

/* 2 つの値 */
interest-delay: 1s normal;
interest-delay: 0s 500ms;

/* グローバル値 */
interest-delay: inherit;
interest-delay: initial;
interest-delay: revert;
interest-delay: revert-layer;
interest-delay: unset;

値

interest-delay プロパティは 1 つまたは 2 つの値を受け入れます。1 つ目の値は、関心を表示させるまでの遅延を設定します (interest-delay-start)。2 つ目（指定された場合）は、関心が失われるまでの遅延を設定します (interest-delay-end)。それぞれの値はキーワード normal または <time> 値のどちらかです。

normal

待ち時間をブラウザーのデフォルトの待ち時間に設定します。これが初期値です。

<time>

待ち時間を特定の時間に設定します。値は正の値でなければならず、そうでない場合、プロパティは無効になります。

解説

<a> や <button> などのコントロール要素は、関心インボーカー要素として設定することができ、その場合は要素に interestfor 属性を付与します。その値は対象要素の id である必要があります。この関係が確立されると、ユーザーが呼び出し元に対して「関心を示す」操作（例えばホバーやフォーカス）を行った際に、対象要素に影響が及びます。一般的な使用例としては、ホバーやフォーカス時にポップオーバーを表示させることが挙げられます。ユーザーが「関心を失う」と、その効果は停止します。

ユーザーが示したり失ったりしたとき、関連付けられた効果は即座に始まったり止まったりしません。ブラウザーは短い待ち時間を追加します（ブラウザーによって異なることがあります）。これにより、例えばリンクにホバーした際にプレビューポップオーバーが即座に現れることを防ぎます。リンクが密集したページでは、これが煩わしく、わずらわしいものとなる可能性があり、注意が散漫になる可能性があります。

interest-delay プロパティを使用することで、これらの待ち時間をカスタマイズすることができます。interest-delay を使用することで、関心の効果が始まる前（interest-delay-start プロパティで指定）および終わる前（interest-delay-end プロパティで指定）の待ち時間を、単一の宣言で指定します。

interest-delay プロパティには、1つまたは2つの値が指定可能です。これらの値は、ブラウザーのデフォルトの待ち時間を設定するキーワード normal、または独自の待ち時間を設定する <time> 値となります。 単一の値が指定された場合、それは interest-delay-start と interest-delay-end の両方に適用されます。2 つの値が指定された場合、まず 1 つ目の値が interest-delay-start を設定し、2 つ目の値が interest-delay-end を設定します。

公式定義

形式文法

interest-delay = 
  <'interest-delay-start'>{1,2}  

<interest-delay-start> = 
  normal  |
  <time>  

例

基本的な interest-delay 効果の作成

この例では、interest-delay が関心インボーカーの動作にどのように影響するかを示します。

HTML

このマークアップには、<button>、<p>、<input> の checkbox 型が含まれています。この <button> 要素を関心インボーカーとして指定するには、interestfor 属性を付与し、その値が <p> 要素の id と一致するよう指定します。これにより、段落が対象要素となります。段落は popover 属性を付与することでポップオーバーに変換され、初期状態では非表示になります。

<button interestfor="mypopover">ボタン</button>
<p id="mypopover" popover>ホバーのツールチップ</p>
<form>
  <input type="checkbox" id="apply-delay" />
  <label for="apply-delay">
    <code>interest-delay</code> を <code>1s 2s</code> に適用
  </label>
</form>

CSS

CSS では、.delay ルールを定義し、delay クラスが設定されたあらゆる関心インボーカーに interest-delay 値 1s 2s を適用します。このクラスは、JavaScript を使用してチェックボックスがチェックされた際に <button> に設定します。

.delay {
  interest-delay: 1s 2s;
}

JavaScript

スクリプト内で <button> とチェックボックスへの参照を取得し、チェックボックスの値が変更されるたびに（チェックされた時または外された時）、<button> の delay クラスを切り替えるイベントリスナーを作成します。

const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
  btn.classList.toggle("delay");
});

結果

これは次のようにレンダリングされます。

ボタンに（ホバーやフォーカスなどで）関心を示してから関心を失う操作を行い、ポップオーバーの表示と非表示を確認してみてください。既定では、ポップオーバーはとても短い待ち時間の後、表示・非表示されます。

これでチェックボックスをオンにして、同じ措置をもう一度試してください。この時点では、関心が表示された後に 1s の待ち時間の後にポップオーバーが現れ、関心を失った後に 2s の待ち時間の後に非表示になるはずです。

仕様書

ブラウザーの互換性

関連情報

• interest-delay-start, interest-delay-end
• ポップオーバー API
• 関心インボーカーの使用
• CSS 基本ユーザーインターフェイスモジュール