compatibility.js

/*
 兼容性相关
 Thanks：Coco
*/

/**
 * [cssTest description] 用于简单的 CSS 特性检测，来自：https://github.com/chokcoco/iCSS/issues/9
 * @param property {String}  需要检测的 CSS 属性名
 * @param value {String}  样式的具体属性值
 * @return {Boolean}  返回检查结果
 */
function cssTest(property, value) {
  // 用于测试的元素，隐藏在页面上
  var ele = document.getElementById("test-display-none");

  // 只有一个参数的情况
  if (arguments.length === 1) {
    if (property in ele.style) {
      return true;
    }
    // 两个参数的情况
  } else if (arguments.length === 2) {
    ele.style[property] = value;

    if (ele.style[property]) {
      return true;
    }
  }
  return false;
}

/**
 * [pseudoHack description] IE6,7兼容伪类设置
 * @param dom {Object}   dom元素
 * @return {Null}  无返回
 */
function pseudoHack(dom) {
  if (document.querySelector || (!dom && dom.nodeType !== 1)) return;

  var content = dom.getAttribute("data-content") || "";
  var before = document.createElement("before"),
    after = document.createElement("after");

  // 内部content
  before.innerHTML = content;
  after.innerHTML = content;
  // 前后分别插入节点
  dom.insertBefore(before, dom.firstChild);
  dom.appendChild(after);
}

/**
 * [webpAnimataionSupportDetect description] 检测对webp的支持，来自：https://developers.google.com/speed/webp/faq
 * 原理:
 * 预先生成好webp格式的图片, 保存经过base64编码后的结果
 * 生成相应的img标签, 将src设置为相应的base64地址
 * 如果img标签能够成功加载(加载后的图片有宽和高), 则说明支持相应的webp格式
 * 参数中的feature需要设置为'animation'
 * @param feature {String} [lossy|lossless|alpha|animation]
 * @param {Function} callback
 * @return {Object}  返回callback结果
 */
function webpAnimataionSupportDetect(feature, callback) {
  var kTestImages = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha:
      "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation:
      "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
  };
  var img = new Image();
  img.onload = function() {
    var result = img.width > 0 && img.height > 0;
    callback(result);
  };
  img.onerror = function() {
    callback(false);
  };
  img.src = "data:image/webp;base64," + kTestImages[feature];
}

/**
 * [localStorageTest description] localStorage支持度检测
 * @return {Boolean}  返回检测结果
 */
function localStorageTest() {
  var mod = "test";
  try {
    localStorage.setItem(mod, mod);
    localStorage.removeItem(mod);
    return true;
  } catch (e) {
    return false;
  }
}

/**
 * [sessionStorageTest description] sessionStorage支持度检测
 * @return {Boolean}  返回检测结果
 */
function sessionStorageTest() {
  var mod = "test";
  try {
    sessionStorage.setItem(mod, mod);
    sessionStorage.removeItem(mod);
    return true;
  } catch (e) {
    return false;
  }
}

/**
 * [SVGTest description] SVG支持度检测
 * @return {Boolean}  返回检测结果
 */
function SVGTest() {
  var SVG_NS = "http://www.w3.org/2000/svg";
  return (
    !!document.createElementNS &&
    !!document.createElementNS(SVG_NS, "svg").createSVGRect
  );
}

/**
 * [CanvasTest description] Canvas支持度检测
 * @return {Boolean}  返回检测结果
 */
function CanvasTest() {
  if (!document.createElement("canvas").getContext) {
    return false;
  } else {
    return true;
  }
}