계산 기능을 통해 -webkit-calc의 사용을 감지하는 JS 기능 감지

Question

그래서 일반적으로 JS에서 브라우저 감지와 기능 탐지를 사용해야한다는 것을 잘 알고 있습니다. 이것의 좋은 예가 jQuery 1.9의 방울 $.browser입니다.

또한 내가 읽은 모든 기사에서 브라우저 감지 기능을 절대로 사용하지 않는다고 말합니다.

는하지만 내가 동적으로 JS 레이아웃에 # 사용할 수 "slots"의를 계산해야하는 조건을 가지고, 그것은 {0}이 가능한 슬롯의 #입니다 calc(100%/{0})를 통해 진행되고있다.

물론 iPad의 경우 .css("height", "calc(100%/3)")은 접두사가 -webkit-이어야하므로 당연히 실패합니다.

그럼, 정확히 말해서이 기능이 필요하다는 것을 감지하기 위해 (예 : $.browser.webkit이 아닌) 기능 감지를 사용해야하는 사람은 누구입니까?

Answer 1

더미 요소를 작성하여 문서에 삽입하고 .cssText.height = 'calc(100px - 50px);'을 사용하여 요소의 예상 높이가 있는지 확인하십시오. 모든 공급 업체 - 접두사에 대해이를 반복하십시오.

사이드 노트 : 이런 종류의 질문에 대해서는 Modernizr 소스 코드를 살펴보아야합니다. 다른 사람들은 대개 calc.js과 같은 기능 검색 스크립트를 제공합니다. 모더 나이저이 기능이 있는지 여부를 감지

---

, 그것은 사용되어야하는 접두사 말하지 않습니다. 아래의 코드는 올바른 접두사를 가져 오는 방법을 보여줍니다 :

var calc = (function(){ 
    var dummy = document.createElement('div'); 
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc']; 
    for (var i=0; i<props.length; ++i) { 
     var prop = props[i]; 
     dummy.style.cssText = 'width:' + prop + '(1px);'; 
     if (dummy.style.length) 
      return prop; 
    } 
})(); 

// Usage example: 
$('selector').css('height', calc + '(100%/3)'); 

(IE는 접두사없이 지원 시작했기 때문에 내가의 -ms- 접두사를 추가하지 않았다 - http://caniuse.com/calc를 참조하십시오.)