ここ最近、見るようになってきた「CSS3」の記述。
なかでも、グラデーションや角丸はとても便利なコードの一つだとおもいます。

そこで、backgroundに背景とグラデーションを表示させるときの注意を。
とても細かい事です。。。

グラデーションのみの記述

.hogehoge a {
background:-webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#333));
}

上記みたいな感じになると思います。
これに背景（アイコン的な）も表示させたい場合は。

グラデーション+背景の記述

.hogehoge a {
background:url(../img/ico_sample.png) no-repeat 0 0,
-webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#333));
}

上記のような書き順で書きます。
表示させたい画像を指定し、コンマで区切り、グラデーションのコードを記述します。

画像の読み込みとグラデーションの記述が逆になると画像は表示されません。
マルチバックグラウンドと同様に書いた順から表示されていくようです。

サンプル

※SafariもしくはChromeで見てください。

CSS Love!!

こんな事ができます。
CSS3便利ですね！

「Adobe BrowserLab」

とうとう出ました。
こういうのを待っていたんですよ。

Macユーザーにとって、ブラウザチェックは鬼門。
なぜかといいますと、WIndowsのIEがチェックできないから。

たかがそれだけの為に、Windowsを起動したりしないといけないので面倒。
それが解消されるというのは気持ち的にもすごくいいw

チェックできる項目は、

コチラですね。
これだけチェックできれば何も問題なさそうです。
なにげにIE9まであるのはうれしいw

チェックしている様子は、

こんな感じ。
シンプル設計だから、チェックだけに集中できます。

IETesterでIE6をチェックするよりいいかと思いました。

マカーなコーダーにはおすすめなサービスだと思います。

とても素敵なサイトをご紹介致します。

Web Design – HTML5 & CSS3 Checklist

CSS3のPropertieやSelector、HTML5の対応状況がチェックリスト形式で確認できるすばらしいサイトです。
リストになっているブラウザは、
Macの「Firefox」「Safari」「Chrome」「Opera」
Windowsの「Firefox」「Safari」「Chrome」「Opera」「IE」

どれも最新ブラウザですね。IEは6〜となってます。
コレを見ればわかるようにIEは見るも無惨に「×」がついております。。。
優秀なのはWebkitベースのSafariとChrome。次いで、Firefoxですね。

今のところ、HTML5 & CSS3でのフルコーディングは難しいですが、開発中のIE9に期待せざるを得ません。

HTML5、CSS3でコーディングをしたい方は目を通してみるといいと思います。

自分のルールを作っておかないと修正の時に見つけるのとか面倒ですしね。
パッとみてこのスタイルにはこのプロパティがあたっている。って理解したいですからね。

いろんな方が順番はこんな感じです。って記事を書いているのを見ますけど、自分と結構違っているので不安な部分も・・・。

とりあえず、見てみてくださいw

1. * width
2. * height
3. * background
4. * border
5. * font
6. * color
7. * text-decoration
8. * text-align
9. * other text
10. * vertical-align
11. * list-style
12. * display
13. * overflow
14. * position
15. * float
16. * clear
17. * z-index
18. * margin
19. * padding
20. * content

こんな感じです。
コレの通りぴったり！って完璧には決めていないですけど、キモになる部分は順番は意識しています。

「width」と「height」は必ず先頭に書いています。
すぐにサイズとかがわかるので見やすいため。

「margin」と「padding」は最後。
これも見やすさ重視。
数値がずれると表示が崩れる原因になるひとつでもありますし。

その他のレイヤーにかんする記述。「position」とか「float」とか。
これらは、「margin」の上に書いています。

「width」と「height」の下には装飾系をおいています。
「background」や「border」とか「font系」です。

という具合に分けています。

自分のコーディングの精度をあげるにはこういった細かいところからも見直すといいかもしれないですね。

transitionプロパティはCSSだけで色々なアニメーションなどを実装できるのでとても便利です。
対応ブラウザはwebkitベースの物、SafariとChromeだけですが魅力的です。

