利用するブラウザ(IE, Safari, Chrome等)によって、Webページのデザインを変えようと思っています。
CSS側でユーザーのブラウザを判断して、適用するパラメータを切り替える事は可能ですか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
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; } /* !のあとの文字列はなんでもいいです */
ソース(海外のリンクです): http://paulirish.com/2009/browser-specific-css-hacks/
プラグインを使いたければ海外のURLですが、これを参考にしてみてください。
投稿2014/12/21 14:31
総合スコア118
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。