0

各ブラウザーがレンダリングするボックス シャドウのぼかし半径がわずかに異なることに気付いたので、それを均等にしたいと考えています。ただし、プレフィックスのないバージョンを使用しているため、ブラウザーごとに異なるスタイルシートを提供する必要があります。最も信頼できる方法は何ですか?

例: Mozilla は を使用しmoz_style.css、Chrome はchrome_style.css

ユーザーエージェント検出を使用してこれを行っていますが、あまり信頼できないと聞きました:

<script>
if(BrowserDetect.browser=="Chrome") {
  document.write('<link rel="stylesheet" href="css/chrome.css" type="text/css" media="all" />')
}
</script>
4

1 に答える 1

0

確かに、CSS プロパティとしての box-shadow は、いくつかの異なるブラウザーのベンダー プレフィックスを既に利用しています。Web のどこかから引っ張ってきたこのランダムな box-shadow スニペットを見ると、プライマリ ボックス シャドウ プロパティの上に、webkit、firefox の異なる宣言が使用されていることがわかります。

   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

たとえば、Opera ベンダー プレフィックスが -o であることはわかっているので、サポートされているかどうかはわかりませんが、そのベンダー プレフィックスをボックス シャドウ プロパティに追加して、Opera ブラウザーをカバーできる場合があります。また、IE 固有のボックス シャドウ ルールもあります。

.ieShadow{
    display:block;
    position:absolute;
    z-index:2;
    top:5px;
    left:5px;
    right:-5px;
    bottom:-5px;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
    background-color:#444;
}

Javascript を使用したブラウザの「スニッフィング」は、もはやブラウザを検出する方法ではないと考えられています。

全体として、ボックス シャドウ コードは、ベンダー プレフィックス付きのプロパティごとに異なる可能性があります。

編集:この件に関するいくつかの啓蒙は、それが実際にはそれほど単純ではないことを明らかにしています. ベンダープレフィックスは、実際には少し混乱しています。

これにより、webkit エンジンとメインの box-shadow プロパティを使用しているブラウザーの良いアイデアが得られます。

.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ 
}

したがって、特定のブラウザー ターゲティングは、CSS のベンダー プレフィックスでは達成できないと思います (??!)

于 2013-06-15T23:18:21.597 に答える