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



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



COMMENTS

http://videohive.net/?ref=gimmegfx

http://themeforest.net/?ref=gimmegfx

http://audiojungle.net/?ref=gimmegfx

Name

blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
ltr
item
SharedTutor Tutorials For Everyone: What are the Prefixes? Why use these?
What are the Prefixes? Why use these?
http://feeds.feedburner.com/~ff/Creative-Blogging-Tips?d=yIl2AUoC8zA
SharedTutor Tutorials For Everyone
http://www.sharedtutor.com/2013/10/what-are-prefixes-why-use-these.html
http://www.sharedtutor.com/
http://www.sharedtutor.com/
http://www.sharedtutor.com/2013/10/what-are-prefixes-why-use-these.html
true
1970043136941886328
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy