SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

What are the Prefixes? Why use these?

# Let's go to a css topic "Prefixes"...
# First of all, I want to let you know that Prefixes are not properties it is just prefixed for 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 find yourself going to develop in most prefix needed property like transform, transition, background-size etc.  (Means there isn't any error if you don't add it(prefixes).)
# There is also a great project by Lea Verou for Prefix-free.
# If you are by using project's css(prefix-free) then you definitely don't have to concern yourself with the prefixes.

Why these prefixes needed?

  • To implement proprietary CSS properties that have no working standard and may even never become standard

  • To provide early implementations of ordinary properties

  • To present an alternate syntax compared to the standard

  • Other reasons may apply but these are the significant 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 include the properties.
# Let's take a sample ,If you want to put transition towards the element you then have to publish 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 it in scss using a mixin. I've created a pen in order to understand from that when you know about mixin.(If do not know then not an issue...I am gonna write a post about it..)See the Pen %= penName %> by kaushalya (@kman) on CodePen

# You can navigate to scss tab to see that I've made a mixin that can only property and value and provide the 4 more outputs. :)
# Queries? Please drop in comments.

No comments

Post a Comment