新しいCSS3規格をサポートしていない古いブラウザのユーザに警告する

CSS3またはiFramesをサポートしない古いブラウザを警告ページにリダイレクトしようとしています。警告ページでは、古いブラウザで問題が発生する可能性がある持続する。新しいCSS3規格をサポートしていない古いブラウザのユーザに警告する

スクリプト（またはそれ以外の場合）は、ブラウザIDではなくcss3比較可能性をテストする必要があります。

古いブラウザを使用している場合は、ページの上部に表示されるバナーも許可されます。

私は現在、使用しています： 

が彼らの誰もがこれで任意の経験や例へのリンクを持っていますか？ありがとう。

出典

2012-01-03 daba

すべての最新ブラウザのサポート 'css3'と' html5'のように見えますおよびバージョン。グーグルそれは – diEcho

私はそれを見つけただけ2003年から2006年の半分の完全なソリューションを見つけた！問題は最新のブラウザではなく、IE6,7、Firefox 1,2 Safari 1,2,3などで動いている猿です。 – daba

@diEcho css3とhtml5はまだ完全には定義されていません。すべてのブラウザが完全にサポートすることは不可能です。私は、dabaが "css3をサポートする"と言うとき、彼は特定の機能をテストすることを意味します。 –

ブラウザのバージョンのテストは、信頼性の低い方法です。多くのユーザーはその情報を提供しません。他のユーザーは、実際には別のブラウザを使用していると伝えます。特定の機能が必要な場合は、それらが利用可能かどうかを判断する唯一の信頼できる方法は、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を置くべきではありません。その上にあるコードが実行を終了するまで、ページのレンダリングが開始されないためです。

出典

2012-01-03 23:26:43

これを['noscript']（https://developer.mozilla.org/en/HTML/Element/noscript）タグに入れるのはJavaScriptを隠すためにJavaScriptを使うよりも良いと思います。また、ページ全体を隠すのではなく、SOのように通知をどこかに見えるようにすることを検討してください。このためにサイトのコンテンツを見ることができないのは面倒です。サイトが壊れている可能性があります。私は、javascriptを使わずに閲覧する人は、意図的にやっているのか、それとも強制されているのか確信しています。他の理由で古いブラウザを使用している人は、とにかく助けにはなりません。 – Kapep

noscriptには2つの問題があります。主なものは、OPがjavascriptサポートをテストするだけでなく、特定の機能サポートをテストすることです。さらに、このタグは、検索エンジンのサイトの信頼性を低下させることが知られているため（低いランク）しかし、あなたはページ全体をカバーしていないというのは正しいことです。彼がテストしている機能がなければ、彼のサイトは役に立たないとは限りませんでした。回答が編集されました。 –

はい、上にバナーを表示するだけでいいので、このようなコードを追加する必要があります：http://jsfiddle.net/h43Uj/そして、上記のコードはすべて私のページの頭に入れますか？かなりのレンダリング遅延を引き起こすでしょうか？申し訳ありませんが、私は完全なJSのnoobです。 – daba

-3

ステップ1 - ブラウザのバージョンをjavascriptで検出するか、サーバーサイドコードのリクエストヘッダーを解析します。

ステップ2 - バージョンがサポートされていない場合は、警告ページにリダイレクトします。

（但し、CSS3とHTML5は広くサポートされていません）。

出典

2012-01-03 10:15:01 Acn

部分的に私がやりたいことですが、これは何も答えません。 – daba

Modernizrを取得し、必要なすべての機能を備えたバージョンを作成してください。私はあなた自身の使用modernizrのドキュメントと例での状態（すなわちModernizr.borderradius）をテストするための機能を交換しmodernizrファイルを開き、この

if(Modernizr.borderradius && Modernizr.cssgradients && Modernizr.textshadow) { var valid = true; var 
expires = new Date(); expires.setDate(expires.getDate() + 31); document.cookie = 'browser=modern; 
expires='+expires.toUTCString()+'; path=/'; } else { var valid = false; }

のような何かを追加。ブラウザに準拠している場合は、ユーザーにCookieを追加するので、PHPでコードを表示することを除外できます。

次に、このdivとjavascriptをbodyタグのすぐ下に追加します。 javasciptはjqueryを使用して要素を非表示にしていますが、ここに示した他の例を使用するとjavascriptだけでそれを行うことができます。

<div id="warning_block"> 
Warning! You are viewing this page in a non compatible browser. 
</div> 
<script type="text/javascript"> 
if (valid == false) { $("#warning_block").show(); } 
</script>

あなたはあまりにもそれのスタイルをCSSを含めることができますので、それはとにかくあなたがユーザーのブラウザを知ることによってそれを行うことができ、警告

#warning_block { 
display: none; 
width: 80%; 
border: 1px solid #000; 
background: #F00; 
color: #FFF; 
font-family: arial; 
text-align: center; 
margin-top: 5px; 
margin-left: auto; 
margin-right: auto; 
padding: 5px; 
}

出典

2012-01-04 02:08:15 Ayub

新しいCSS3規格をサポートしていない古いブラウザのユーザに警告する

答えて

関連する問題