クリーンなプログレッシブエンハンスメント

StackOverflow https://stackoverflow.com/questions/6315140

質問

私はプログレッシブエンハンスメントを使用してウェブサイトを構築しています。これには、メニュー、スライドショーなどが含まれます。アイテムはページに順序付けられていないリストとして含まれているため、JavaScriptがフォーマットを適用します。

私の懸念：フォーマットが適用される前に、順序付けられていないリストが表示される、フォーマットのないコンテンツのフラッシュを回避するにはどうすればよいですか？これのベストプラクティスはありますか？

重要：サイトは、SEOに優しいとアクセスしやすいままでなければなりません（これが、そもそも進歩的な強化を使用している理由です）。したがって、たとえば、順序付けられていないリストの初期スタイルを表示するのは問題ありません。

役に立ちましたか？

解決

したがって、たとえば、順序付けられていないリストの初期スタイルを表示するのは問題ありません。

あなたは間接的にスタイルをに設定することができます display: none JavaScriptを検出すると、CSSを使用して利用可能になり、コンテンツのいずれかが含まれる前にスクリプトが実行されます。

<head>
    <style type="text/css">
        body.withjs #menu { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className= 'withjs';
        window.onload= function() {
            ...do stuff with menu...
            document.getElementById('menu').style.display= 'block';
        };
    </script>
    ...
    <ul id="menu">
        ...
    </ul>
</body>

他のヒント

JavaScriptの代わりにフォーマットにCSSを使用します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top