css3

:nth-childの基本とIE対応

リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。

使い方の基本

○番目のエレメントを指定する
※3番目の場合

 奇数、偶数を指定する

※奇数

※偶数

 ○番目以降をすべて指定する
※3番目以降を指定

 IE8以下での対応

ハックを利用する
3番目を指定する場合

:first-childは ie8に対応しています。
jsを使いたくない場合はこの方法で。でも○番目ごとになどは難しい。

jQueryで対応する

jqueryで「addClass」を定義して対応することができます。

3つごとのliに「li-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。

Selectivizrを利用する

css3セレクタをIE6~IE8に対応させることができるjavascriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。

http://selectivizr.com/

※利用するときはjqueryも一緒に(一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり)

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

html5,CSS3でサイト制作するときにお世話になるjavascriptライブラリ(主にIE対応)

IE8以下はhtml5を認識しない、css3にも対応していないのでjavascriptライブラリにお世話になります。

そのまとめ。

html5shiv.js

https://github.com/aFarkas/html5shiv

html5から導入されたタグ(header,footer,section,article,asideなど)はIE8以下では認識されない。
それらをIE8でも解釈させるためのjavascript ライブラリ。

 

respond.js
https://github.com/scottjehl/Respond

scottjehl Respond · GitHub

Media Queries(max-widthとmin-width)を解釈可能にするpolyfill

 

selectivizr
https://github.com/keithclark/selectivizr

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

CSS3をIE8以下でも認識させるためのjavascriptライブラリ「Selectivizr」
疑似クラス・擬似要素(の一部)が利用可能に。

Selectivizrを使う上での注意

  • jQuery,prototype,YUIなどのJavaScriptライブラリが必須
  • CSSソースはlink要素を使って読み込む

 

modernizr
http://modernizr.com/

Modernizr  the feature detection library for HTML5 CSS3

ブラウザで対応している機能をCSS,Javascriptで確認できる。

nth-child、last-childをie8でも使いたい

カラムを横並びにしたいときに:nth-childは便利です。

でもIE8以下は対応してません。

※ :first-child は、ie7から対応してます。

どうしてもie8でもnth-child擬似クラスを使いたいときのハック。

HTML

CSS(ie8 非対応)

この状態でie8で確認すると…

ie8_pre

カラム落ちしてます。

ie8に対応させるためには、以下のスタイルシートを付記。

4番めと8番目を「+*」で指定してます。

ie8_after

でも、これだと、カラム数が決まっている場合はいいのですが、もっとカラムが多くなったり、いくつになるかわからない場合は、現実的じゃないですね。

やはりjavascript での対応になるでしょうか

IE8以下でもCSS3に対応する「selectivizr」
http://selectivizr.com/

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

Selevtivizrは、jQurey,mootoolsなどのライブラリが必須です。

また、スタイルシートは外部ファイルとして読み込む必要があるとのこと。

 

クロスブラウザ(IE8以下でも)opacity,RGBaに対応する

IE8以下では透明の要素(opacity,rgba)には対応していませんが、
IE8以下でも対応させるには

 

例えば背景だけを透過させてテキストは透過させたくない場合は、opacityではなくRGBaを設定します。

GradientType

グラデーションの方向を指定
0は縦方向、1は横方向のグラデーションになります。

StartColorStr

グラデーションの開始の色を指定。
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

EndColorStr

グラデーションの終わりの色を指定
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

 

参考サイト

RGBa Browser Support
http://css-tricks.com/rgba-browser-support/

IE8とIE9できれいに透過を適応させるCSS
http://news.ko-zu.com/bgiecss/

Retina Display 用のMedia Query

Retina 対応の画像を用意する場合

device pixel ratio とは
デバイスピクセル比とかいわれている
デバイスピクセル(dpx)とCSSピクセル(csspx)の対応

スマートフォンの画面解像度とピクセル密度についてはこちらのサイトがとても分かりやすかったです。
http://myakura.github.io/n/density.html

CSS TRICKS
Retina Display Media Query
http://css-tricks.com/snippets/css/retina-display-media-query/

mixin

device pixel ratio が1.3にするとAndroidの高解像度デバイスにも対応するってことでしょうか
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集
http://www.webcreatorbox.com/tech/sass-mixin/