HTML and CSS Reference
In-Depth Information
One CSS class contains CSS properties that are to be applied regardless of whether
border-radius
is
supported, another contains CSS properties that are to be applied when
border-radius
is supported, and
the third contains CSS properties that are to be applied when
border-radius
isn't supported. Note that the
second (
borderradius
) and third (
no-borderradius
) CSS class names are the same as the corresponding
class names from the
<html>
tag. The
borderradius
class sets the
border
and
border-radius
properties,
whereas the
no-borderradius
class sets only the
border
property. Once the CSS classes are created, you can
use them on a
<div>
element as follows:
<div class="div">Hello World!</div>
At runtime, the
div
CSS class is applied to the
<div>
element. Additionally, one of the two classes
(
borderradius
or
no-borderradius
) is applied depending on whether the
border-radius
property is
supported. Figure 13-22 shows a sample run of the web page in Chrome.
Figure 13-22.
Modernizr applies the
borderradius
CSS class in Chrome.
As you can see, because Chrome supports the
border-radius
property, the CSS properties from the
div
and
borderradius
CSS classes are applied to the
<div>
element.
Summary
CSS is a de facto standard for applying styling rules to web pages. CSS3 adds many new features to CSS 2.1
to make it more appealing and useful to web developers. This chapter covered some of the important
features of CSS3.
With CSS3, you can use nonstandard fonts in web pages by creating custom font definitions using
@
font-face
. At runtime, the font file is downloaded at the client and is used to display the web page's text.
Another nice improvement of CSS3 is the ability to add fancy frills to box layouts, such as shadows,
gradients, and transparency. You can also add effects using transitions and transforms.
As mobile and handheld devices become more common, web sites are increasingly being accessed
over mobile devices. Using media queries, you can detect device properties such as width and orientation.
You can then apply different styling rules to web pages or elements to ensure that they look great in the
target device.
HTML5, JavaScript, and CSS3 together will, no doubt, change the way people develop and use web
applications. The momentum has begun, and in the future you'll see these technologies gain increasing
acceptance and widespread use. This topic has attempted to give you all the necessary skills to ride the
HTML5 wave and harness the power of this futuristic technology.
