HTML and CSS Reference
In-Depth Information
broad categories: features that meet the specification completely, and features that are implemented but
don't yet meet the specifications completely. To distinguish between these two types, the browser vendors
use their own prefixes for the features belonging to the second category. These prefixes are listed in Table
13-4.
Table 13-4.
Browser-Specific Prefixes for CSS3 Properties
Preix
Description
-ms-
Used by Microsoft Internet Explorer
-moz-
Used by Mozilla Firefox
-webkit-
Used by Google Chrome and Apple Safari
-o-
Used by Opera
Consider a CSS class named
rotate
, as shown next:
.rotate
{
border-radius: 25px;
-ms-transform: rotate(10deg);
}
The
rotate
CSS class uses two CSS3 properties:
border-radius
and
-ms-transform
. The
border-radius
property doesn't have a prefix attached to it, which indicates that it's feature-complete. The
transform
property, on the other hand, uses the
-ms-
prefix, indicating that the feature-incomplete implementation
specific to Internet Explorer should be used. You use the browser-specific prefixes listed in Table 13-4 in
some of the examples discussed later.
n
Note
You can use Modernizr to detect browser support of CSS3 features in JavaScript code just like other
HTML5 features. However, Modernizr doesn't provide detection properties for all CSS3 features.
Using Web Fonts
You can make your web pages catchy and easy to read by making the proper use of fonts. Unfortunately,
web developers and designers have had to be satisfied with a small set of fonts to ensure that their web
applications look the same on all browsers running on a variety of operating systems. If you use a font in
your web pages that doesn't come bundled with the operating system, there is no guarantee that the client
machine has the same font installed. As a result, your web page may look different to the end user than it
does on your machine. That is why web developers and designers have often restricted themselves to using
well-known web-safe fonts, which are likely to be available on a wide range of computer systems; these
fonts include Arial, Verdana, and Times New Roman.
CSS3 provides a new way to use fonts called
web fonts
. Using this feature, you can host nonstandard
fonts used by web pages on your web site. You then declare a custom font definition using the
@font-face
CSS3 rule. At runtime, the client browser reads the custom font definition from the style sheet and
downloads the font to the client machine. The font is then used for your web pages. Each web site that
wants to use a nonstandard font must define it in the web site's style sheet.
