初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。

CSSハック一覧表とiPhone viewportのプロパティとバリューについて。

備忘録としてCSSハックやios向けのviewportについて一覧にまとめました。
新しいハックが出てきたら随時更新したいと思います。

後日、筆者がWEB製作中にはまった事があるCSSのフロートの概念や今現在、わかっている各ブラウザの癖などの一覧も公開したいと思います。
クロスブラウザ対策も最近そんなに面倒でもなくなってはきているもののMicrosoftの公式発表ではWindows XPは2014年までサポートするみたいなので、まだまだIE6,7を完全に除外する事はできないですね。

CSSハック一覧表

対象ブラウザ

記述例

IE6 * html #name{property: value;}

#name{property: value;}

IE7 *:first-child+html #name{property: value;}

*+html #name{property: value;}

IE8 #name{property: value;}
IE6とIE7 #name{property:value;}
IE7とIE8 #name{property/***/: value;}
IE6,IE7 以外 html>/**/body #name{property:value;}
IE6〜IE8 以外 :root *> #name{property:value;}
Firefox #name, x:-moz-any-link{property: value;}
Firefox3 以上 #name, x:-moz-any-link, x:default{property: value;}
Safari2〜3 html[xmlns*=””] body:last-child #name{property: value;}
Safari2〜3.1 html[xmlns*=””]:root #name{property: value;}
Safari2〜3,1

Opera9.25

*|html{xmlns*=””} #name{property: value;}
Safari3以上

Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){
#name{property: value;}

}

Safari3以上

Firefox3.5以上

Chrome

Opera9以上

body:nth-of-type(1) #name{property: value;}

body:first-of-type #name{property:value;}

Opera9.25以上 ;;body #name{property: value;}

html:66irst-child #name{property: value;}

Opera8,9以外 body[class | =”hypen-ated”] #name{property: value;}

iPhone,iPad,ipadmini viewportのプロパティと値

iphone viewportについて
<meta name = “viewport” content = “width = value, initial-scale = value, user-scalable = value”>
Property Default values
width 980px 200〜10000px,device-width,device-height
height none 223〜10000px,device-width,device-height
initial-scale 1 minimum-scale,maximum-scale
user-scalable yes yes,no
minimum-scale 0.25 0〜10
maximum-scale 1.6 0〜10
ダイレクト特集ページ用バナー(ダウンロード版)

初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。