私のサイトを使用しているInternetExplorer6のユーザーに、IE6には過去に私のサイトとの深刻な互換性の問題があったことを警告したいと思います。これを行うための最良の方法は何ですか?
理想的には、IE6ユーザーに問題を警告し、IE7、Firefox 3、またはOpera 9.5のいずれかに更新することを推奨するメッセージ(新しいウィンドウではなく、可能であればメッセージボックス)を表示させたいと思います。
私のサイトを使用しているInternetExplorer6のユーザーに、IE6には過去に私のサイトとの深刻な互換性の問題があったことを警告したいと思います。これを行うための最良の方法は何ですか?
理想的には、IE6ユーザーに問題を警告し、IE7、Firefox 3、またはOpera 9.5のいずれかに更新することを推奨するメッセージ(新しいウィンドウではなく、可能であればメッセージボックス)を表示させたいと思います。
IEをターゲットにする最良の方法は、条件付きコメントを使用することです。次に、InternetExplorerでのみ表示される特定のHTMLを追加できます。
<!--[if IE 6]>
<h1>Please upgrade your browser!</h1>
<![endif]-->
主題の詳細:
わかりました、私はこれを簡単にします。ポップアップなし!統計災害。これは、 の上にある素敵な小さなものです。私のデザインを台無しにすることになると、それが最大の犯人であるため、私はIE 6以前についてのみ本当に心配しています。以下は条件文です (私の意見では最善の方法です)。
これを頭に入れておきます(好きな内容を入れてください):
<!--[if lte IE 6]>
<div id="warning">
<h4 class="red">Your Browser Is Not Supported!</h4><br />
<p>Please upgrade to <a href='http://getfirefox.com'>FireFox</a>, <a href='http://www.opera.com/download/'>Opera</a>, <a href='http://www.apple.com/safari/'>Safari</a> or <a href='http://www.microsoft.com/windows/downloads/ie/getitnow.mspx'>Internet Explorer 7 or 8</a>. Thank You! <a href="#" onClick="document.getElementById('warning').style.display = 'none';"><b>Close Window</b></a></p>
</div>
<![endif]-->
これを外部のスタイリング シートに貼り付けます。インライン スタイルは使用しません。
#warning {position:relative; top:0px; width:100%; height:40px; background-color:#fff; margin-top:0px; padding:4px; border-bottom:solid 4px #000066}
好きなようにスタイリングしてください。JavaScript を使用して非常に具体的に任意のブラウザーを検出できます。
これは、コンテンツの上にあるかなり小さなボックスであり、ユーザーに自分のブラウザがひどいものであることを示すことができます.
サポートされているブラウザー以外であるかどうかを判断したい場合は、次のような jQuery のブラウザー検出を使用することをお勧めします。
<script type="text/javascript">
// check if browser is IE6 (when IE) or not FF6 (when FF)
if (($.browser.msie && $.browser.version.substr(0,1) == '6')
|| ($.browser.mozilla && $.browser.version.substr(0,1) != '3')) {
$('#browserWarning').show();
}
</script>
更新:別の人が言ったように、次のような IE if ステートメントを使用する方がはるかに優れたオプションです。
<style type="text/css">
/* this would probably be in a CSS file */
#browserWarning { display:none; }
</style>
<!--[if IE 6]>
<style type="text/css">
#browserWarning { display:; }
</style>
<![endif]-->
このオプションは、ブラウザのバージョンが「完璧」である必要がないため、はるかに優れています。ただし、if ステートメントをサポートしていない他のブラウザーを検出したい場合、これは機能しません。次に、jQuery を使用してブラウザーを検出することをお勧めしますが、可能な限り回避することをお勧めします。
条件付きコメントは、InternetExplorerの特定のバージョンのコンテンツのみを表示する方法を提供します。
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
ブラウザの更新についてユーザーに知らせる Web デザイナーによるイニシアチブ
私のアドバイスは、ポップアップウィンドウやメッセージボックスを使用しないことです。それらは非常に煩わしく、ユーザーエクスペリエンスを低下させます。通知とともにいくつかを挿入<div>
し、ページの残りの部分から目立たせることをお勧めします。やりすぎないでください。見落とされないように色を割り当ててください(使用しないでください<blink>
;-)
ユーザーにブラウザを更新するように指示し、実際に更新するのは素晴らしいことですが、実際にはそうはなりません。ユーザーが今までにブラウザをアップグレードしていない場合は、通常、コンピュータの知識が不足しているか、コンピュータ自体を制御できないという理由があります。たとえば、従業員が職場のマシンでサイトを閲覧している場合などです。
ユーザーが抱える問題を修正するか、段階的な機能強化を検討する必要があると思います。Web サイトの基本機能はすべてのブラウザーで動作し、追加機能は、それをサポートできるブラウザーでのみ表示/使用できるように開発されます。
私の提案はあなたのサイトを修正することです;)まじめな話ではありませんが、FirefoxやIEの小さな目立たないダイアログのように、ページの上部に小さなバナーを使用します。メッセージボックスなど、実際には多くのことを妨げるものではありません。