Question

我希望用户单击按钮以显示隐藏的弹性框菜单。所以当然我知道如何处理正常的事情：

nav#test {
    display: none;
    flex-flow: column nowrap;
}

document.querySelector('#test').style.display = 'flex';

但是愚蠢的供应商前缀备用规则呢？以前从来没有找到我，我也不知道如何处理它们。

编辑：为什么不使用Autoprefixer？

总之：wrap。在上面的示例中，我使用了flex-flow: column nowrap;。但是，让我们说规则是flex-flow: row wrap;。 Autoprefixer只会为最近的浏览器提供修复，因为旧版（但不是那个旧版）的Firefox和Safari [没有wrap支持）包括适用于iOS的Chrome]。

因此，如果您使用了Autoprefixer，那么您的flex-flow: row wrap元素就会在这些浏览器上中断。根据设置，您的弹性儿童可能会直接从屏幕侧面运行。

通过指定-webkit-box-orient: vertical甚至-moz-box-orient: vertical（现代flex-direction: column的等价物），或许您宁愿在这些情况下提供替代布局。

Answer 1

您可以使用标准属性和前缀属性创建CSS类选择器，只需使用JavaScript将类添加到按钮单击时所需的任何元素。例如：

var navButton = document.getElementById("navControl");
navButton.addEventListener("click", showNav, false);

function showNav() {
    var nav = document.getElementById("test");
    nav.className = "flexClass";
}

nav#test {
    display: none;
    flex-flow: column nowrap;
}

#test.flexClass {
    display: flex; /* Standard for Firefox, Chrome, and Opera */
    display: -webkit-box;  /* iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox;  /* IE 10 */
    display: -webkit-flex; /*  Safari 6.1+. iOS 7.1+ */
    background: lightgray;
    border: 1px solid black;
}

<button id="navControl">Show Nav menu</button>
<nav id="test">Nav menu goes here</nav>

我写了#test.flexClass而不仅仅是.flexClass，因为ID选择器比类选择器更具体，所以.flexClass单独会被现有的nav#test选择器覆盖。< / p>

Answer 2

Autoprefixer会自动将供应商前缀添加到需要它的任何属性中。

如何使用Javascript处理CSS中的多个样式（由于供应商前缀）？

2 个答案: