【问题标题】:Are there any javascript code (polyfill) available that enable Flexbox (2012, css3), like modernizr?是否有任何 javascript 代码(polyfill)可以启用 Flexbox(2012,css3),例如modernizr?
【发布时间】:2013-01-01 09:48:06
【问题描述】:

我正在寻找任何像modernizr(实际上没有)为“旧浏览器”(一个polyfill)启用flexbox的javascript库。

是的,我知道这是一个非常新的功能(事实上“没有”是一个有效的答案),但我希望有这样的东西,我总是很难水平+垂直居中,这真的会帮助并缩短工作时间。

我的意思是这个 flexbox:http://weblog.bocoup.com/dive-into-flexbox/(最新的)

【问题讨论】:

  • 您希望支持哪些旧版浏览器?
  • 不太,我只用 IE9、firefox 和 chrome 都是最新版本。对于旧版浏览器,“更新”是关键字。

标签: javascript html css flexbox polyfills


【解决方案1】:

这可能是too early。 WebKit 最近才实现它,根本没有任何移动 WebKit 支持的迹象,Opera 刚刚发布了对它的支持,而 Gecko 的实现仍处于 alpha 阶段。 IE?哈。

但据我所知,不,新的 flexbox 没有 polyfill。 Flexie 支持旧的 flexbox,并有一个 ticket 开放以支持新语法......也许你可以帮他们一把?

我想你总是可以使用旧的 flexbox,但是你已经过时了。糟糕的情况。

【讨论】:

  • 是的,绝对糟糕的情况。我会再等一天,然后我会将您标记为答案(我不知道今晚是否有开发人员会创建它:P)
【解决方案2】:

您将不得不创建自己的。 http://www.sitepoint.com/detect-css3-property-browser-support/ 有一个标题为“滚动你自己的检测代码”的部分

基本上你需要这样的东西:

// detect CSS display:flex support in JavaScript
var detector = document.createElement("detect");
detector.style.display = "flex";
if (detector.style.display === "flex") {
    console.log("Flex is supported");
}
else
{
    console.log("Flex is not supported");
}

对此进行扩展并创建一个函数:

function DetectDisplayValue(val)
{
  // detect CSS display:val support in JavaScript
  // 
  var detector = document.createElement("detect");
  detector.style.display = val;
  if (detector.style.display === val) {
    console.log("Display value: " + val + " is supported");
  }
  else
  {
      console.log("Display value: " + val + " is not supported");
  }
}

【讨论】:

  • 我认为问题是要求 polyfill,而不仅仅是检测是否存在支持
  • 哦,我明白了,OP 要求的是 Flexbox 实现,而不是类似 Modernizr 的检测。
  • 是的,对不起,我要求实现
猜你喜欢
  • 2016-02-26
  • 2012-02-26
  • 2015-06-10
  • 2022-08-12
  • 1970-01-01
  • 1970-01-01
  • 2014-09-10
  • 1970-01-01
  • 2011-04-04
相关资源
最近更新 更多