Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
div {
display: flex
}
Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.
div {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
Go to Project Settings
-> Other Settings
-> Autoprefixer
to change list of browsers that you want to support.
You can specify the versions by queries (case insensitive):
last 2 versions
: the last 2 versions for each major browser.last 2 Chrome versions
: the last 2 versions of Chrome browser.> 5%
: versions selected by global usage statistics.> 5% in US
: uses USA usage statistics. It accepts two-letter country code.ie 6-8
: selects an inclusive range of versions.Firefox > 20
: versions of Firefox newer than 20.Firefox >= 20
: versions of Firefox newer than or equal to 20.Firefox < 20
: versions of Firefox less than 20.Firefox <= 20
: versions of Firefox less than or equal to 20.Firefox ESR
: the latest [Firefox ESR] version.iOS 7
: the iOS browser version 7 directly.not ie <= 8
: exclude browsers selected before by previous queries.
You can add not
to any query.All queries are based on the Can I Use support table, e.g. last 3 iOS versions
might select 8.4, 9.2, 9.3
(mixed major & minor), whereas last 3 Chrome versions
might select 50, 49, 48
(major only).
Chrome
for Google Chrome.Firefox
or ff
for Mozilla Firefox.Explorer
or ie
for Internet Explorer.Edge
for Microsoft Edge.iOS
or ios_saf
for iOS Safari.Opera
for Opera.Safari
for desktop Safari.ExplorerMobile
or ie_mob
for Internet Explorer Mobile.Android
for Android WebView.BlackBerry
or bb
for Blackberry browser.ChromeAndroid
or and_chr
for Chrome for Android
(in Other section, because mostly same as common Chrome
).FirefoxAndroid
or and_ff
for Firefox for Android.OperaMobile
or op_mob
for Opera Mobile.OperaMini
or op_mini
for Opera Mini.Samsung
for Samsung Internet.UCAndroid
or and_uc
for UC Browser for Android.