uuAltCSS の改良(auto viewbox)
久しぶりに uuAltCSS.js の話を。
内容的には HTML5 + CSS3 + レイアウトデモ - latest log の続き。
uuAltCSS を導入すると古いブラウザでも box-shadow などの CSS3 の機能が利用可能になります。
ただ、uuAltCSS 上で box-shadow を利用する時は、影を描画するスペースを確保する目的で、本来は不要な見栄え用のdiv要素(viewbox)を文書構造に入れ込む必要がありました。
本来の HTML
<div>
コンテンツ
</div>viewbox を追加した HTML
<div class="viewbox">
<div>
コンテンツ
</div>
</div>例: http://d.hatena.ne.jp/uupaa/20090820/1250742374
難点が2つ
- HTML5 + CSS3 をバリバリ利用したデザインと IE6 用のデザインを1組のファイル(html,css)で表現できない(元々そんなのありえない話なんだけどね)
- 「viewbox って何よ? 余計なルールが増えるのは面倒なんですけど」とか感じる人がいるかもしれない
viewbox そのものは無くすことができないので、viewbox を半自動で挿入する仕組み(auto viewbox)を追加してみました。
<div class="uuautoviewbox5px-10px">
コンテンツ
</div>とすると
<div class="viewbox" style="padding: 5px 10px">
<div class="uuautoviewbox5px-10px">
コンテンツ
</div>
</div>の形に自動的に展開します。
uuautoviewbox の指定方法
クラス名 uuautoviewbox に文字列が続く場合は、padding 値として解釈します。
文字列中のハイフン(-)やアンダーバー(_)はスペースに置換します。
つまり
- class="uuautoviewbox" ⇒ <div class="viewbox" style="padding: auto">
- class="uuautoviewbox0" ⇒ <div class="viewbox" style="padding: 0">
- class="uuautoviewbox5px" ⇒ <div class="viewbox" style="padding: 5px">
- class="uuautoviewbox1em_5px" ⇒ <div class="viewbox" style="padding: 1em 5px">
と解釈します。
"uuautoviewbox" は長いので、もうちょっと短い名前に変更するかも
実例
http://pigs.sourceforge.jp/blog/20090820/html5_tag/html5-autoviewbox.htm
<!doctype html><html class="ifnojs"><head><meta charset="utf-8" /> <title>HTML5 demo - auto viewbox version</title> <style> @import url(html5.bone.css); @import url(html5.efx.css); </style> <script> window.xconfig = { css3maxmin: 1 }; </script> <script src="uupaa-autoviewbox.js"></script> </head><body> <header class="round uuautoviewbox5px">header</header> <nav class="round uuautoviewbox5px">nav</nav> <div class="tbl"> <div class="cell1"> <article class="round uuautoviewbox5px"> article <section class="round uuautoviewbox5px">section</section> <section class="round uuautoviewbox5px">apply auto viewbox</section> <section class="round uuautoviewbox5px">section</section> </article> </div> <div class="cell2"> <aside class="round uuautoviewbox5px">aside</aside> </div> </div> <footer class="round uuautoviewbox5px">footer</footer> </body></html>
