Question

I want to test if a particular css property attribute is supported in the browser. For a css property, i can do it like

document.createElement("detect").style["-webkit-overflow-scrolling"] === ""

But what if i have to check for a particular class or attribute. For example, i want to test the support for

position:fixed

How can i do that(apart from using Modernizr)? Pls help.

Answer 1

function isFixedSupported() {
  var isSupported = null;
  if (document.createElement) {
      var el = document.createElement("div");
      if (el && el.style) {
          el.style.position = "fixed";
          el.style.top = "10px";
          var root = document.body;
          if (root && root.appendChild && root.removeChild) {
              root.appendChild(el);
              isSupported = el.offsetTop === 10;
              root.removeChild(el);
          }
      }
  }
  return isSupported;
}

var canUseFixed = isFixedSupported(); //true:false

FIDDLE