How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?


Tags: javascript,css,flexbox,vendor-prefix

Problem :

I want the user to click a button to reveal a hidden flexbox menu. So of course I know how to handle the normal stuff:

nav#test {
    display: none;
    flex-flow: column nowrap;
}
document.querySelector('#test').style.display = 'flex';

But what about the stupid vendor-prefix alternate rules? That's never come up for me before and I don't know how to handle them.

EDIT : Why not Autoprefixer?

In a word: wrap. In the above example, I used flex-flow: column nowrap;. But let's say the rule had been flex-flow: row wrap;. Autoprefixer would only give you a fix for very recent browsers, because there isn't one (no wrap support) on older (but not even that old) Firefox and Safari [which includes Chrome for iOS].

So, if you used Autoprefixer, your flex-flow: row wrap element would simply break on such browsers. Depending on settings your flex children might run right off the side of the screen.

Maybe you'd rather offer an alternate layout in these cases by specifying -webkit-box-orient: vertical and perhaps even -moz-box-orient: vertical (the equivalents to the modern flex-direction: column).



Solution :

You can create a CSS class selector with the standard property and prefixed properties and simply use JavaScript to add the class to whatever element you need on a button click. For example:

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>

I wrote #test.flexClass instead of just .flexClass because ID selectors are more specific than class selectors, so .flexClass alone would have been overridden by your existing nav#test selector.


    CSS Howto..

    How to use “all” property in CSS

    How to force text to wrap inside inline-block div?

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How do I make a row of 5 responsive using percentage widths?

    How to add JS and CSS to all content parts in an Orchard module

    How to display an HTML list non-nested?

    How to make css jQuery thumbnail slides loop

    How can you do this in CSS

    How to hover over a div to change just a part of its background?

    How to Unmerge CSS and JS in magento using MySQL Command

    how to do external scripting?

    How to get CSS left property value on second element of anchor

    How to get html elements from different class xpath?

    c# cassette - how to create different css bundles for different pages

    How to use Border Radius CSS on Internet Explorer

    How to make a fixed navigation bar stretch to the width of the browser?

    how to change a css of an input if the value of it is not empty in angularJS

    How Do I Wrap Text So My Accordions Image Does Go OutSide My aAccordion

    How to copy the CSS to another tab in Chrome?

    How to use CSS to horizontally fill the width of page with HTML menu headers?

    How to spread elements evenly (horizonatly)?

    How to Overcome Bootstrap's Default Styling? Element targeting issues?

    How to apply a property only to the submit button

    How to create transparent text on non-transparent background

    CSS question how to make one div appear over another?

    How to use CSS selectors [closed]

    How to change or remove quote symbol in css

    how to give animation effect on hover using css or jquery on border of division

    multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?

    How does height of a div relate to font size