Webkit , moz , o, ms and others

So today I learned that basically for certain browsers to be able to support certain features you add to your site you need to add -moz- and -webkit- to your code. These are vendor-prefixed properties used in the different rendering engines

moz = mozilla firefox based browsers

webkit = chrome, safari based browsers

ms = internet explorer based browsers

o = opera based browsers

For example setting up gradients as background images clipped on top of text you need the following


.your-class-text{
    background-color: #f3ec78;
    background-image: linear-gradient(45deg, #f3ec78, #af4261);
    background-size: 100%;
    background-clip: text;
   background-clip: text;
    text-fill-color: transparent; 
    text-fill-color: transparent;
}

This won’t be supported on all browsers out of the gate so you need a fallback and so we add the -moz- and the -webit- to it.


.gradient-text {
    background-color: #f3ec78;
    background-image: linear-gradient(45deg, #f3ec78, #af4261);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

Will update when I learn more 🤓…..

Last updated: Dec 13, 2022

LIKED THE CONTENT?

SMOOTHIE

BUY ME A SMOOTHY 😁

GO BACK

Webkit, moz, o and ms

LIKED THE CONTENT?

BUY ME A SMOOTHY 😁