transitionプロパティ

他のブラウザには悪影響はないので隠し要素として適用させておいてもいいかもしれないですね。

.sample { color:#fff; }
head~/* */body .sample { color:#000; }
html:not(:target) .sample { color:#fff; }

これでIE8だけに適用されます。

参考にさせて頂いたサイト。
逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック) | Liquid Paper Clips

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

「-moz-」はMozilla用。一般的にはFirefoxですね。
「-webkit-」はwebkit用。こちらはSafariです。

これだけで今まで面倒だった角丸ボックスを生成してくれます。
IEには適応されないので注意が必要ですが、個人レベルのサイトだったらガンガン使っていていいと思います。
オススメです。

簡単なマウスオーバー効果

opacity:0.8;
filter: alpha(opacity=80);

これを「a:hover」に適用させれば数値分透過されます。
これはIEでも使えるので無駄なボタン画像を減らす事ができます。
楽なのでオススメです。

上記二つは結構使えると思うので試してみてください。

「IE6 No More」

いいことです。
個人的にIE6で制約が増えてやりたいことが面倒になったり、ハックを入れたりするのがイヤなのでIE6はなくなってほしーなーって思ってます。

でも、そうなるとそうなったで大変だともおもってます。
だって、IE6がなくなればCSS3での制作も増えてくると思います。
新しい技術を取得するのも必須となってくるでしょう。

そうなると既に取得している人とこれからって人との差が明確にでてくるでしょう。

煮詰まり感のあるCSSでのコーディングも楽しくなること間違いなし！！！！！！

早く:nth-childとか使いたい。

まず、CSS3のtext-shadowが適用されるようになっています。
@font-faceも対応されていますね！

だいぶ変わったとこ。
例えば、aタグに別窓やポップアップでリンクをする場合、外部リンクですよーってアイコンを付加してあげるとおもうんですが、その時のソース。

CSSソース

a[target] {
	background:url(../img/ico/ico_brank.gif) no-repeat right center;
	padding-right:15px;
}

上記のソースで

このように表示されていたんですが、Firefox3.5にしたらおかしなことに。。。

こんなになっちゃいました。
backgroundのpositionを命令している部分を数値にしてみても改行されたような感じで表示されてしまったり、おかしな挙動になってしまいます。。。

なので、とりあえずの回避方法として

CSSソース

a[target] {
	display:inline-table;
	background:url(../img/ico/ico_brank.gif) no-repeat right center;
	padding-right:15px;
}

「display:inline-table;」を使います。そうすると、意図していた表示になると思います。
ただし、Safariで確認すると、上寄りになってしまうためあまり使えません・・・。

後、「em」タグもおかしな挙動になっています。
ブロック要素？みたいになっていてさらにmargin-bottomも勝手に取っています。
これも「display:inline-table;」でとりあえずは回避できますが、検証が必要です。

さらに、「label」タグもおかしいです。。。

これは少し大変なバージョンアップだったんではないでしょうか。
何かわかり次第、更新したいと思います。

Firefox3.5の詳しい変更点はコチラをご覧下さい。
Firefox 3.5 for developers

しかし、そんなときだからこそ試してほしい事があります。

「ハックを使わないでコーディング」

これを是非ためしてほしいのです。
簡単なところだと、floatをかけた要素にmarginをかけると一部のバージョンのIEではmarginを倍にとってしまうバグがあります。
そんなときにハックをつかって回避していると思います。
そういう部分をpaddingを適用させハックを使わないようにするなど回避方法は色々とあると思います。

そういった部分でハックを極力減らしてコーディングをする事を意識してほしいと思っています。

そういう事を意識する事によってもっとコーディングの技術があがっていくと思います。

やばい、偉そうな事いいすぎた・・・。
すいません、自分はまだまだペーペーなので自分がそういう事を意識して煮詰まったCSSのコーディングを楽しんでいきたいと考えていました。

そんな火曜日の夜。