HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>styleSupport feature test</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    button { padding: 8px 14px; cursor: pointer; }
    #out { margin-top: 12px; line-height: 1.6; }
    code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <button type="button" id="test">Run styleSupport('borderRadius')</button>
  <div id="out">Click to feature-test border-radius support.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    (function($) {
      function styleSupport(prop) {
        var vendorProp, supportedProp,
          capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
          prefixes = ["Moz", "Webkit", "ms"],
          div = document.createElement("div");
        if (prop in div.style) {
          supportedProp = prop;
        } else {
          for (var i = 0; i < prefixes.length; i++) {
            vendorProp = prefixes[i] + capProp;
            if (vendorProp in div.style) {
              supportedProp = vendorProp;
              break;
            }
          }
        }
        div = null;
        $.support[prop] = supportedProp;
        return supportedProp;
      }
      $("#test").on("click", function() {
        var result = styleSupport("borderRadius");
        $("#out").html(
          "Supported property name: <code>" + (result || "none") + "</code><br>" +
          "Stored on $.support.borderRadius for reuse in your cssHook."
        );
      });
    })(jQuery);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.cssHooks — styleSupport feature test (Try It)