vendor-prefix

If I were writing a JavaScript line to set a style attribute of an element it could look like this (this example: "width"): document.getElementById('myDiv').style.width="50px"; and if there is a dash in the CSS element it would look like this (this example: "margin-top"): document.getElementById('myDiv').style.marginTop="15px"; But how do I access the prefix -webkit- , if I want to give it a style like this example: {-webkit-transition: width 1s;} You have two options: style["-webkit-transition"] style.WebkitTransition The first directly works. The second notation is called camel case, and foo

I'm working on an online eBay profit forecasting calculator here I can't seem to get the input fields to work in safari and mobile safari. They work fine in FF & Chrome. I click into them, but nothing shows when I type. I've been searching google but can't seem to find any clues. I'm wondering if I'm missing something in the css. Here's my css for the input fields: input { width: 155px; padding-left: 5px; height: 24px; cursor: text; font-size: 18px; font-weight: bold; border: none; border-radius: 3px; box-shadow: inset 1px 1px 2px black; -moz-box-shadow: inset 1px 1px 2px black; -webkit-box

What would be the right way to prefix this CSS in order to cover the widest range of browsers and versions? Version 1: -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out; transition: transform .3s ease-in-out; -webkit-transform: rotateX(-30deg); -moz-transform: rotateX(-30deg); -ms-transform: rotateX(-30deg); -o-transform: rotateX(-30deg); transform: rotateX(-30deg); Or version 2: -webkit-transition: transform .3s ease-in-out; -moz-transition:

In order to achieve cross-browser compatibility, we tend to use both vendor specific extensions and standard CSS3 syntax. I know CSS3 is still in draft, but we have already started using it. But the question is, does the order of where they occur matter very much? For example, lets see here -moz-border-radius: 10px; border-radius: 10px; This applies browser specific border-radius and then falls back to standard method, the later will hopeful be ignored, but still. Similarly, switching their order border-radius: 10px; -moz-border-radius: 10px; Now, this tries standard syntax first and then

I was testing some CSS3 stuff and I discovered that some properties like border-radius don't need the vendor prefix anymore (at least on recent up to date browsers). My next website will only target recent browsers like IE9/Chrome 15+/FF8+, so I was wondering: Is there a list of the current CSS3 properties where I can see which of them I can safely drop vendor prefixes for? Note: I'm not interested in JS hacks that automatically insert prefixed properties. When can I use... contains browser support tables with convenient indicators of which versions of which browsers require the vendor

Given that I'm not really bothered about backwards compatibility (I'm exploring CSS3 and HTML5 based design, rather than relying on on graphics and such) what are the benefits of using css like: -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; Over just using: box-shadow: 3px 3px 5px 6px #ccc; The latter appears to work fine in most modern browsers (except the obvious! :p looking at you IE! Although I'll assume it probably works in IE9, but I can't test as I'm on a Mac at the moment). Am I seeing things? Do we need to use the browser specific code above? Or are