JavaScript는 CSS3에 대한 브라우저 지원을 빠르게 감지합니다.

프로젝트에서 브라우저가 "변환"을 지원하는지 감지하는 등 특정 CSS3 기능을 지원하는지 빠르게 감지해야 합니다. 그러면 내 레이아웃이 완전히 다른 두 가지 레이아웃을 가지게 됩니다.

물론, 이 글에서 소개한 빠른 방법 외에도 더 유명하고 일반적인 방법이 있는데, 바로 modernizr입니다. 스크립트를 실행한 후 브라우저 지원이 추가됩니다. html 클래스의 모든 속성 목록입니다.

장점:

js는 구성이 가능하며, 구성 스크립트에서 불필요한 기능 감지를 제거할 수 있습니다. 기능 감지 기반의 js 라이브러리는 간단하고 사용하기 쉽습니다.

그 외에도 브라우저의 UA를 판별하는 좋지 않은 방법이 하나 있는데, 그 이유는 UA가 위조되었을 가능성이 있고, 버전 판별이 번거롭고 불안정하기 때문입니다.

장점: 성능이 최적일 수 있음

마지막은 이 글에서 소개한 방법입니다. 브라우저가 특정 CSS 기능을 지원하는지 빠르게 감지하는 함수를 작성했습니다. 브라우저가 특정 CSS 기능을 지원하는지 빠르게 알아야 하는 시나리오에 적합합니다. 여러 개보다는).

장점:

좋은 성능, 강력한 다용성, 단일 CSS 속성 감지에 적합

코드 복사 코드는 다음과 같습니다.

var support = (function() {
var div = document.createElement('div'),
vendors = 'Khtml O Moz Webkit '.split(' '),
len = Vendors.length;
return function(prop) {
if ( prop in div.style ) return
if ('-ms-' prop in div.style ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
}); (len--) {
if ( div.style의 Vendors[len] 소품 ) {
return
}
}
return false
}; })();
if ( presents('textShadow') ) {
document.documentElement.className = ' textShadow'
}


이것이 최종 코드입니다. 원칙은 다음과 같습니다.

1. div를 생성한 다음 지원하는 속성의 배열 목록인 div.style을 가져옵니다.

2. 배열에 텍스트가 포함되어 있는지 확인하고, 포함되어 있으면 true를 직접 반환합니다.

3. Webkit과 텍스트, 즉 webkitTransition 등 다양한 접두사를 확인합니다. 스타일에 포함된 경우 true를 반환합니다.

4. CSS의 속성 이름은 -webkit-transition이지만 DOM 스타일에서는 webkitTransition에 해당합니다. 왜 이런 일이 일어나는지 모르겠습니다.

참조:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-Detect-css-support-in-browsers-with-javascript/