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.

How many properties use Prefixes?
  • 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..)

See the Pen %= penName %> by kaushalya (@kman) on CodePen

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

Share This Now:

Add a Comment

Your email address will not be published. Required fields are marked *