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;
}
