4

having a bit of trouble. I need to have something switch from display: none to display: flex, display: flex-box, and display: -ms-flexbox but it seems to be breaking my code.. Here's what I have so far:

$(elem).css({'display': 'flex', 'display': '-webkit-flex', 'display':'-ms-flexbox'});

and while this works:

$(elem).css({'display': 'flex'})

I need to have the other two for safari and IE10. Is there any way of writing this so that it doesn't break my code? Jquery seems confused by this syntax.

shan
  • 3,035
  • 5
  • 34
  • 50
  • 2
    You should *always* be ordering prefixed old > prefixed new > non-prefixed. – cimmanon Feb 17 '14 at 02:40
  • Thanks for the response! Is there a particular reason for this? Does the browser read it faster or something? – shan Feb 17 '14 at 02:42
  • ah wait I actually know why, due to the order the computer reads css, the non-prefixed would be read first no? – shan Feb 17 '14 at 02:46
  • 2
    No. Browsers are supposed to ignore anything they don't understand, and the last declaration of the same property is supposed to take precedence. – cimmanon Feb 17 '14 at 03:16
  • FOLKS - BE AWARE: The first answer when I came along statet: "Since jQuery 1.8.0 no need to add vendor prefix." **This is NOT true in this case!!!** jQuery does add vendor prefixes to CSS property names - jepp this is true (eg: `-prefix-transform:...`). But this question is about prefixed CSS values NOT property names - and Nope - **jQuery does not take care of CSS values** like `display: -prefixed-flex` or `background:-prefixed-linear-gradient`! – Axel Sep 25 '17 at 19:09

3 Answers3

4

I just ran across the same issue. The problem is that you can't specify multiple values of display in the same object, because you can only have one object member called display.

If you're not worried about accidentally removing any other element-level styles, this is one way around:

$(elem).attr('style', 'display: -webkit-flex; display: flex');

(and of course add the extra one for IE10 if you need to).

Sorry to be so late to the party, but maybe it will help others.

eaj
  • 2,576
  • 1
  • 20
  • 42
3

I too ran into this issue and @eaj has excellent insight into why this occurs. I took a slightly different approach since I was using flexbox on other elements. I assigned a class like this:

.flex-container{
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

Then instead of trying to change it via adding inline styles, you can just add the class like so:

$(elem).addClass('flex-container');

The !important in the class will override the existing display:none forcing it into visibility. There are a couple of advantages here: it's a lot cleaner semantically, it's easier to add additional flexbox properties if you need them (my actual .flex-container class had ~20 different properties due to the prefixes for center alignment), easier to reuse the same class for other elements, and finally if you need the element to dissappear again gracefully you can just call removeClass().

jwhazel
  • 977
  • 9
  • 16
2

Since jQuery 1.8.0 no need to add vendor prefix. Cordialy Frederic

  • This is NOT true in this case!!! jQuery does vendor prefix css property names - jepp this is true (eg: `-prefix-transorm:...`). But this question is about prefixed CSS values NOT property names! – Axel Sep 19 '17 at 20:43