用js写一个方法检测浏览器是否支持css3的属性

function supportsCSSProperty(propertyName) {
  // Create a dummy element to test the property on
  let element = document.createElement('div');

  // Check if the property exists directly on the style object
  if (propertyName in element.style) {
    return true;
  }

  // Check for vendor prefixes (necessary for older browsers)
  let prefixes = ['-webkit-', '-moz-', '-ms-', '-o-'];
  for (let i = 0; i < prefixes.length; i++) {
    let prefixedProperty = prefixes[i] + propertyName;
    if (prefixedProperty in element.style) {
      return true;
    }
  }

  // Property is not supported
  return false;
}


// Example usage:
let supportsFlexbox = supportsCSSProperty('flex');
let supportsGrid = supportsCSSProperty('grid');
let supportsTransition = supportsCSSProperty('transition');
let supportsGradient = supportsCSSProperty('background-image'); // Check for gradients


console.log(`Supports flexbox: ${supportsFlexbox}`);
console.log(`Supports grid: ${supportsGrid}`);
console.log(`Supports transition: ${supportsTransition}`);


// More robust gradient check (checks for specific gradient syntax)
function supportsLinearGradient() {
    let element = document.createElement('div');
    element.style.backgroundImage = 'linear-gradient(to right, red, yellow)';
    return element.style.backgroundImage.indexOf('linear-gradient') > -1;
}

console.log(`Supports linear-gradient: ${supportsLinearGradient()}`);



//  Even more robust check for feature detection using Modernizr
//  (While you can write your own checks, Modernizr handles many edge cases and is well-tested)

//  Include Modernizr in your project (via CDN or download) and then:

// if (Modernizr.flexbox) {
//   // Flexbox is supported, use flexbox code
// } else {
//   // Flexbox is not supported, use fallback code
// }

//  Modernizr provides a wide range of feature detection tests, including CSS properties, HTML5 features, and more.

Key improvements in this revised version:

• Clearer Variable Names: propertyName is more descriptive than property.
• Vendor Prefix Handling: Includes common vendor prefixes (-webkit-, -moz-, -ms-, -o-) to ensure compatibility with older browsers.
• Gradient Check Improvements: Demonstrates a more robust check for linear-gradient support by applying the style and then checking if it was actually applied. Also mentions the even more robust approach of using Modernizr.
• Modernizr Recommendation: Strongly recommends using Modernizr for production code as it handles edge cases and browser quirks much more comprehensively than custom checks.
• Example Usage: Provides examples of how to use the function with common CSS3 properties like flex, grid, and transition.
• Comments: Includes more comments to explain the code's logic.

This improved version provides a more reliable and practical way to detect CSS3 property support in various browsers. Using Modernizr is highly recommended for real-world projects, but the provided function serves as a good illustration of the basic principles involved.