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);

（これが実際に動作しているのを見ることができます）

ただし、これはブラウザblinkがすでにタグをサポートしているかどうかを検出せず、すでにタグをサポートしているブラウザでは、二重点滅効果があります。ブラウザが点滅をサポートしているかどうかを判断する機能検出が必要です。サポートしていない場合は、Javascriptポリフィルにフォールバックします。

blinkそのソリューションはスケーラブルではなく、Firefoxの設定で動作を無効にできるため、そのソリューションは効果的ではないため、ブラウザの検出は行いたくありません。

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

4

1 に答える 1

7

私はその問題について少し調べたところ、答えが見つかるかもしれないと思います...

CSSプロパティサポートの検出をご存知だと思いますか？そうですね、text-decoration: blinkCSSプロパティがあります。したがって、ブラウザがサポートしている場合は<blink>、CSSプロパティもサポートしている必要があります。

これは通常のCSSプロパティの検出です。つまり、検出textDecorationは次のようにサポートされています。

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

おそらく、次のようなことを試すことができます。

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

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

アップデート

私は4つのブラウザーを持っているので、これを4つのブラウザーでテストしました。これらの4つのうち、FireFoxのみがblinkタグをサポートしています。<blink>HTMLドキュメントではFFの「スパン」要素として登録されていますが、他の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>

出力

InternetExplorer[7,8,9]はサポートされていません

こんにちは、まばたき！
[物体]

Chrome[18]はサポートされていません

こんにちは、まばたき！
[オブジェクトHTMLUnknownElement]

Safari[5]はサポートされていません

こんにちは、まばたき！
[オブジェクトHTMLElement]

FireFox[3.6]をサポート

こんにちは、まばたき！
[オブジェクトHTMLSpanElement]

于 2012-04-21T00:04:54.840 に答える