With the advancement in technology, more and more professionals are using new technologies such as CSS3 and HTML5 for web development, customization, integration and implementation. The powerful emerging web technologies CSS3 and HTML5 is the most standard measure to get rid from an unreliable, slim and buggy browser sniffing. In other words, the field of web development has undergone lots of improvement and smartened up a lot.
Earlier, large number of web developer and web designers was used to prefer advanced CSS markup language for purpose of designing layouts as well as styling. There are numerous browsers which are not supporting CSS-based layouts efficiently and therefore, web designers and web developers left with no option except opting the path of browser sniffing or hacking. However, every web developer was more or less advocating for web standards adherence.
The browser sniffing (hacking) is most popular technique mainly required for detecting functionality of browser and version used by particular user through navigator.useragent property in website and web applications. It is one-of-its-kind hacking which allows web developers for quick and easy code forking. With the help of browser sniffing, a web developer can target functionality of distinct browsers with different instructions without any hassle.
No more CSS hacking or browser sniffing. No need to ask the browser questions like “who are you?” It’s time to check the capabilities of a browser. Say thanks to all new Modernizr but what does it stands for? Well, that’s a million dollar question. Modernizr is highly appreciated small and simple open source JavaScript library most commonly used by web developers and web designers to enjoy benefits of well implemented HTML5 and CSS3 technologies in distinct browsers by upholding full control over unsupported browsers.
This advanced detection feature is well used for CSS3 and HTML 5. This open source detection feature can add a class to your HTML element. The Modernizr mainly detects whether the browser is supporting features of new technologies – CSS3 and HTML 5. The list of CSS3 features comprises of @font-face, border-radius, border-image, box-shadow, rgba(). On the other hand, set of HTML5 specification like audio, video, localStorage, and the new <input> element types and attributes.
The most noteworthy feature about Modernizr is that it can easily make the elements of latest HTML5 available for styling over Internet Explorer. Modernizr is one-of-its-kind open source detection feature through which web programmers and web designers can build a website layer-by-layer beginning with JavaScript-free foundation by adding different layers of enhancement one-by-one.
How to use Modernizr?
The Modernizr can be well used for building a cutting-edge web portal. In order to make a fully fledged website a web designer needs for follow below mentioned simple steps.
Get, set and go with Modernizr
Download the latest version of Modernizr from www.modernizr.com. Here, you can find out lots of information about Modernizr and its full specifications. Insert the below mentioned script into your page’s <head> section:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My Beautiful Sample Page</title>
<script src=”modernizr-1.5.min.js”></script>
</head>
After adding the above discussed codes into <head> section of your page next you need to add class “no-js” to the <html> element:
<html>
Once the Modernizr runs then it will substitute the existing class with “js”. With the help of this type of integration, you will be able to know whether JavaScript is enabled in your CSS based layout or not. Interestingly, the Modernizr – an open source detection feature will continue to add classes in every feature it detects by simply prefixing them with “no-” if browser is unsupported. After enabling JavaScript on pageload your <html> element will appear alike:
<html>
After adding the above script our sample page will be visible similar to highly semantic and accessible bare-bones. You can even add more into your layout. You can even make your CSS layout more appealing by means of basic styling, simple formatting, color etc. Therefore, you can easily make a well designed website by simply adding uncomplicated CSS to a semantically structured HTML based page.
Want to add more interactivity in your page? Don’t worry. Now, you can do it without any hassle. You can change font size of h1 header through open license. In addition to that, you can even adjust border of page. Follow the below mentioned script in order to add two new CSS properties into our page:
.borderradius #content {
border: 1px solid #141414;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.boxshadow #content {
border: none;
-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
}
The most noteworthy part about open source Modernizr is that you can easily instruct browser to render one-pixel solid border only in the case of browser which supports border-radius. With the help of first rule, you can add about 12 pixel rounded corner in your #content element. On the other hand, you can add a drop shadow to #content element through second rule. In addition to that, you can even remove the border but only if browser supports box-shadow property.
With the help of below mentioned codes you can add special font in your header:
h1 {
color: #e33a89;
font: 27px/27px Baskerville, Palatino, “Palatino Linotype”,
“Book Antiqua”, Georgia, serif;
margin: 0;
text-shadow: #aaa 5px 5px 5px;
}
However, the font size of 27 pixels is all together fine but it is not good for our page. It is quite small as per our custom font. You need to add below mentioned CSS property in order to use it:
@font-face {
src: url(Beautiful-ES.ttf);
font-family: “Beautiful”;
}
.fontface h1 {
font: 42px/50px Beautiful;
text-shadow: none;
}
First of all, the @font-face declaration will be added in your custom font which mainly indicate path, filename as well as font-family name. Furthermore, the font selection in CSS rule will be added to your h1 element. In addition to that, you can even remove shadow but it possible only when browser is ready to render custom font. Apart from that, you can split up the list of features by simply using CSS columns application. This interesting application mainly allows all browsers to shrewdly split the entire list of features into different columns without disturbing its order. Since, every browser does not supports CSS columns and therefore, these types of browsers use floats in order to make the list two columns:
.csscolumns ol.features {
-moz-column-count: 2;
-webkit-columns: 2;
-o-columns: 2;
columns: 2;
}
.no-csscolumns ol.features {
float: left;
margin: 0 0 20px;
}
.no-csscolumns ol.features li {
float: left;
width: 180px;
}
In case, the browser doesn’t support CSS columns then list items will be floated by simply applying some margins and widths in order to get same outputs.
Still want to add more progressive enhancement to your page? The CSS transitions, animations, and three-dimensional transforms are some features which are well supported by WebKit-based browsers.
@-webkit-keyframes spin {
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(360deg); }
}
.csstransforms3d.cssanimations section {
-webkit-perspective: 1000;
}
The most important thing is that the @keyframes rule are most crucial part of CSS animations which are currently supported by WebKit only. With the help of this feature, you can add full animation path by simply changing properties. For more information about CSS animations visit the W3C Working Draft specification. You need to add below mentioned script in order to apply CSS animation through which you will be able to rotate your elements in 3D space into your secondary header:
.csstransforms3d.cssanimations section h2 {
background-image: url(modernizr-logo.png);
overflow: hidden;
-webkit-animation: spin 2s linear infinite;
}
By replacing your background image of Modernizr logo with PNG versions you can add more interactivity in your website. With the help of its overflow:hidden property, you can hide original text in header which is a offsetting to -9999px.
