AppleはJavascriptが有効かどうかに基づいてサイトをどのように変更しますか？

私はアコーデオンの要素を表示/非表示するためのJavascriptが多数必要となるサイトで作業しています。 Javascriptを有効にしていない人でもサイトのすべてのコンテンツにアクセスできるようにしたいと思います。私はこれを行う最善の方法を確信していません。私はあなたがタグを使用することができますが、私はそれが最良の方法ではないことを知っています。本質的にサイトの2つのバージョン、つまりJavascriptと1つではないバージョンを本質的に持つ必要はありません。AppleはJavascriptが有効かどうかに基づいてサイトをどのように変更しますか？

私はまだサイトを構築しているので、Appleのサイトを使用することが良い例になると思いました。彼らの製品ページ（例えば、http://www.apple.com/ipod/）の上には、トップに製品があり、クリックすると次の要素が表示される他のオプション（Applications、iTunes & Moreなど）があります。それは素晴らしい見えます。しかし、Javascriptを有効にしても、クールなインタラクティブなインターフェースはなくなりますが、リスト内のすべての製品を持っています。あなたはこれについてどうやって行きますか？

解決策は必ずしもAppleが行う方法である必要はありません。私はそれが私がしようとしていることを説明するための良い例だと思っただけです。

出典

2011-02-10 Andrew

「プログレッシブエンハンスメント」と呼ばれています。プレーンジェーンを吐き出し、「Netscape 2.xで動作する」タイプのページを開き、さまざまなCSSとJavascriptを使用して拡張機能を追加します。そうすれば、脳死者/古いブラウザの誰かが少なくとも情報を取得し、より現代的なシステムを持つ人がより良い経験を得ることができます。 –

私はプログレッシブ・エンハンスメントを大いに支持しています。私はCSS3などのサイトでこれを常に使用しています。この場合は、あるレベルの段階的な強化であると私は同意しますが、私はJavascriptを使用する人々のための非常に基本的なサイトの95％がうまく動作すると無効になります。アップルのように違う方法でコンテンツを表示する方法が必要ですが、必要以上に全体のデザインに影響を与えません。 – Andrew

@Andrew、あなたが話していることはGraceful Degradationのように聞こえる。 –

ブラウザのJavaScriptが有効になっているかどうかを確認する必要があります。以下の関数を使用して、bodyタグでonloadすることができます。ブラウザがjsを有効または無効にしているかどうかに基づいて、ユーザーを別のページにリダイレクトするか、その他の操作を行うことができます。 JSを有効にすると

<body onload="checkJs()"> 
<div id="jsEnabled" style="visibility:hidden">JavaScript enabled</div> 
<div id="jsDisabled">JavaScript disabled</div> 

<script language="javascript" type="text/javascript"> 
function checkJs() 
{ 
document.getElementById("jsEnabled").style.visibility = 'visible'; 
document.getElementById("jsDisabled").style.visibility = 'hidden'; 
} 
</script>

出典

2011-02-10 22:30:14 Hussein

、これらすべてのApple製品が含まれているUL要素のHTMLを見て：あなたはそれをクリックするまで

<ul class="ul-slider" page="1" style="width: 840px; margin: 0pt 70px;">

他のULが隠されています。

.productbrowser li { 
    display: inline; 
    float: left; 
    height: 150px; 
    margin-top: 4px; 
    width: 140px; 
}

今すぐJavaScriptを無効にして、同じUL要素を見て：子LI要素のCSSは、それらのすべては、左から右へ流れます。どちらも表示され、スタイル属性はありません。彼らはプログレッシブエンハンスを使用しています：ブラウザがサポートしている場合にのみ、機能/効果を追加してください。

JSが無効になっていることを覚えてから、& CSSを書きます。それはあなたのサイトがLCDで動作することを確認する最善の方法です。 ModernizrやHead JSのようなライブラリは、ブラウザーとユーザーの設定が表示できるものとそれが扱えるJavaScriptの種類に基づいてCSSルールと条件付きのJavaScriptを書くことができます。

出典

2011-02-10 22:33:10 webXL

AppleはJavascriptが有効かどうかに基づいてサイトをどのように変更しますか？

答えて

関連する問題