0

私は自分のWebサイトで自分で作成した2種類の条件文を使用しています。これらのステートメントを使用して、ブラウザーを検出し、さまざまなスタイルシートを出力します。（これを行うには、より優れた、より複雑な方法があることは知っていますが、これは重要ではありません。）ご覧のとおり、MSIE 8、9、10などは同じスタイルシートを使用していますが、その方法についてはよくわかりません。ステートメントをグループ化するには：

<?php
if (strStr(getEnv('HTTP_USER_AGENT'), 'Opera')) 
{ 
  echo '<link rel="stylesheet" href="http://www.example.com/nn_styles.css" type="text/css" media="screen">' . "\n" . '<style type="text/css">@import url("http://www.example.com/op11_styles.css");</style>' . "\n"; 
} 
else if (strStr(getEnv('HTTP_USER_AGENT'), 'Gecko')) 
{ 
  echo '<link rel="stylesheet" href="http://www.example.com/nn_styles.css" type="text/css" media="screen">' . "\n" . '<style type="text/css">@import url("http://www.example.com/ch_styles.css");</style>' . "\n"; 
}
else if (strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 6.0')) 
{ 
  echo '<link rel="stylesheet" href="http://www.example.com/ie_styles.css" type="text/css" media="screen">' . "\n" . '<style type="text/css">@import url("http://www.example.com/ie6_styles.css");</style>' . "\n"; 
}
else if (strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 7.0')) 
{ 
  echo '<link rel="stylesheet" href="http://www.example.com/ie7_styles.css" type="text/css" media="screen">' . "\n" . '<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>' . "\n"; 
}
else if (strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 8.0')) 
{ 
  echo '<style type="text/css">@import url("http://www.example.com/ie7_styles.css");</style>' . "\n" . '<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>' . "\n"; 
}
else if (strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 9.0')) 
{ 
  echo '<style type="text/css">@import url("http://www.example.com/ie7_styles.css");</style>' . "\n" . '<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>' . "\n"; 
}
else if (strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 10.0')) 
{ 
  echo '<style type="text/css">@import url("http://www.example.com/ie7_styles.css");</style>' . "\n" . '<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>' . "\n"; 
}
?>

これは同じスクリプトのJSバージョンです。

var MSIE10=navigator.userAgent.indexOf("MSIE 10.0");
var MSIE9=navigator.userAgent.indexOf("MSIE 9.0");
var MSIE8=navigator.userAgent.indexOf("MSIE 8.0");
var MSIE7=navigator.userAgent.indexOf("MSIE 7.0");
var MSIE6=navigator.userAgent.indexOf("MSIE 6.0");
var NETS=navigator.userAgent.indexOf("Gecko");
var OPER=navigator.userAgent.indexOf("Opera");
if(OPER>-1) {
document.write('<link rel="stylesheet" href="http://www.example.com/op_styles.css" type="text/css">');
document.write('<style type="text/css">@import url("http://www.example.com/op11_styles.css");</style>');
}
else if(MSIE6>-1){
document.write('<link rel="stylesheet" href="http://www.example.com/ie_styles.css" type="text/css">');
document.write('<style type="text/css">@import url("http://www.example.com/ie6_styles.css");</style>');
}
else if(MSIE7>-1){
document.write('<link rel="stylesheet" href="http://www.example.com/ie7_styles.css" type="text/css">');
document.write('<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>');
}
else if(MSIE8>-1){
document.write('<style type="text/css">@import url("http://www.example.com/ie7_styles.css");</style>');
document.write('<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>');
}
else if(MSIE9>-1){
document.write('<style type="text/css">@import url("http://www.example.com/ie7_styles.css");</style>');
document.write('<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>');
}
else if(MSIE10>-1){
document.write('<style type="text/css">@import url("http://www.example.com/ie7_styles.css");</style>');
document.write('<style type="text/css">@import url("http://www.example.com/ie7_9_styles.css");</style>');
}
else {
document.write('<link rel="stylesheet" href="http://www.example.com/nn_styles.css" type="text/css">');
document.write('<style type="text/css">@import url("http://www.example.com/ch_styles.css");</style>');
}
4

4 に答える 4

1

コード編成の問題を回避して、サーバーに組み込まれているブラウザー検出機能を使用することを検討してください。 ユーザーエージェント文字列を解析するコード?

クライアントに関しては、通常、JS でブラウザー固有の処理を行うことは避け、代わりにこれらの違いを隠すフレームワーク (jQuery など) を使用することをお勧めします。この場合、サーバーのブラウザ検出に基づいて、条件付きで正しいスタイル シートにリンクできるようです。

于 2013-03-04T07:18:35.143 に答える
0

すべてのブラウザーにスタイルシートが本当に必要な場合は、HTML マークアップを確認する必要があるかもしれません。しかし、あなたの質問に答えるには、これが私が行う方法です。確認していないので、多少の誤差があるかもしれません。

PHP

$user_agents = array(
    'Opera' => 'nn',
    'Gecko' => 'nn',
    'MSIE 6.0' => 'ie'
);

$style_sheet = 'ie7'; // default
foreach ($user_agents as $agent => $sheet) {
    if (strStr(getEnv('HTTP_USER_AGENT'), $agent)) {
        $style_sheet = $sheet;
        break;
    }
}

echo '<link rel="stylesheet" href="http://www.example.com/'.$style_sheet.'_style.css" type="text/css" media="screen">';

Javascript

簡単にするために、スタイル シートの命名規則に一貫性を持たせる必要があります。

var user_agents = ['MSIE 9.0', 'MSIE 6.0', 'MSIE', 'Gecko', 'Opera'],
    style_sheets = ['ie7_9', 'ie', 'ie7', 'nn', 'op'], // indexs correspond with user_agents array
    inserted = false;

user_agents.forEach(function(item, index) {
    if (!inserted && navigator.userAgent.indexOf(item) > -1) {
        document.write('<link rel="stylesheet" href="http://www.example.com/'+style_sheets[index]+'_styles.css" type="text/css">');
        document.write('<style type="text/css">@import url("http://www.example.com/'+style_sheets[index]+'_styles.css");</style>');
        inserted = true;
    }
});
于 2013-03-04T07:58:30.530 に答える
0

これを試して

if (strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 7.0') || strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 8.0') || strStr(getEnv('HTTP_USER_AGENT'), 'MSIE 9.0'))
于 2013-03-04T07:16:35.630 に答える
0

HTML 条件ステートメントを使用することをお勧めします。

<!--[if IE 6]>
<link rel="stylesheet" href="http://www.example.com/ie_styles.css" type="text/css">
<style type="text/css">@import url("http://www.example.com/ie6_styles.css");</style>
<![endif]-->

ifを次のように置き換えますswitch

switch (strtolower(getEnv('HTTP_USER_AGENT'))) {
   case 'opera':
   ...
   break;
}

switch (true)また、JS 部分については、さまざまな条件を case ステートメントとして使用および確認できます。

于 2013-03-04T07:18:31.163 に答える