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.

No comments:

Post a Comment