Thursday, January 10, 2013

Oracle Apex with Modernizr in a nutshell

You might hit on the library Modernizr while using the new responsive theme 25. Oracle Apex has implemented this library for the first time within this theme.

What is Modernizr?
Modernizr is a feature-detection library. It can currently detect over 40 HTML5- and CSS3-features, so you can adapt your application whether the feature is supported by the users browser or not.

Why should i use Modernizr?
The traditional way of checking the browsers capabilities is the integration of User Agents like this one:
   <!--[if IE 7 ]>    <html class="ie7 no-css3 no-js" lang="en"> <![endif]-->
This is an outdated practice, due to the wide variety of browser versions. Nowadays a developer could hardly knows which browser supports an specific feature. Or do you know the capabilities of Kindle Fire's Silk web browser?:-) Instead of asking the question, is this Internet Explorer 7 or Firefox 18, the question should be: is there support for a particular feature? This is what Modernizr does.

How can i use Modernizr?
Modernizr will test your browser for the features that it may or may not support and makes the results available in two ways: as classes in the <html>-element and as a javascript object.

The test results in the <html>-element
To see Modernizr in action, you could create an apex application with theme 25 just including a dummy page. Open your web developer / firebug and have a look at the <html>-element:


Modernizr has included for each test result a seperate class in this tag. For example, including  the class "borderradius" means, that your browser supports this "rounded borders"-feature. In case of non-support Modernizr would include the prefix "no-" to the class name, so it would be named "no-borderradius".

In your stylesheet you can easily now reference to these classes and adapt your application, for example like this (simplified code):

   .borderradius .mycontainer {-webkit-border-radius: 6px; [...]}
   .no-borderradius .mycontainer {/*grmpf, need Sliding Doors .. */ [...]}

The test results in the javascript object
Modernizr creates a global javascript object named "Modernizr". Open the web developer in your theme 25 application and query this object in console:


Each test result is included as a boolean property. For example the property "borderradius" is set to true, so (obviously) your browser supports the "rounded borders"-feature.

In your javascript code you could query now these properties. For example the following code adds the class "round_borders", if the browser supports the "borderradius"-feature:

   if (Modernizr.borderradius)
   { $("#mycontainer1").addClass("round_borders");
   }

2 comments: