2011-08-22 40 views
22

私は隠されるべき要素のための私のHTMLでこのようなものを使用して年間のだ:適切な方法

<div style="display: none"></div> 

それは大丈夫ですが、私はのインラインスタイルを我慢できませんもう

  1. JavaScriptでプログラマチックに要素を非表示にするwindow.onloadイベントが遅すぎます - 画面上で点滅します。

  2. 私はCSSクラス 'hidden'を作成できますが、ブラウザの積極的な読み込み方法(Operaなど)では、ブロックが1秒間表示されることがあります(CSSが読み込まれる前)。

もっと良い方法がありますか?

+12

インラインスタイルを使用して素晴らしいケースを作りました。 – Fosco

+3

しかし、それらは醜いです:) – artvolk

+0

「ブロックが1秒間表示される(CSSがロードされる前に)表示される」場合は、ページ全体がスタイルなしで表示されます。それは本当にオペラで起こりますか? – Kapep

答えて

15

私が知る限り、class="hidden"の方法が最もよく一般的に使用されています。 class="hidden"を使用することをお勧めします。

"しかし、(Operaのような)ブラウザの積極的な読み込み方法では、ブロックは1秒間表示されることがあります(CSSが読み込まれる前)。

私はOperaを使用していませんが、スタイルを適用する前にブラウザにページを読み込んだ場合は、隠れた要素だけでなく、多くが間違って見えます。私はこれを行うブラウザを知らない。

6

私は最近ノードオブジェクトの使用を開始しました。私はこのアプローチがますます好きです。あなたは隠されたHTML要素を使用する必要はありませんこの方法では、あなただけの、例えば、アンカー置く:

<a name="some-anchor" id="some-anchor-id" /> 

をして、作成したノードと交換してください。この方法では、負荷がちらついても何もないので心配する必要はありません。

+0

+1素晴らしいソリューションです。 –

+4

これも検索エンジンにやさしいですか?この方法であなたのウェブサイトのすべての検索可能なコンテンツを挿入すると、クローラはそれを見つけることができません。 – pimvdb

+0

はい、あなたは正しいですが、再度、検索エンジンは 'class =" hidden "のブロックの最初の内容しか見ることができません。動的に変更するコンテンツがある場合は、とにかくクローラにアクセスできなくなります。 –

2

要素の内容によっては、ページが読み込まれた後にjavacriptを使用して要素を生成して挿入することができます(ページの読み込み後に非表示にするのではなく)。ちょっと考えましたが、JavaScriptが有効になっていないユーザーは正常に機能しませんでしたが...

+0

graceful劣化について - 'class =" hidden "と同じです。 JSユーザがなければ、何も得られません。 –

+0

@ IgorZinov'yevしかし、そこにビジネスがないあなたのHTMLに無用なマークアップがあります。それはデッドコードです。 – Raynos

+0

それは良い点です。これは、通常、ページの読み込み時に要素を非表示にして、情報を検索可能にし、JSを無効にしてアクセスできるようにするためです。 – Dan

1

HTMLのみのページをお持ちの場合、これらの要素が表示されますか?

これらの要素は、デフォルトでスクリーンリーダに表示されますが、これはあまりうれしくないか、アクセスできません。

HTML + CSSのみのページがある場合は、これらの要素を再表示することはできません。黒い帽子のSEOトリックとは別に、これらの要素を再現することはできません。

HTML + CSS + JSページをお持ちの場合、そのページに価値があります。

JSを有効にしているときに値を設定するだけです。これは、それらがjavascriptに存在する必要があることを意味します。

これらの要素を作成してDOMに挿入するには、javascriptを使用します。

HTML、HTML + CSS、HTML + CSS + JSを使用してウェブサイトを構築する場合は、JavaScriptコードに属していることがわかります。お気軽にProgressive Enhancement

+0

JS(複雑な要素はあまり一般的ではない)で複雑な要素\ HTMLチャンクを作成する唯一の方法は、クライアントテンプレートです。テンプレート自体は通常隠しブロックに置かれています:) – artvolk

+0

@artvoikあなたはDOMを忘れました。 DOMを使用して複雑な要素を簡単に作成できます。 – Raynos

+1

複雑な要素を作成する場合、これはJSコードで行われますが、これはテンプレートデザイナーがもう更新できないためです。 – artvolk

1

ページのクラスを定義することができます。それはインラインよりもややきれいですが、すべてのページでその単一のクラス定義を持たなければなりません。しかし、もう一度、私はとにかく単一の動的フッタ/ヘッダーを使用しようとしています。

1

隠しスタイルには、ブラウザウィンドウから表示される固定位置を追加できます。これはOperaでdivを点滅させないようにするための解決策です。例えば

:これが役立つことを望ん

.super_hide{ 
    position:fixed; 
    top:-1000px; /* you would need to know how height the content is or put something huge*/ 
} 

+0

ほとんどの場合、隠れたブロックを後で隠れた場所に表示したいのですが... – artvolk

+0

JavaScriptを使ってクラスを削除すると、要素が表示されるようになります。 –

+0

これはリフローを引き起こすようですが、これが問題になるかどうかわかりません – artvolk