Rectangle 27 0

How to use Modernizr to detect CSS3 capabilities and provide fallbac...

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <!-- Load modernizr for .load method support -->
  <script src="modernizr-latest.js" type="text/javascript"></script>
  <!-- Load jquery for easy DOM manipulation -->
  <script src="jquery-latest.min.js" type="text/javascript"></script>

  <style type="text/css">
    /* box-shadow only works on newer browsers*/
    .box-shadow {
      box-shadow: 10px 10px 5px #888;
      width: 100px;
      background-color: #6d6dad;
    }
  </style>

  <script type="text/javascript">
    $(document).ready(function(){
       // use Modernizr to load PIE the Progress Internet Explorer polyfill to support CSS3 features
       // note that we only need to load PIE on browsers that don't support boxshadow
       // for that we will use the Modernizr.boxshadow test (which is true if and only if the browser supports css3 box-shadow)
       Modernizr.load({
          test: Modernizr.boxshadow,
          // if the test fails load PIE
          nope: "pie.js",
          complete: function(){
              // Check if the polyfill loaded properly
              if(window.PIE){
                // for all the objects with class .box-shadow, ensure PIE is attached to properly render the shadows
                $('.box-shadow').each(function(){
                    var $this = $(this);
                    PIE.attach(this);
                });
              }
          }
       });
    });
  </script>
</head>

<body>
<!-- Placeholder for the shadow -->
<div class="box-shadow">
  &nbsp;
</div>
</body> 
</html>
jQuery html5 JavaScript modernizr
Rectangle 27 0

How to use Modernizr to detect CSS3 capabilities and provide fallbac...

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <!-- Load modernizr for .load method support -->
  <script src="modernizr-latest.js" type="text/javascript"></script>
  <!-- Load jquery for easy DOM manipulation -->
  <script src="jquery-latest.min.js" type="text/javascript"></script>

  <style type="text/css">
    /* box-shadow only works on newer browsers*/
    .box-shadow {
      box-shadow: 10px 10px 5px #888;
      width: 100px;
      background-color: #6d6dad;
    }
  </style>

  <script type="text/javascript">
    $(document).ready(function(){
       // use Modernizr to load PIE the Progress Internet Explorer polyfill to support CSS3 features
       // note that we only need to load PIE on browsers that don't support boxshadow
       // for that we will use the Modernizr.boxshadow test (which is true if and only if the browser supports css3 box-shadow)
       Modernizr.load({
          test: Modernizr.boxshadow,
          // if the test fails load PIE
          nope: "pie.js",
          complete: function(){
              // Check if the polyfill loaded properly
              if(window.PIE){
                // for all the objects with class .box-shadow, ensure PIE is attached to properly render the shadows
                $('.box-shadow').each(function(){
                    var $this = $(this);
                    PIE.attach(this);
                });
              }
          }
       });
    });
  </script>
</head>

<body>
<!-- Placeholder for the shadow -->
<div class="box-shadow">
  &nbsp;
</div>
</body> 
</html>
jQuery html5 JavaScript modernizr