FAQ Database Discussion Community


Javascript code for CSS3 animation and transform property

javascript,css3,animation,transform,vendor-prefix
I know, with CSS, we have to use vendor prefixes such as -ms-, -moz-, -webkit- and -o- for transform property. And for animation property just -moz-, -webkit- and -o-. I want to know how to set each of them from Javascript? And transition property also. Looking for something like this...

One vendor prefix inside a different vendor prefix

css,css3,media-queries,vendor-prefix
I've recently came across a project with css rules like this: @media screen and (-webkit-min-device-pixel-ratio: 0) { #header .searchform input:-moz-placeholder, #header .searchform textarea:-moz-placeholder { line-height: 140%; } } In my opinion this is kinda weird, as I know vendor prefixes are used to target different browsers. What about a situation...

How do I know when is the right moment to stop using a specific css vendor-prefix?

css,vendor-prefix
I know they don't do much wrong where they are but, when should I stop using some prefixes? What are the evidences that tell you that you don't need it any more? For example, I keep seeing many people that keep adding the -o- all the time, despite the many...

Compass vendor prefixes does not include Opera prefix

sass,compass,vendor-prefix
I've installed compass recently to get benefit from its features, especially the vendor prefixes. When I do something like this : @include box-sizing(border-box); I get : -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; But what about other prefixes like Opera prefix -o-box-sizing ?...

a property without vendor prefix followed by vendor prefixed properties in CSS3

css,css3,vendor-prefix
According to one of the answer for "Why do browsers create vendor prefixes for CSS properties?", one of the reason why vendor prefix is needed is to avoid breaking page even if the final specification of a property is different from the implementation(interpretation) of a vendor. I read a book...

Is there priority for box shadow of different browsers? (CSS)

css,webkit,vendor-prefix,box-shadow
I just met a problem of box shadow. 1. Is there any priority of box-shadow? for example: box-shadow: 0px 1px 1px 0px #292929; -moz-box-shadow: 0px 1px 1px 0px #292929; -webkit-box-shadow: 0px 1px 1px 0px #292929; and -moz-box-shadow: 0px 1px 1px 0px #292929; -webkit-box-shadow: 0px 1px 1px 0px #292929; box-shadow: 0px...

The CSS transforms that I used don't work in mozilla Firefox

css,css-transforms,vendor-prefix
My animations arent working in mozilla but they are working in chrome. Please suggest some changes so that it works in a { transition: all 0.5s ease-in-out 0s; } a:hover { transform:rotate(360deg) ; -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); cursor:pointer; } ...

Should I trust Chrome's Audits tool?

css,google-chrome,web-inspector,vendor-prefix
Do you know Audits tab from chrome's inspector? I just found out this tab's use and I think it is great but I wonder if the sugestions done there are reliable. FOr example it says I shouln't use -webkit-border-radius, which seems right as it as a really old rule. Problem...

IOS Safari transition transform not working

ios,safari,css-transitions,css-transforms,vendor-prefix
Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able...