HTML and CSS Reference
In-Depth Information
The easiest way to do this for the border-radius-examples.html file was to just
apply this line to all <div> s, which works well even though the actual border-
radius properties are applied via different classes on the different <div> s:
div {
behavior: url(;
NOTE: I tried applying the PIE behavior property to all elements on a
complex site using * { behavior: url(; } , but it resulted
in some very weird behavior, so it's best not to try this strategy.
The * selector is expensive to render anyway, at the best of times.
The path you specify to the file must be relative to the HTML file the
CSS is applied to, not the CSS, if you are using an external CSS file. This sounds
very odd, but it is due to the way HTC file works: It alters the behavior of the CSS
after it is applied to the HTML!
The other major part of using the CSS3PIE technique comes when you use it
to add support for gradients. To do so, you need to add a special -pie- prefixed
version of the property. For example:
-pie-background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
Yo u ' l l n o t i c e t h a t w h e n u is i n g t h e -pie- prefix on a gradient, the prefix is put on
background , not linear-gradient , which is where the vendor prefixes would go.
There is an added complication: the limitation of CSS3PIE's RGBA support.
Yo u s e e , C S S 3 P I E w i l l a d d s u p p o r it , b u it i it w o n ' it r e n d e r it h e a l p h a b i it . I n s it e a d , i it
will drop the alpha channel and render the equivalent RGB color. This is certainly
better than nothing and is probably not disastrous in many situations, but it could
also cause content to be rendered unreadable or just look shocking, especially if
you're relying on a color with a low alpha value to just add a faint shadow or tint to
a container on your page. To remedy this problem, it is a good idea to change the
-pie- prefixed version of the property to a sensible fallback color or even remove
it in some situations:
-pie-background: linear-gradient(#ff0000,#A60000);
Search WWH ::

Custom Search