IE、Mozilla、Chrome 用の特定の CSS を含めるために使用できる CSS 条件ステートメントは何でしょうか。
If IE
#container { top: 5px; }
If Mozilla
#container { top: 7px; }
If Chrome
#container { top: 9px; }
それぞれの「If」は何ですか?
125196 次
9 に答える
35
そのために
- ユーザー エージェントをスキャンして、どのブラウザーとそのバージョンを調べることができます。OS 固有のスタイルに OS を含める
- 特定のブラウザ用にさまざまな CSS ハックを使用できます
- または、ブラウザを識別し、さまざまなクラスを要素に適用するためのスクリプトまたはプラグイン
PHP の使用
見る
- http://php.net/manual/en/function.get-browser.php
- http://techpatterns.com/downloads/php-browser-detection-basic.php
- http://techpatterns.com/downloads/php_browser_detection.php (JSも含む)
次に、検出されたブラウザに従って動的 CSS ファイルを作成します。
CSSハックリストはこちら
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
ソース: http://paulirish.com/2009/browser-specific-css-hacks/
プラグインを使用する場合は、ここにあります
于 2010-12-02T05:58:54.977 に答える
8
php を使用して、ブラウザー名をbodyクラスとしてエコーすることができます。
<body class="mozilla">
次に、条件付き CSS は次のようになります
.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
于 2010-12-02T06:00:14.187 に答える
3
クリーンなコードの場合は、次のjavascriptファイルを使用できます。http：//rafael.adm.br/css_browser_selector/ 次の行を含めることにより：
<script src="css_browser_selector.js" type="text/javascript"></script>
次の単純なパターンで後続のcssを記述できます。
.ie7 [thing] {
background-color: orange
}
.chrome [thing] {
background-color: gray
}
于 2011-01-28T17:52:18.890 に答える
2
タグに PHP も含まれているため、サーバー側のオプションをいくつか提案します。
最も簡単な解決策は、ほとんどの人がここで提案するものです。私がこれに関して一般的に抱えている問題は、CSS ファイルまたは <style> タグが html ドキュメントよりも最大 20 倍大きくなり、ブラウザが理解できないタグを解析および処理するためにブラウザが遅くなる可能性があることです-moz-border-radius。-webkit-border-radius
2番目に良い解決策（私が見つけた）は、phpに実際のcssファイルを出力させることです。
<link rel="stylesheet" type="text/css" href="mycss.php">
どこ
<?php
header("Content-Type: テキスト/css");
if( preg_match("/chrome/", $_SERVER['HTTP_USER_AGENT']) ) {
// クロム固有の CSS スタイルを出力します
} そうしないと {
// デフォルトの CSS スタイルを出力
}
?>
これにより、ブラウザ用に処理しやすい小さなファイルを作成できます。
私が見つけた最良の方法は、Apacheに固有のものです。その方法は、mod_rewrite または mod_perl の PerlMapToStorageHandler を使用して、レンダリング エンジンに基づいてシステム上のファイルに URL を再マップすることです。
あなたのウェブサイトがhttp://www.myexample.com/で、それが を指しているとし/srv/www/htmlます。chrome の場合、main.css を要求すると、ロード/srv/www/html/main.cssする代わりに、存在するかどうかを確認し、/srv/www/html/main.webkit.css存在する場合はそれをダンプし、存在しない場合は main.css を出力します。IEなら試してみますmain.trident.css、firefoxなら試してみmain.gecko.cssます。上記のように、より小さく、よりターゲットを絞った css ファイルを作成できますが、キャッシュをより適切に使用することもできます。これは、ブラウザーがファイルの再ダウンロードを試み、Web サーバーが適切な 304 をブラウザーに提示して通知するためです。 、再ダウンロードする必要はありません。また、Web 開発者はターゲット プラットフォームにバックエンド コードを記述する必要がなく、自由度が少し高くなります。また、JavaScriptエンジンにもリダイレクトされている.jsファイルがありますmain.js。クロムではmain.v8.js、サファリでは、main.nitro.js、Firefox では、main.gecko.js. これにより、より高速な特定の JavaScript の出力が可能になります (ブラウザーのテスト コード/機能テストが少なくなります)。確かに、開発者は特定のものをターゲットにする必要はmain.jsなく、make ではなく a を記述できmain.<js engine>.js、それは通常どおりロードされます。つまり、main.jsとmain.jscript.jsファイルがあるということは、IE が jscript を取得し、他のすべてのユーザーがデフォルトの js を取得することを意味します。これは css ファイルと同じです。
于 2010-12-02T06:37:59.000 に答える
1
IE固有のCSSに対するPaulIrishのアプローチは、私が見た中で最もエレガントです。条件ステートメントを使用してHTML要素にクラスを追加します。このクラスを使用して、ハッキングに頼ることなく、適切なIEバージョン固有のCSSを適用できます。CSSは検証を行い、今後のブラウザバージョンで引き続き機能します。
アプローチの完全な詳細は彼のサイトで見ることができます。
これはMozillaとChromeのブラウザ固有のハックをカバーしていません...しかし、とにかくそれらが必要だとは思いません。
于 2010-12-02T06:05:00.613 に答える
1
css ファイルでこのコードを使用できます。
-webkit-top:9px;
-moz-top:7px;
top:5px;
コード -webkit-top:9px; はクロム用、-moz-top:7px はモジラ用、最後の 1 つは IE 用です。楽しんで！！！
于 2010-12-02T06:27:04.663 に答える
0
エージェント検出器を使用し、Web 言語の create プログラムで css を作成します
たとえば、Pythonで
csscreator()
useragent = detector()
if useragent == "Firefox":
css = "your css"
...
return css
于 2010-12-02T06:12:07.053 に答える
0
このリンクをチェックしてください: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
2 エクスプローラー固有の CSS ルール (IE CSS ハック)
もう 1 つのオプションは、Explorer だけが読み取ることができる CSS ルールを宣言することです。たとえば、CSS プロパティが IE7 を対象とする前にアスタリスク (*) を追加するか、プロパティが IE6 を対象とする前にアンダースコアを追加します。ただし、有効な CSS 構文ではないため、この方法はお勧めしません。
IE8 以下: 特に IE8 以下に特化した CSS ルールを作成するには、バックスラッシュと 9 (\9) を末尾のセミコロンの前に追加します。IE7 以下: CSS プロパティの前にアスタリスク (*) を追加します。IE6: プロパティの前にアンダースコア (_) を追加します。。箱 {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
于 2013-05-22T11:15:48.330 に答える