- This topic is empty.
November 11, 2015 at 4:46 am #234812grimskiParticipant
My question is simply what prefixes to use for flexbox. I’ve had a good look around but I can’t find anything conclusive. Most articles seem to cover,
-webkitand that’s about it. In principle, as with most other css declarations, it should just be a case of duplications and adding
-o-in front of each line but it doesn’t seem that straight forward?
For example to set
display: flex, to be backwards compatible you need this…
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
So each property is different,
flex. This seems to extend to some other properties, order for example where you have
-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1;
align-items, where you have to use
-webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
What rules to people follow when it comes to this, do people drop some of the prefixes as support is so minimal? Normally you can just add the browser prefixes in front of the same duplicated line to be safe but it doesn’t look like this is possible with Flex due to all the different variations?
I can’t find a website with a thorough list of all the prefixes …do people, generally, not bother?!
Hope people can shed some light on this, cheers!November 11, 2015 at 10:19 am #234822Paulie_DMember
In general it’s simpler to use a prefixing system like Prefix-Free or Autoprefixr and let them do the hard work.November 11, 2015 at 5:20 pm #234842TheDocMemberNovember 16, 2015 at 2:40 am #234923grimskiParticipant
Thanks guys! I have a load of mixins set up in a .less file but I’ve never used a prefixing system. I can see how that’d be really useful. I’ll check out the ones you’ve both mentioned!
- The forum ‘CSS’ is closed to new topics and replies.