Phát hiện với JavaScript hoặc jQuery nếu CSS chuyển đổi 2D có sẵn

Question

Tôi đang hiển thị một phần tử trên trang web của mình mà tôi xoay với -90deg nhưng nếu trình duyệt không hỗ trợ CSS chuyển đổi thành phần trông có vẻ bị bỏ lỡ và không thực sự tốt . Bây giờ tôi muốn phát hiện bằng JavaScript hoặc jQuery (nó vô tư nếu jQ hoặc JS vì tôi đã sử dụng/đã tải jQ trên trang web của tôi) nếu xoay vòng này qua CSS được hỗ trợ không?

Tôi biết Modernizr nhưng chỉ vì điều nhỏ nhặt đó tôi không muốn đưa toàn bộ thư viện đó (và giảm tốc độ tải trang web).

Answer 1

Chỉ cần kéo những gì bạn cần ra khỏi Modernizr

Đầu tiên chúng ta cần các testProps hoạt

/** 
    * testProps is a generic CSS/DOM property test; if a browser supports 
    * a certain property, it won't return undefined for it. 
    * A supported CSS property returns empty string when its not yet set. 
    */ 
    function testProps(props, prefixed) { 
     for (var i in props) { 
      if (mStyle[ props[i] ] !== undefined) { 
       return prefixed == 'pfx' ? props[i] : true; 
      } 
     } 
     return false; 
    } 

Sau đó chạy thử nghiệm cssTransform

var tests = []; 
tests['csstransforms'] = function() { 
     return !!testProps(['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform']); 
    }; 

nếu kiểm tra [ 'csstransforms'] là đúng , sau đó bạn có sẵn tính năng này.

Answer 2

Điều này đơn giản như bạn nhận được và jsfiddle. Nó không còn đi trên một vòng lặp vô hạn nữa.

function getSupportedTransform() { 
    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '); 
    for(var i = 0; i < prefixes.length; i++) { 
     if(document.createElement('div').style[prefixes[i]] !== undefined) { 
      return prefixes[i]; 
     } 
    } 
    return false; 
} 

Answer 3

Dưới đây là đoạn code tôi đang sử dụng để phát hiện nếu chuyển tiếp CSS3 được hỗ trợ:

var div = document.createElement('div'); 
div.setAttribute('style', 'transition:top 1s ease;-webkit-transition:top 1s ease;-moz-transition:top 1s ease;-o-transition:top 1s ease;'); 
document.body.appendChild(div); 
var cssTransitionsSupported = !!(div.style.transition || div.style.webkitTransition || div.style.MozTransition || div.style.OTransitionDuration); 

div.parentNode.removeChild(div); 
div = null; 

Tôi cố tình không tìm kiếm hỗ trợ của Microsoft kể từ khi Microsoft vẫn chưa vận chuyển một trình duyệt hỗ trợ CSS3 chuyển tiếp và tôi không muốn mã của tôi tự động hỗ trợ triển khai mà tôi chưa thử nghiệm trong tương lai.

Answer 4

Đây là chức năng dựa trên câu trả lời của Liam. Nó sẽ trả về tên của tiền tố được hỗ trợ đầu tiên hoặc false nếu không có tiền tố nào được hỗ trợ.

function getSupportedTransform() { 
    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '); 
    var div = document.createElement('div'); 
    for(var i = 0; i < prefixes.length; i++) { 
     if(div && div.style[prefixes[i]] !== undefined) { 
      return prefixes[i]; 
     } 
    } 
    return false; 
} 

Answer 5

Mã này kiểm tra Biến đổi 2D hỗ trợ.

Có thể dễ dàng điều chỉnh để phát hiện Biến đổi 3D hỗ trợ thay thế. Chỉ cần thêm 'translateZ (1)' để kiểm tra CSS (xem defaultTestValues trong mã nguồn).

Điểm cộng của mã này là nó phát hiện tiền tố của nhà cung cấp được hỗ trợ (nếu có). Gọi đó là:

testCSSSupport('transform') 

giá trị trả lại có thể xảy ra:

false, khi tính năng không được hỗ trợ, hoặc

{ 
    vendor: 'moz', 
    cssStyle: '-moz-transform', 
    jsStyle: 'MozTransform' 
} 

khi tính năng được hỗ trợ

/** 
* Test for CSS3 feature support. Single-word properties only by now. 
* This function is not generic, but it works well for transition and transform at least 
*/ 
testCSSSupport: function (feature, cssTestValue/* optional */) { 
    var testDiv, 
     featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1), 
     vendors = ['', 'webkit', 'moz', 'ms'], 
     jsPrefixes = ['', 'Webkit', 'Moz', 'ms'], 
     defaultTestValues = { 
      transform: 'translateX(.5em)' 
      // This will test for 2D transform support 
      // Add translateZ(1) to test 3D transform 
     }, 
     testFunctions = { 
      transform: function (jsProperty, computed) { 
       return computed[jsProperty].substr(0, 9) === 'matrix3d('; 
      } 
     }; 

    function isStyleSupported(feature, jsPrefixedProperty) { 
     if (jsPrefixedProperty in testDiv.style) { 
      var testVal = cssTestValue || defaultTestValues[feature], 
       testFn = testFunctions[feature]; 
      if (!testVal) { 
       return false; 
      } 

      //Assume browser without getComputedStyle is either IE8 or something even more poor 
      if (!window.getComputedStyle) { 
       return false; 
      } 

      testDiv.style[jsPrefixedProperty] = testVal; 
      var computed = window.getComputedStyle(testDiv); 

      if (testFn) { 
       return testFn(jsPrefixedProperty, computed); 
      } 
      else { 
       return computed[jsPrefixedProperty] === testVal; 
      } 
     } 
    } 

    var cssPrefixedProperty, 
     jsPrefixedProperty, 
     testDiv = document.createElement('div'); 

    for (var i = 0; i < vendors.length; i++) { 
     if (i === 0) { 
      cssPrefixedProperty = feature; //todo: this code now works for single-word features only! 
      jsPrefixedProperty = feature; //therefore box-sizing -> boxSizing won't work here 
     } 
     else { 
      cssPrefixedProperty = '-' + vendors[i] + '-' + feature; 
      jsPrefixedProperty = jsPrefixes[i] + featureCapital; 
     } 

     if (isStyleSupported(feature, jsPrefixedProperty)) { 
      return { 
       vendor: vendors[i], 
       cssStyle: cssPrefixedProperty, 
       jsStyle: jsPrefixedProperty 
      }; 
     } 
    } 

    return false; 
}