Detects Support for HTML5 and CSS3 (cont’d)

Previously I blog about the same topic “Detects Support for HTML5 and CSS3” but I did not cover much on the CSS3. As a follow up now we look into it. Similar to HTML5, we can use Modernizr to detect CSS3 support. It is like having an if-statement in the css and the syntax is easy to use. There are 2 things you can do with Modernizr in this scenario: 

  1. Automatically load the style supported by the browser. This can be achieve by defining 2 set of classes (see example below); and
  2. Perform additional action when the CSS class is not supported. This can be achive by checking the JavaScript property (see example below).

The snippet below show how to define the CSS classes.

  .borderradius div.somediv {
   /* properties for browsers that
      support border radius */
  }
  .no-borderradius div.somediv {
   /* optional fallback properties
     for browsers that don't */  
  }

Detect CSS3 Classes & JS Property for Border Radius
As you can see the syntax is simple, as add “no” to handle the non-supported style. Find out more about the features that can be detected using Modernizr in the documentation (http://www.modernizr.com/docs/). The figure below shows Modernizr in action and the full example is available below. 

Detects CSS3 - Modernizr in Action
<!DOCTYPE html>
<html>
  <head>
  <title>Detect CSS3</title>

 <style type="text/css">
  body {
      margin: 0;
      font-family: Helvetica;
      background-color: #ddd;
  }
  div.somediv {
   margin: 50px;
  }
  
  .borderradius div.somediv {
     background: #fff;
     border-radius: 30px 30px 0 0;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 30px;
     -webkit-border-top-left-radius: 30px;
     -webkit-border-top-right-radius: 30px;
     width: 300px;
     padding: 30px;
  }
  .no-borderradius div.somediv {
     background: #000;
     color: #fff;
     border: 1px solid #fff;
     width: 300px;
     padding: 30px;
  }
 </style>

</head>
<body>

<div id="outer">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae consequat tellus. Nulla non velit leo, a pellentesque arcu. Donec aliquet urna in nibh consectetur aliquet non id purus. Curabitur vitae lacus ut nisl elementum sollicitudin. Etiam lorem nunc, iaculis in vehicula vel, convallis in nisi. Quisque diam risus, pharetra sed hendrerit ac, scelerisque non quam. Sed ac ligula nulla, vel lobortis purus. Suspendisse potenti. Integer sit amet diam quam, vitae posuere ligula. Vestibulum lorem nibh, vehicula ac venenatis eu, ornare pharetra tortor. Aliquam sed massa sem, non viverra enim. Integer augue odio, laoreet at posuere sit amet, convallis nec nisl. Donec vel purus arcu, ac venenatis mi.
</div>

</body>
</html>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js%22%3E%3C/script">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script</a>>
<script language=JavaScript src="js/modernizr-1.5.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function () {
  if (!Modernizr.borderradius)  {
   alert('Border Radius is not supported in this browser.\n Do something about it ');
  }
 });// end document ready

</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s