如何使用JavaScript确定确切的浏览器和版本？

我正在开发一个项目,其中我有一个响应网格,我已经使用flex wrap属性实现了.由于我支持IE9和更低版本的Firefox,版本28及更低版本,我如何通过javascript找到对它的支持.目前我只能通过条件语句识别IE9浏览器,但现在有人如何通过javascript检测Firefox旧版本.

<edit>我实际上已经猜到这会发生但是在发布后几秒钟我得到了一个"可能重复"的标志,这是不合适的!这个问题是关于CSS值而不是CSS属性名称,因此它不是这个或这个问题的重复!它也不是这个的重复,因为我要求一个通用的解决方案.
如果你仍然不相信或不确定这篇文章的内容,也许你会看看这个问题的底部:"我不是在寻找什么"和"谁没有完成工作" </edit>

如果需要,有没有办法通过JavaScript设置适当的供应商前缀CSS值客户端？

我正在寻找什么

例如: background: -prefix-linear-gradient{...}

我希望得到一个关于如何通过JavaScript在客户端设置供应商前缀CSS值的通用解决方案.其中供应商特定的前缀(-prefix-transform: translate{...},<edit>,</edit>等),这可能是已知的非常好,所以并不在我的问题的范围.这个问题是关于如何做这个客户端而不是构建过程的一部分.

但我也很欣赏任何提示

• 完成工作的JavaScript/jQuery插件或
• 额外的资源可以让我自己解决.

如你所见,我已经自己给出了答案.但我仍在寻找更好的解决方案,因为Autoprefixer带有大约626 KB的重载荷!

用例场景

/*
Unprefixed version of "linear-gradient" will only work for
browsers: IE10+, FF16+, Chrome26+, Opera12+, Safari7+.
So how to generate a prefixed version on the fly if necessary?
*/

var aVal = ['linear-gradient(to bottom, #fefefe 0%,#aaaaaa 100%)', 'linear-gradient(to bottom, #aaaaaa 0%,#fefefe 100%']
    style = document.getElementsByTagName('BODY')[0].style, …

我的网站在IE11中完全破碎了.问题来自于flex: 1 1 0%;,由于autoprefixer和postcss-flexbugs-fixes我到处使用.

当我将其flex: 1 1 auto;更改为时,该网站确实可以在IE上运行,但随后某些行为也会发生变化(例如,一个带有两个flex: 1 1 auto;孩子的弹性箱不会占用完全相同的空间).因此,这个解决方案在其他浏览器上破坏了我的设计(虽然在IE11上使它更好 - 而不是破坏).

人们如何设法使用Flexbox构建自己的网站在IE11上运行？

编辑:这是一支笔,突出了我面临的问题:https://codepen.io/Zephir77167/pen/GMjBrd(在Chrome和IE11上试试).

Edit2:这是代码:

HTML:

<div id="a" class="flex">
  <div id="b" class="item flex-1">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1">
    Heyheyheyheyho
  </div>
</div>
<br />
<div id="a" class="flex">
  <div id="b" class="item flex-1-variation">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1-variation">
    Heyheyheyheyho
  </div>
</div>

CSS:

* { …

例如，我有以下 CSS：

.myClass {
  background: -moz-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #FFF 0%,  #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

我正在创建一个带有渐变的图像。请注意，我需要使用三个background属性来处理对不同浏览器的支持。我如何在 React 中使用内联样式来做到这一点？

我知道 React 中的内联样式接受字典来表示我们的 CSS 样式，但在这种情况下，我最终会得到重复的background键。例如，在这种情况下，这将是我的字典：

const stylesDict = {
  background: "-moz-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* FF3.6-15 */
  background: "-webkit-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* Chrome10-25,Safari5.1-6 */
  background: "linear-gradient(to right, …

我想为支持“显示：网格”但不是 IE/MS Edge 的浏览器提供特定部分的 CSS。你如何混合正面和负面的@support 查询？

你能写“and not”还是有类似的符号？不幸的是，以下方法不起作用。

@supports not (-ms-ime-align:auto) and (display: grid) {
  display: none;
}

如何为不支持当前规范的浏览器通过功能查询或媒体查询可靠地为CSS网格样式创建后备？

根据此类文章，浏览器会忽略无法解析的CSS。因此，我希望否定功能查询即使在不支持它的浏览器上也能正常工作。例如IE11不支持功能查询，因此我希望它忽略这一行并在查询中应用样式：@supports not (display: grid){}。但是，正如您在此测试中所看到的，IE11会忽略该查询中的所有样式。

我找到了针对IE10 +的媒体查询，但该查询排除了其他不支持网格的浏览器。当然，我可以先声明后备样式并用@supports (grid-area: area)查询覆盖它们，但是我更喜欢不需要覆盖的解决方案。