CompassでSprite画像を生成する時に役立ったリンクまとめ

Compass(コンパス)でSprite画像を自動生成する仕組みはすでにネット上でかなり色々なノウハウが語られてるが、
現在のプロジェクトのディレクトリ構成で、Sprite化する元画像とSprite化した後の画像を別のディレクトリで管理しなくてはならなくなり、
その方法で色々ハマったので、参考にしたURLをとりあえず手当たりしだいに貼っておきます。

  何に詰まって、どうやって解決したかは後日まとめる予定。

CSS3 PIE（PIE.htc）の使い方と注意点まとめ

CSS3をIE6～8でも機能させる事が出来るbehaviorスクリプトの『CSS3 PIE』

CSS３ PIEを使用する事で、IE６〜８においても以下のスタイルを適用する事ができます。

• border-radius（ボックスを角丸にする）
• box-shadow（ボックスに影をつける）
• border-image（境界線に画像を使用する）
• multiple background images（背景に最大４つの画像を使う）
•  linear-gradient as background image（背景にグラデーション）

ちなみに、opacityやtext-shadowは使用出来ません。

１行追加するだけの簡単なコードで、IE６〜８にもCSS3が適用され、
他の似たような機能のスクリプトよりも対応しているスタイルが多い事で、人気のスクリプトですが、実際使用してみると思いのほか上手く行かない！なんて人も多いのではないでしょうか？？

『CSS3が適用される』と言ううたい文句ではありますが、
実際には『"CSS3風"のスタイル表示がIEでも表現できます』という意味合いに近く
モダンブラウザでコーディングするように使用すると、意外な所で痛い目に合います。

かくいう私も、CSS3 PIEのおかげで半日程潰されました。。

「CSS3 PIE」で調べればいくらでも解説のサイトはありますが、
備忘録の意味も含めて、私もまとめをメモしておきます。
 
※11/06/17一部追記致しました。

【box-sizing】 CSS3で bordar や padding を含めた横幅を指定する

CSS3で新しく追加されたプロパティの中に、「box-sizing」があります。

このプロパティを使用する事で、『要素のwidth値にpadding と borderの値を含める、含めない』を定義する事が出来ます。

このプロパティを使用する事で、リキッドレイアウトデザイン時に横幅を％で指定した場合などに、padding と borderの値を気にせずレイアウトを組めるようになります。