# 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.
# 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.
# Let's take an example ,If you want to put transition to the element then you have to write like this...
# 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.
# 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
# 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.
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.
# 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