HTML and CSS Reference
In-Depth Information
CSS3PIE
CSS3PIE adds support for CSS3 “bling” features to older versions of IE that don't
support them. It is part of Sencha Labs and was originally developed by Jason
Johnston. The current feature support list includes:
border-radius
FIGURE 2.11
A typical, simple
website directory structure.
box-shadow
border-image
multiple background images
linear-gradient
as background image
Note that CSS3PIE includes a JavaScript version (read more at
http://css3pie.
com/documentation/pie-js),
but the basic version that you will most likely use
(at first, at least) is an
.htc
file (HTML component—an IE-specific script used to
create custom display behaviors that can be applied to a page via CSS). Bizarrely,
you need to reference the
.htc
file with a path relative to the HTML file, not the
CSS file, even if you are including references to it in CSS that is contained in an
external stylesheet!
For example, consider the directory structure shown in
Figure 2.11
.
To a p p l y it h e C S S s it y l i n g it To it h e H T M L fi l e , yo u To b v i To u s l y n e e d it To re file, re n ce i it
using the path
css/style.css
:
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
The
.htc
file works by being applied to the CSS properties you want to affect in
the form of a
behavior
property. You'd think that you'd need to do this by going
up a level and then down a level again to get from
.css
to
.htc
:
behavior: url(../script/PIE.htc);
But you don't. The
.htc
file is referenced from the CSS but actually acts on the
HTML file after the CSS has been applied to it, so you need to reference it as if it
were being referenced from the HTML file, like so:
behavior: url(script/PIE.htc);
This confused me at first.
