# Let’s go to a css topic “Prefixes”…
# First of all, I want to tell you that Prefixes are not properties it’s just prefixed to the property of css.
# There are four prefixes.
- -webkit- : For Google Chrome
- -moz- : For Mozilla Firefox
- -ms- : For Internet Explorer(IE)
- -o- : For Opera
# It’s needed when you are going to develop in some prefix needed property like transform, transition, background-size etc. (Means there is no error if you don’t add it(prefixes).)
# There is also a great project by Lea Verou for Prefix-free.
# If you are applying this project’s css(prefix-free) then you don’t have to worry about the prefixes.
Why these prefixes needed?
- To implement proprietary CSS properties that have no working standard and may never become standard
- To provide early implementations of standard properties
- To provide an alternate syntax than the standard
- Other reasons may apply but these are the main reasons.
It’s said by David walsh.He’s just awesome web developer.
How many properties use Prefixes?
- background : linear-gradient , radial-gradient , size
- display: flex
- column, flex, perspective properties etc.
# So, these are the properties.
# Let’s take an example ,If you want to put transition to the element then you have to write like this…
-webkit-transition: 0.5s all ease-in-out;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
transition: 0.5s all ease-in-out;
# If you want to know something about this in scss with a mixin. I’ve made a pen so you can understand from that if you know about mixin.(If don’t know then no problem…I am gonna write a post on it..)
# You can navigate to scss tab and see that I’ve made a mixin that takes only property and it’s value and give the 4 more outputs. 🙂
# Queries? Please drop in comments.