Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

第 9 期(2019-05-16):CSS兼容性验证 #11

Open
wingmeng opened this issue May 16, 2019 · 2 comments
Open

第 9 期(2019-05-16):CSS兼容性验证 #11

wingmeng opened this issue May 16, 2019 · 2 comments

Comments

@wingmeng
Copy link
Collaborator

wingmeng commented May 16, 2019

类型:常用技巧
难度:★★☆

封装一个特性检测函数,用以验证当前浏览器是否支持某个 CSS 属性

注:需要兼容 IE8+(含)以及其他主流浏览器

/**
 * @param {string} [prop] - 需要验证的 CSS 属性名。
 * @return:
      1. 当 `prop` 为字符串时,返回当前浏览器是否支持该 CSS 属性的布尔值
      2. 当 `prop` 为空时,返回一个由当前浏览器支持的所有 CSS 属性名组成的数组
 */
function supported(prop) {
  // 你的代码
}

测试用例: (以下结果来自 Chrome 74)

supported('animation');  // true
supported('background-clip');  // true
supported('mix-blend-mode');  // true
supported('-webkit-user-drag');  // true
supported('-moz-force-broken-image-icon');  // false
supported('-ms-block-progression');  // false
supported('abcd');  // false
supported();  // ["align-content", "align-items", "align-self" ... ]

参考答案:

function supported(prop) {
  var result = [];
  var format = function(p) {
    // 浏览器前缀处理
    var prefix = /^([webkit|moz|ms|o]+)[A-Z]+.*/.test(p) ? '-' : '';
    return prefix + p.replace(/[A-Z]/g, '-$&').toLowerCase();
  };

  if (Object.hasOwnProperty('keys') && Object.keys(document.body.style).length) {
    result = Object.keys(document.body.style).map(format);        
  } else {
    for (var key in document.body.style) {
      result.push(format(key));
    }
  }

  // 兼容 IE8
  if (!('indexOf' in Array.prototype)) {
    result = String(result);
  }

  if (typeof prop === 'undefined') {
    return typeof result === 'string' ? result.split(',') : result;
  }

  return result.indexOf(prop) === -1 ? false : true;
}

本期优秀回答者: 无 [哭笑.jpg]

@liwenkang
Copy link

liwenkang commented May 17, 2019

答案参考: CSS 模块的侦测

function isPropertySupported(property) {
    if (typeof property === 'string') {
        if (property in document.body.style) return true;
        const prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
        const prefProperty = property.charAt(0).toUpperCase() + property.substr(1);

        for (let i = 0; i < prefixes.length; i++) {
            if ((prefixes[i] + prefProperty) in document.body.style) return true;
        }

        return false;
    } else if (property === undefined) {
	let result = [];
	for (let i in document.body.style) {
		result.push(i);
	}
	return result;
    }
}

@wingmeng
Copy link
Collaborator Author

答案参考: CSS 模块的侦测

function isPropertySupported(property) {
    if (typeof property === 'string') {
        if (property in document.body.style) return true;
        const prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
        const prefProperty = property.charAt(0).toUpperCase() + property.substr(1);

        for (let i = 0; i < prefixes.length; i++) {
            if ((prefixes[i] + prefProperty) in document.body.style) return true;
        }

        return false;
    } else if (property === undefined) {
	let result = [];
	for (let i in document.body.style) {
		result.push(i);
	}
	return result;
    }
}

返回的CSS属性名还是驼峰体,不对哦~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants