ブラウザのバージョンのテストは、信頼性の低い方法です。多くのユーザーはその情報を提供しません。他のユーザーは、実際には別のブラウザを使用していると伝えます。特定の機能が必要な場合は、それらが利用可能かどうかを判断する唯一の信頼できる方法は、JavaScriptが存在するかどうかを確認することです。
表示されているものを変更するだけでなく、リダイレクトすることを決定しましたか?現在のページの内容を変更する方がはるかに簡単なので、ちょうどあなたのページにこのようなものを追加します。
<div id='warning'>Your browser sucks!</div>
CSS:
#warning {
/* make this DIV very visible - you could even cover the rest
of the page if your website is useless without javascript. */
}
今のページが表示#warningにロードされ、必要な機能が存在している場合は、それを隠すためにJavaScriptを使用することができます(スクリプトを実行していない場合に表示したいので、逆を行い、javascriptを使用して表示したくない)。これを行うには多くの方法があり、最も標準的な方法はonloadイベントをアタッチすることです。しかし、これは、私がハックしたアプローチがずっと良いと思う1つの状況です。オンロードでテストを実行すると、javascriptが実行されるまで警告が表示されます。この警告は、数秒から数秒の間のどこかにある可能性があります。あなたが本当にやりたいことは、それが表示される前に要素を隠すことです。このような要素を<head>
セクションに追加することで、要素を隠すことができます。あなたの例のように
if((function() {
var t,u,i,j,
css='textShadow,textStroke,boxShadow,borderRadius,borderImage,opacity'.split(','),
prefixes=',webkit,moz,o,ms,khtml'.split(','),
nPrefixes=prefixes.length,
el=document.createElement('i').style;
styles:for(i=0;t=css[i];i++) {
t=t.charAt(0).toUpperCase()+t.substr(1);
for(j=0;j<nPrefixes;j++) {
u=prefixes[j]+t;
if(el[u.charAt(0).toLowerCase()+u.substr(1)]!==undefined)
continue styles;
}
return false;
}
return true;
})())
document.write("<style type='text/css'>#warning {display:none;}</style>");
、これはあなたが必要とする機能がtextShadow、textStroke、boxShadow、borderRadius、borderImage、および不透明であることを前提としています。
<head>
には他のjavascriptを置くべきではありません。その上にあるコードが実行を終了するまで、ページのレンダリングが開始されないためです。
すべての最新ブラウザのサポート 'css3'と' html5'のように見えますおよびバージョン。グーグルそれは – diEcho
私はそれを見つけただけ2003年から2006年の半分の完全なソリューションを見つけた!問題は最新のブラウザではなく、IE6,7、Firefox 1,2 Safari 1,2,3などで動いている猿です。 – daba
@diEcho css3とhtml5はまだ完全には定義されていません。すべてのブラウザが完全にサポートすることは不可能です。私は、dabaが "css3をサポートする"と言うとき、彼は特定の機能をテストすることを意味します。 –