What are the Prefixes? Why use these?

# 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.

• background : linear-gradient , radial-gradient , size
• display: flex
• justify-content
• box-shadow
• border-radius
• filter
• @keyframes
• transition
• 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...

#element {
  -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.