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.
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.
Search WWH ::

Custom Search