2012-04-20 4 views
16

HTML <blink>タグは、それをサポートするブラウザ(Mozilla FirefoxやOperaなど)では、遅いストロボライトの効果に似たコンテンツの点滅をオン/オフします。ブラウザが点滅タグをサポートしているかどうかを検出するにはどうすればよいですか?

blinkタグを含む非標準HTML用のポリフィルスイートを作成しています。行動を点滅の実装は

(function blink(n) { 
    var blinks = document.getElementsByTagName("blink"), 
     visibility = n % 2 === 0 ? "visible" : "hidden"; 
    for (var i = 0; i < blinks.length; i++) { 
     blinks[i].style.visibility = visibility; 
    } 
    setTimeout(function() { 
     blink(n + 1); 
    }, 500); 
})(0); 

(することはできsee this in action

非常に単純です。しかし、これは、ブラウザが既にblinkタグをサポートしているかどうかを検出しませんし、すでにそれをサポートするブラウザでは、あるでしょう二重点滅効果。ブラウザが点滅をサポートしているかどうかを判断する機能検出が必要です。機能が検出されない場合は、Javascript polyfillに戻ります。

Firefoxの設定でblinkの動作を無効にすることができるため、その解決策はスケーラブルではないため、ブラウザの検出はしたくありません。

blink要素のサポートを検出する方法はありますか?

+2

いい質問ですが、誰かがその要素を使用したとは思わなかったです。 [W3自身のwiki](http://www.w3.org/wiki/HTML/Elements/blink)は 'いいえ、本当にそれを使わないでください。それは単に悪です。あなたはそれを何のために使いたいのですか? –

+0

@PeterOlsonは完全に理解しています。あなたの質問を再読した後で私のコメントを削除してください:-) – ManseUK

+5

とにかく動作をオーバーライドして、同じ内容を保持してスパンに置き換えてください。 –

答えて

7

私はほんの少しの問題に関する研究と私は私は答えを見つけたかもしれないと思うが、私はあなたがCSSプロパティのサポート検出の認識していると確信している...

をしましたか?さて、text-decoration: blink CSSプロパティがあります。したがって、ブラウザが<blink>をサポートしている場合は、CSSプロパティもサポートする必要があります!

if (document.createElement("detect").style.textDecoration === "blink") { 
    // textDecoration: blink supported ? 
} 

またはそれらの線に沿って

...

if (document.createElement("detect").style.textDecoration === "") { 
    // textDecoration supported 
} 

おそらく、あなたはこのような何かを試みることができる:

textDecorationを検出するために、これは通常のCSSプロパティの検出すなわち、これがないサポートされています

更新

私は4つのブラウザを持っています&これは4つのブラウザでテストされています。これらのうち4つのFireFoxは点滅タグをサポートしています。 <blink>はFFの「スパン」要素としてHTML文書に登録されますが、他の3つのブラウザではunknown要素として登録されます。

<html> 

<head> 
<script type="text/javascript"> 
function investigate() { 
    var blinker = document.getElementsByTagName("blink")[0]; 
    document.getElementById("monitor").innerHTML += blinker; 
} 
</script> 
</head> 

<body onload="investigate()"> 
<blink>Hello, blink!</blink> 
<div id="monitor"> </div> 
</body> 

</html> 

出力

Internet Explorerの[7,8,9] 点滅、こんにちは

をサポートしていません!
[オブジェクト]

クローム[18] が点滅、こんにちは

をサポートしていません!
[オブジェクトHTMLUnknownElement]

は、Safariの[5] 点滅、こんにちは

をサポートしていません!
[オブジェクトのHTMLElement]

FireFoxの[3.6] が点滅、こんにちは

をサポート!
[オブジェクトHTMLSpanElement]

+0

ブラウザはすべて 'textDecoration'プロパティをサポートしているのが良いアイデアですが、問題はそれらがすべてそのプロパティの値として' blink'を認識しないということです。あなたは私に試してみるためのいくつかのアイデアを与えました... –

+0

@PeterOlsonもう一つのアイデアも追加しました... – Ozzy

+0

Operaは 'blink'をサポートしていますが、' [object HTMLElement] 'を出力します。問題は、DOMオブジェクトの 'toString'関数が実装固有であることです。 –

関連する問題