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 make a
  • link visited with css
  • Resize the content of a div based on how many objects are in the div

    How to make video thumbnails like Facebook [CSS]

    How to remove Firefox's button outline when mouse press, not click, hover or forcus

    How to move nagivation bar to more to the right to fit a logo left of the bar

    How to layout images in a grid? [closed]

    How does Gmail prevent overlap for elements that use absolute positioning?

    How to layout html CSS in this way? [closed]

    How to use CSS transition for existing list items to make room for new ones?

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How to change CSS when it's ng-disabled?

    How to disable external css stylesheet - Newbie

    How do I keep this sidebar stationary yet still responsive?

    How to align images to the bottom with css?

    How to align horizontally nav bar in css?

    Using jqTransform on hidden contact form, select box value not showing

    How set css style to GWT TextBox text?

    How to stop text from vertically centering in a table?

    How to adjust the position of specific elements/items/content on a page with CSS

    How to hide first level span element by CSS “>” selector

    How to wrap text to fill a DIV (like in MS-Excel) [duplicate]

    CSS help - how to keep my div in place with a responsive design

    How do I use CSS to position a fixed variable height header and a scrollable content box?

    how to center columns group

    How to set auto-margin boxes in flexible-width design using CSS?

    How to implement a partially flexible screen layout with a grid framework?

    How to make a CSS div set auto height to content

    css: show all floating text (variable font size) on the baseline

    How to parse the default css property to inline style attribute

    How can I force CQ5.5 to ignore CSS data-uri-schemes?