CSS Tips コレクション

今日もネタ投入。「min-width」属性をサポートしてないIEでも、Fxなどで
{width:80%; min-width: 300px} とやるときのように「最低幅指定つきの
リキッドブロック」を実現する方法の紹介。

divを2重掛けして、外側divの右か左のborderに最低幅に設定したい値を
px/em指定、内側divの右か左のpaddingに同じ値を「マイナスで」指定、
という目ウロコのアプローチ。この説明だけでは理解不能だろうけれど、
実際のwebページの図をじっくり見ればその原理がわかる。
http://www.cssplay.co.uk/boxes/minwidth.html
http://www.webreference.com/programming/min-width/

そのアプローチに丁寧なブラウザ振り分けハックを組み合わせ、「理論上は
動作します」だけでなく、実用レベルまで引き上げてある労作。作者は、
病的領域に片足突っ込んだ怪しいCSSテクニックを多数開発しているStu Nicholls。