NOCODE HAVEN
navigation
🧠

Webkit, moz, o and ms

notion image
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?

Untitled (13).png
SMOOTHIE

BUY ME A SMOOTHY 😁

 
 
 
 
GO BACK
 
badge