javascript - 在没有浏览器检测的情况下为不同的浏览器提供不同的 css 框阴影？

Question

我注意到每个浏览器呈现的框阴影模糊半径略有不同，所以我想平衡一下。但是，由于他们使用无前缀版本，我需要为不同的浏览器提供不同的样式表。最靠谱的方法是什么？

例如: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>

Answer 1

当然，作为 CSS 属性的 box-shadow 已经为一些不同的浏览器使用了 vendor 前缀。如果你看一下我从网络上其他地方提取的这个随机框阴影片段，你会发现它使用不同的 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 vendor 前缀是 -o，因此您可以将该 vendor 前缀附加到 box shadow 属性以覆盖 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 浏览器“嗅探”已不再是检测浏览器的方式。

所以是的，总而言之，您的盒子阴影代码肯定会因 vendor 前缀属性而异？

编辑: 对这个主题的一些启发表明它真的不是那么简单。 vendor 前缀确实有点乱。

这让您对使用 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 中的 vendor 前缀实现(？？!)