compassのミックスインとCSS3 PIEでグラデーション

パスの問題によりhtcではなくjsを使用することが多くなった。

compassのミックスインでグラデーション


@import "compass";
.sample{
@include background(linear-gradient(#fff, #000));
}

なんだけど、これだけだとIEダメダメトリオ(7,8,9)ではグラデが表示されない。
※IE6は逝去

CSS3 PIEと併用する。
scss側はこんな感じ。


@import "compass";
.sample{
@include background(linear-gradient(#fff, #000));
-pie-background: linear-gradient(#fff, #000);
position: relative;
}

relativeはCSS3 PIEがうまく働かないときに。

netbeans + compassでmapファイルが出ない場合

プロジェクトのプロパティから
CSSプリプロセッサの
右上の方にある「実行可能ファイルを構成」ボタンをクリック
「追加削除の生成(G)(デバッグ)」
にチェックが入っていなければ、これが原因。

これで書き出されるmapファイルがあれば、Chromeは開発ツールでcssの代わりにscssファイルの場所を示してくれるのでとても便利。
安心してcompressedで書き出せる。

Firefoxは・・・試してみたが今のところ表示できない。
検索して出てきたアドオンとか入れてもダメだった。

netbeans + compassで書き出しをcompressedにする

プロジェクトのプロパティにある、CSSプリプロセッサで設定。
コンパイラオプションは

--compass

だけで最低限動作するけど、書き出されるcssのファイルサイズを抑えたいので

--compass --style compressed

に。
config.rbで設定できる

output_style = :compressed

と同じ結果になる。

floatの代わりにinline-blockを使う

横並びで表示させたいときに、高さが違っても大丈夫なので便利。

inline-blockを使う上で幾つか注意点

IE7用
cssで

#sample{
display:block;
*display:inline;
*zoom:1;
}

横並びにすると改行の分、余計なスペースが入る
親要素のletter-spacingで調整

例えば、ul liで使う場合。

ul{
letter-spacing: -.40em;
}
ul li{
display:block;
*display:inline;
*zoom:1;
letter-spacing: normal;
}

という感じ。

弱点

横並びにするときに、右側ピッタリにする必要がある場合は、面倒なのでfloatを使った方が楽かも。

Auto Post Thumbnailは便利だけど。

Auto Post Thumbnailは便利だけど、少しはまったのでメモ。

記事の中の一番最初の画像を取ってくるので、絵文字アイコンとかが文中にあると悲惨なことに。
それらは.gifや.pngである可能性が高いので、以下の方法で回避。

プラグインのファイル、auto-post-thumbnail.php で

preg_match_all('/<\s*img [^\>]*src\s*=\s*[\""\']?([^\""\'>]*)/i', $post[0]->post_content, $matches);

となっているの部分を

preg_match_all('/<\s*img [^\>]*src\s*=\s*[\""\']?([^\""\'>]*.jpg)/i', $post[0]->post_content, $matches);

に変更。(2か所)
完ぺきではないけど、これで一応。

設定 - メディアで指定されているサムネイルのサイズにならない。

テーマ内のfunctions.phpにサムネイルサイズが指定されている可能性がある。
私の場合、
set_post_thumbnail_size
の値が優先されていた。
こちらの値を直接指定したら、直った。

CSS高さ揃え

display:box;
display:-webkit-box;
display:-moz-box;
便利です。
ulとliで利用しました。
(ulにdisplay:box;)。

が、子要素が多いと親要素のwidthをぶっちぎって横並びしますね。
子要素に
display:inline-block;
vertical-align:top;
でやや安定。
親要素のwidthに合わせてリキッドデザインのように複数行に変わる。
その際に発生する、改行=半角スペースをケアしてあげれば、ほぼ望み通りの形に。

<li>...</li
><li>...</li
><li>...</li>

こんな感じ。
まあ、IE6が消えてもまだダメなIEが絶滅してないので、当分スマホ用の書き方だけど。