4.11.4 bb 要素
- カテゴリー
- フローコンテンツ
- フレージングコンテンツ
- インタラクティブコンテンツ
- この要素を使うことができるコンテキスト：
- フレージングコンテンツが期待される場所
- コンテンツモデル：
- フレージングコンテンツ。ただし、子孫にインタラクティブコンテンツがない場合に限ります。
- コンテンツ属性：
- グローバル属性
type- DOMインタフェース：
-
interface HTMLBrowserButtonElement : HTMLElement { attribute DOMString type; readonly attribute boolean supported; readonly attribute boolean disabled; };
Commandインタフェースも、この要素によって実装されなければいけません。
bb 要素は、ユーザーが呼び出すことができるユーザーエージェントのコマンドを表します。
type 属性はコマンドの種類を表します。type 属性は列挙属性です。下表は、この属性のキーワードと状態を示しています。左側カラムのキーワードは、そのキーワードと同じ行にある二番目のカラムのセルの中に記載されています。
| キーワード | 状態 |
|---|---|
makeapp |
make application |
指定がない場合のでデフォルトは、null 状態です。
各状態には、次で説明しますが、action と relevance があります。
この属性が null 状態にあるとき、action は何もしません。そして、relevance は無条件で false となります。
type 属性の relevance が true の状態にある bb 要素は、利用可能でなければいけません。逆に、type 属性の relevance が false の状態にある bb 要素は、無効でなければいけません。
bb 要素が利用可能なら、それは疑似クラス :enabled に一致するでしょう。そうでなければ、それは疑似クラス :disabled に一致するでしょう。
ユーザーエージェントは、bb 要素が利用可能なら、ユーザーがその bb 要素を呼び出すことができるようにするべきです。ユーザーが bb 要素を呼び出したら、その type 属性の状態の action が呼び出されなければいけません。
この要素が子孫要素を一切持たず、そして、長さが0でないテキストノードを子孫に一切持たない場合、この要素は、ユーザーエージェント定義アイコンや type 属性の状態の action と relevance （有効 vs 無効）を表すテキストを伴ったブラウザーボタンを表します。そうでなければ、この要素は、その子要素を表します。
- bb .
supported -
type属性の値がユーザーエージェントがサポートする値であれば、true を返します。そうでなければ、false を返します。 - bb .
disabled -
該当要素の action をユーザーが呼び出だすことができる（例：該当要素の relevance が true）なら、false を返します。そうでなければ true を返します。
type DOM属性は、同じ名前のコンテンツ属性を反映しなければいけません。
supported DOM属性は、type 属性が null 状態以外の状態にあり、ユーザーエージェントがその状態の action をサポートするなら（例：この属性値が、ユーザーエージェントが認識しサポートする値なら） true を、そうでなければ false を返さなければいけません。
disabled DOM属性は、該当要素が無効なら true を、そうでなければ false を返さなければいけません。（例：type 属性の状態の relevance と反対の値を返します。）
4.11.4.1 ブラウザーボタンのタイプ
4.11.4.1.1 make application 状態
いくつかのユーザーエージェントは、サイトを、まるでウェブサイトでないかのように、独立したアプリケーションとしてアクセスできるようにすることをサポートします。make application 状態は、ウェブページが、この処理モードの対象としてユーザーにそれ自身を提供することができるようにするために、存在します。
make application 状態の action においては、スタンドアローンのように現在のサイトを使うのかをユーザーに確認します。そして、ユーザーの確認が取れたら、ユーザーに、スタンドアローンで利用できるドキュメントのアドレスによって識別できるリソースを生成する方法を提供します。
ユーザーへの確認は必要です。なぜなら、有効化ボタンにユーザーをだまして誘い込むことが比較的簡単にできるからです。この確認は、例えば、ユーザーに対して、このアプリケーションをどこに "保存" するのかを尋ねるといった形式や、ユーザーエージェントが表示しているものだとはっきりとわかるような形で非モーダル情報パネルを表示し、ユーザーにシステムのアプリケーションランチャーにアイコンをドラッグする機会を与えるといった形式を取ることができるでしょう。
make application 状態の relevance は、ユーザーエージェントがこのような形式ですでにサイトをハンドリングしている場合、もしくは、ユーザーエージェントがこのような形式でサイトを利用可能にすることをサポートしていない場合に、false になります。そうでないなら true になります。
次の例では、いくつかのリンクがアプリケーションのページ上に列挙されており、ユーザーは、そのアプリケーションをスタンドアローンにすることも含めて、特定のアクションを実行することができます：
<menu>
<li><a href="settings.html" onclick="panels.show('settings')">Settings</a>
<li><bb type="makeapp">Download standalone application</bb>
<li><a href="help.html" onclick="panels.show('help')">Help</a>
<li><a href="logout.html" onclick="panels.show('logout')">Sign out</a>
</menu>
未サポートまたは relevant でないなら、次のスタイルシートを使えば、垂直バーで "make app" がある選択項目を分離して1行テキストのように見せることができるでしょう：
menu li { display: none; }
menu li:enabled { display: inline; }
menu li:not(:first-child)::before { content: ' | '; }
これは次のように表示されるでしょう：
次の例は、前の例と同じことを別の方法で実現する方法を示しています。今度はCSSに頼らずに、"make app" リンクが適用されない場合はそれを非表示にします：
<menu>
<a href="settings.html" onclick="panels.show('settings')">Settings</a> |
<bb type="makeapp" id="makeapp"> </bb>
<a href="help.html" onclick="panels.show('help')">Help</a> |
<a href="logout.html" onclick="panels.show('logout')">Sign out</a>
</menu>
<script>
var bb = document.getElementById('makeapp');
if (bb.supported && bb.enabled) {
bb.parentNode.nextSibling.textContent = ' | ';
bb.textContent = 'Download standalone application';
} else {
bb.parentNode.removeChild(bb);
}
</script>
※ 原文：http://www.w3.org/TR/2009/WD-html5-20090423/interactive-elements.html#the-bb-element