各ブラウザでCSSを切り替えるには？

利用するブラウザ(IE, Safari, Chrome等)によって、Webページのデザインを変えようと思っています。
CSS側でユーザーのブラウザを判断して、適用するパラメータを切り替える事は可能ですか？

行動規範の内容に同意します

回答1件

ベストアンサー

CSSハックを使えばよいと思います。
どのブラウザのどのバージョンかは、ユーザエージェントで確認することができます。

以下はCSSのハックリストです

lang
1/***** セレクターのハック ******/
2
3/* IE6 以前のもの */
4* html #uno { color: red }
5
6/* IE7 */
7*:first-child+html #dos { color: red } 
8
9/* IE7, Firefox, safari, Opera */
10html>body #tres { color: red }
11
12/* IE8, Firefox, safari, Opera ( IE 6,7以外のすべてのもの) */
13html>/**/body #cuatro { color: red }
14
15/* Opera 9.27 and below, safari 2 */
16html:first-child #cinco { color: red }
17
18/* safari 2-3 */
19html[xmlns*=""] body:last-child #seis { color: red }
20
21/* safari 3+, chrome 1+, opera9+, Firefox 3.5+ */
22body:nth-of-type(1) #siete { color: red }
23
24/* safari 3+, chrome 1+, opera9+, Firefox 3.5+ */
25body:first-of-type #ocho { color: red }
26
27/* safari3+, chrome1+ */
28@media screen and (-webkit-min-device-pixel-ratio:0) {
29#diez { color: red }
30}
31
32/* iPhone / mobile webkit */
33@media screen and (max-device-width: 480px) {
34#veintiseis { color: red }
35}
36
37
38/* safari 2 - 3.1 */
39html[xmlns*=""]:root #trece { color: red }
40
41/* safari 2 - 3.1, Opera 9.25 */
42*|html[xmlns*=""] #catorce { color: red }
43
44/* IE6-8以外のすべてのもの */
45:root *> #quince { color: red }
46
47/* IE7 */
48*+html #dieciocho { color: red }
49
50/* Firefox only. 1+ */
51#veinticuatro, x:-moz-any-link { color: red }
52
53/* Firefox 3.0+ */
54#veinticinco, x:-moz-any-link, x:default { color: red }
55
56
57
58/***** アトリビュートのハック ******/
59
60/* IE6 */
61#once { _color: blue }
62
63/* IE6, IE7 */
64#doce { *color: blue; /* or #color: blue */ }
65
66/* IE6以外のすべてのもの */
67#diecisiete { color/**/: blue }
68
69/* IE6, IE7, IE8 */
70#diecinueve { color: blue\9; }
71
72/* IE7, IE8 */
73#veinte { color/*\**/: blue\9; }
74
75/* IE6, IE7 -- !importantとして作動します */
76#veintesiete { color: blue !ie; } /* !のあとの文字列はなんでもいいです */