HTML and CSS Reference
In-Depth Information
disposal that you can use in your web applications. However, the downside is that very old browsers may
not display your web pages as expected. A solution to tackle this problem is to create different CSS classes
encapsulating traditional versus CSS3-specific properties. At runtime, based on whether a browser
supports a specific CSS3 feature, either a CSS3-specific class or a class with traditional properties is
applied to an element. But doing so calls for more work because it involves creating multiple CSS classes
and applying them at runtime based on the level of support offered by the target browser.
To assist you in this job, you can use the Modernizr library. Throughout this topic, you've been using
Modernizr to detect HTML5 features. The same Modernizr library also allows you to detect support for
CSS3 features. Let's see how.
A web page that uses Modernizr refers to it using a <script> tag as shown next:
<script type="text/javascript" src="scripts/modernizr.js"></script>
At runtime, the Modernizr library modifies the <html> tag of the HTML5 document to include all
supported HTML5 and CSS3 features as well as those not supported on a given browser. The following
<html> tag from a sample HTML5 document shows how this happens:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation
postmessage websqldatabase indexeddb hashchange history draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow
textshadow opacity cssanimations csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions fontface generatedcontent video
audio localstorage sessionstorage webworkers applicationcache svg inlinesvg
smil svgclippaths">
In this markup, Modernizr has added a class attribute to the <html> tag. The value of the class
attribute is a string containing CSS classes separated by white space. Each class represents an HTML5 or
CSS3 feature. The features that aren't supported on a given browser are prefixed with no- . For example, this
markup includes a no-touch class, indicating that touch events aren't supported. The plain feature names
(such as video , audio , and webworkers ) indicate that they're supported by the browser.
n Note The <html> tag with the class attribute added isn't visible in the HTML source of the web page because
it's added programmatically by Modernizr. You need to inspect the page in a tool such as Chrome Developer Tools.
Now, suppose you have a <div> element on the page and you wish to set its background-color , text-
align , padding , border , and border-radius CSS properties. Of these, border-radius is CSS3-specific,
whereas the others are traditional CSS properties. The border-radius property allows you to create borders
with rounded corners, as discussed earlier in this chapter. You can create three CSS classes as shown here:
.div {
background-color: #d3a584;
padding: 10px;
text-align: center;
.borderradius .div {
border: 2px #f00 solid;
border-radius: 25px;
.no-borderradius .div {
border: 2px #f00 solid;
Search WWH ::

Custom Search