Setting Vendor-Prefixed CSS Using JavaScript

Setting vendor-prefixed CSS using javascript

I don't know of any library that does this, but if they are all just prefixes--that is, there is no difference in name or syntax--writing a function yourself would be trivial.

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

Then you can just use this in most cases.

How to set vendor prefixed CSS values (NOT property names) | client-side

maybe Modernizr can fix this, like

// returns: -webkit-linear-gradient(left, red, red)
Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')

How it works:

// prefixedCSSValue is a way test for prefixed css properties (e.g. display: -webkit-flex)
// @credits modernizr v3.6.0 | Build https://modernizr.com/download?-prefixedcssvalue-dontmin
Modernizr.prototype.prefixedCSSValue = function(prop, value) {
    var result = false;
    var elem = createElement('div'); // basically: document.createElement.apply(document, ['div'])
    var style = elem.style;

    if (prop in style) {
        var i = domPrefixes.length; // domPrefixes === [ "moz", "o", "ms", "webkit" ] or []

        style[prop] = value;
        result = style[prop];

        while (i-- && !result) {
            style[prop] = '-' + domPrefixes[i] + '-' + value;
            result = style[prop];
        }
    }

    if (result === '') {
        result = false;
    }

    return result;
};

Does .css() automatically add vendor prefixes?

As @zeroflagL wrote it appears that since jQuery 1.8.0 .css() does add browser specific prefixes (see this).

In earlier versions this is not done automatically by jQuery's .css(). You will have to do it by yourself or you can use jQuery's .cssHooks() to add vendor prefixes.

Code example from here:

(function($) {
  if ( !$.cssHooks ) {
    throw("jQuery 1.4.3+ is needed for this plugin to work");
    return;
  }

  function styleSupport( prop ) {
    var vendorProp, supportedProp,
        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        prefixes = [ "Moz", "Webkit", "O", "ms" ],
        div = document.createElement( "div" );

    if ( prop in div.style ) {
      supportedProp = prop;
    } else {
      for ( var i = 0; i < prefixes.length; i++ ) {
        vendorProp = prefixes[i] + capProp;
        if ( vendorProp in div.style ) {
          supportedProp = vendorProp;
          break;
        }
      }
    }

    div = null;
    $.support[ prop ] = supportedProp
    return supportedProp;
  }

  // check for style support of your property 
  // TODO by user: swap out myCssPropName for css property
  var myCssPropName = styleSupport("myCssPropName");

  // set cssHooks only for browsers that
  // support a vendor-prefixed border radius
  if (myCssPropName && myCssPropName !== 'myCssPropName') {
    $.cssHooks["myCssPropName"] = {
      get: function(elem, computed, extra) {
        // handle getting the CSS property
        return $.css(elem, myCssPropName);
      },
      set: function(elem, value) {
        // handle setting the CSS value
        elem.style[myCssPropName] = value;
      }
    };
  }
})(jQuery);

How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

You can create a CSS class selector with the standard property and prefixed properties and simply use JavaScript to add the class to whatever element you need on a button click. For example:

var navButton = document.getElementById("navControl");navButton.addEventListener("click", showNav, false);
function showNav() {    var nav = document.getElementById("test");    nav.className = "flexClass";}

nav#test {    display: none;    flex-flow: column nowrap;}
#test.flexClass {    display: flex; /* Standard for Firefox, Chrome, and Opera */    display: -webkit-box;  /* iOS 6-, Safari 3.1-6 */    display: -ms-flexbox;  /* IE 10 */    display: -webkit-flex; /*  Safari 6.1+. iOS 7.1+ */    background: lightgray;    border: 1px solid black;}

<button id="navControl">Show Nav menu</button><nav id="test">Nav menu goes here</nav>

Vendor prefixing with inline styles

No browser has required a prefix for transform for many years. Once unprefixed transform has shipped, a browser simply implements its prefixed property as an alias of the unprefixed property, which means that the prefixed and unprefixed declarations will override one another in the cascade depending on the order of declarations. Furthermore, since they are aliases, they'll still show up as unprefixed even if you remove the explicit unprefixed declaration.

This is just browsers' way of telling you not to worry about the prefixes in the newer versions that don't need them. They are intended for older versions that don't yet support the unprefixed properties. For example, the only version of Internet Explorer that requires -ms-transform is 9. Internet Explorer 10, which doesn't need the prefix (for transforms and many other features), came out in 2012. Note also that some browsers, like Firefox, are known to drop support for really old prefixed properties altogether after keeping them aliased for a while — again, not something you have to worry about since you always make sure to include unprefixed declarations (which not everyone does).

How to add vendor prefixed gradients to an element with vanilla JavaScript?

Assuming you don't want to go through a library the easy way would be to detect the browser and then do:

el.style.background = browserPrefix + gradient;

In general, the prefix-free library also normalizes a bunch of other stuff for gradients so I warmly recommend it.

Updating CSS via plain JavaScript... how do I update if the property uses vendor prefixes?

1) You can add a class for that purpose which assigns all the properties.

2) If you try it your way then, Javascript will reassign the property 3 times and end up with the last one executed as the active one, So

    document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
    document.getElementById('theDiv').style.cursor = '-moz-grabbing';
    document.getElementById('theDiv').style.cursor = 'grabbing';

will not work.

3) Adding a class would do it. for example:

    css:-
    .myClass {
      cursor: -moz-grabbing; 
      cursor: -webkit-grabbing; 
      cursor: grabbing; 
     }

and

   js:-

   document.getElementById('theDiv').className += 'myClass';

CSS vendor prefixes for HTML Form

If I get your problem right , then your div container is not exactly in the top-left corner. Its because the browser has its default css definitions, like 10px margin on the body element. You can easily solve the problem:

body {
    margin: 0;
}

Or you better start using CSS reset, normalize.css for example.

I hope it helps, and I dont went wrong way.

Setting Vendor-Prefixed CSS Using JavaScript