空のdivは完全に意味のあるものではないことを私は知っています。しかし、背景画像と一緒に使用して、「親」divを装飾するための適切なスタイルのドロップシャドウまたはその他の効果を作成してもよいかどうか疑問に思いました。
(CSS3でこれを行う方法も知っていますが、明らかな理由から、これで常にうまくいくとは限りません)
空のdivは完全に意味のあるものではないことを私は知っています。しかし、背景画像と一緒に使用して、「親」divを装飾するための適切なスタイルのドロップシャドウまたはその他の効果を作成してもよいかどうか疑問に思いました。
(CSS3でこれを行う方法も知っていますが、明らかな理由から、これで常にうまくいくとは限りません)
良いスタイルではないかもしれませんが、技術的には空のdiv
要素を追加することは有効です。
div
意味を追加または変更しないため、空を使用div
してもドキュメントのセマンティクスに干渉することはありません。
もちろん、img
要素ではなくCSSで背景画像を提供する必要があります。
ただし、CSS疑似要素after
を使用して、before
代わりに目的のデオケーションを実現できる可能性がありますか?
htmlをできるだけきれいにしたい場合は、それをそのままにしてCSSを使用するのが最善の方法です。どのように?CSSは、2つの特別なセレクター:afterと:beforeを使用して[pseudo]要素をhtmlに追加する方法を提供します。このフィドルを見てください:http://jsfiddle.net/joplomacedo/ubG5t/
cssは、フィドルで表示されない場合、次のようになります。
body:after {
content: " ";
display: block;
/* your styles */
}
それほど多くはありません。それが行うことは、body要素の最後(まだその中にある)に、ブロックの表示を備えた[疑似]要素を挿入することです-ちょうどdivのように。好きなスタイルでそれを与えることができます-繰り返しますが、それは通常のdivを持っているのと同じです[1 *]
コンテンツはそれを機能させるためにあります。ボックスに表示されるテキストをその中に入れることも、私が行ったように空のままにすることもできますが、そこにある必要があります。そうでない場合は、divはありません。
* 1-ええと、トランジションは実際には機能しませんが、それを除けば...
<style>
.element div:empty{
background: #red;
height:15px;
width:15px;
}
</style>
<div class="element">
<div>not empty</div>
<div></div>
</div>