CSS -webkit- , -ms- prfixes
How to know which css properties should be -webkit-, -ms- etc... prefixed, I'm confused here, is there any place where I can learn about all these properties which need prefix to work properly across all browsers.
13 Replies
There is not many these days honestly
I use PostCSS autoprefixer and never look back, you can use browserlist to tell it what to support too.
If you use VS code it shows you which properties should be prefixed with its auto fill.
But in general as i noticed it's the transforms, transitions, animations ( and keyframes too), backgrounds ( linear-gradiant, radiant, etc..) and some other stuff
What CSS prefixes should I use?
An overview of what CSS features to prefix
Have not tested but looks legit
Again though I would just use
autoprefixer less you have to worry about and writeI'm not sure if any of that actually needs prefixes anymore 🤔
Most prefixes these days are for
-webkit- stuff that still hasn't been standardized in the actual spec, but all the browsers support the -webkit- version.
Though like b1 said, I also never worry about it thanks to autoprefixertransforms, transitions, animations, gradients haven't needed prefixing for a long time. Big things that are actually left that still need prefixing are
mask, background-clip: text; here's a big ole list: https://css-tricks.com/is-vendor-prefixing-dead/#aa-prefixing-in-2021Good to know 👌
I need to use those auto prefixers really, i need to get used to such tools 😵💫
I disagree.. I've tested it on different browsers, Safari and Mozilla Firefox gives my animation glitchs without the prefixes.
Specially the transition and transform.
You might not notice these glitches unless it's on a potato device... Like mine.
About -o- not sure though i add it just in case.. lol 😬🙆♂️
Is it a really old device? because if it's running an up to date version of Safari and FF, even if the prefix is there, if it has the non-prefixed version after it, it will use the non-prefixed version, and ignore the prefixed one.
Prefixes only get used if the browser doesn't recognize the non-prefixed version
I have two, a good ol'Toshiba Satalite 300, and a Lenovo 120.. i test on both... the Lenovo is little better in performance. I test for safari on the Lenovo using the Safari-like browser called Web. (I believe you shared it once)
anyway, I thought if users have devices like mine with old browsers and my animation behaves like mine then i should make sure I add these prefixes.
I'm not saying you aren't seeing this but I'm not sure how this could be a thing... the prefixed versions of the properties don't run on different code in the browser. The big issue with devices that old would be the lack of a GPU for the animations i guess? Are you having to run older versions of the browsers on those devices?
Hmm 🤔
I think you're right the GPU might be the cause 🤔😵💫
On the Lenovo all browsers are up to date, the Satalite I'm not sure what's the chrome version is I'll check it but it's not the latest.
But if i write these prefixs just for the sake of old browsers, does it affect anything? Or the browser will just override them as Kevin said?
the prefixed versions were a way to let devs test out new properties while the browser makers worked on them (now-a-days this is done through flags). Once things were stable and consistent across browser the prefixes got removed. So we would do something like:
-moz-animation-duration: 6s; animation-duration: 6s;the first line is for mozilla's implementation and the last is for the official implementation. CSS is read from bottom to top so if the non prefix version is supported it never bothers with the prefixed version
Ok got 👌
Thanks both for explaining 😸
And i better get a new device lol