Bb's RealTech

I've now mapped out a plan for moving forward on the organization of my site, including which tools to use, where and even some preliminary designs. I've also played around more with incorporating SVG into a site design, as well as trying out some of the newer CSS3 design attributes. I'm finding out that one can have one's cake and eat it to.

For instance, you can use SVG for a site design, and the site doesn't have to look either plain or ugly with IE–just different. If you're comfortable with different, this isn't a bad way to move forward with the more advanced browsers, such as Firefox/Gecko, Opera, and Safari/Webkit (the Big Three), while still accounting for a more primitive browser like IE.

Right now, today, at Realtech I have an experimental design up called "World War", featuring both a photo from an air show, as well as three different SVG images. Only the photo shows with IE, but rather than have a completely white page, I added a background color and repeating background pattern, both of which are overlayed by the SVG 'background' image that the Big Three can see.

This is where it gets a little tricky. The SVG element supports both a width and a height attribute. If you specify the width and height in the element as SVG attributes, not in the CSS style attribute, Internet Explorer ignores both, which means the SVG element takes up no page space in IE.

However, the Big Three understand that width and height are supported attributes for SVG container elements, like the SVG element, itself. All three support the width and height setting directly in the SVG element. Not only that, but both Safari and Opera get a bit snitty if you don't use these attributes and instead set the width and height using CSS, only.

The end result of this mechanization is that the Big Three see the SVG images and override the background image and background color. True, they still load the background image, but since it's so tiny, it's not a significant load on the server or client. Best of all: no conditional references have to be used, either in HTML, CSS, or JavaScript. If IE were ever to support SVG someday, the browser would then process the SVG just like the Big Three.

I continued this concept into using some CSS3 attributes. CSS 2.1 provides the meat of web page design, but CSS3 is the desert, and what's a good meal without desert?

I use the rgba color function when setting the background color for both my sidebar and my article title bars. The rgba function takes four parameters: the three decimal values, in a range from 0 to 255, for the red, green, and blue channels, respectively, and a fourth representing the alpha channel. The alpha channel is what controls the transparency. Using the rgba function allows us to create semi-transparent backgrounds.

I could use a variation of opacity setting, including the CSS3 opacity attribute, as well as the older moz-opacity, filter, thing. However, the opacity settings effect the opacity of the element on which it is set and any child elements. Using the rgba function for the background-color creates a semi-transparent background for the element on which it is set, but has no impact on the child elements. (For more on opacity and rgba, see A brief introduction to Opacity and RGBA.)

What about a gracefully degrading design? For user agents that don't support rgba, what I've found is that we can specify a background color using non-rgba functionality:

.sidebar
{

background-color: #fff;
background-color: rgba(255,255,255,0.8);
}

Either the agent will pick up the non-rgba background color, or it won't pick up any background color at all. In the latter case, the behavior that the browser demonstrates is that it recognizes a supported CSS attribute (background-color), but not the value (rgba). Therefore it flushes the previously set background color, but doesn't apply the new background color.

(I believe the former behavior is the correct, while the latter behavior is the incorrect. If you any input on this, please leave a note in comments.)

Combined, these two CSS background-color attribute settings result in the following: the sidebar and the inner panel background are both semi-transparent with Safari and Firefox, which support rgba; Opera doesn't currently support rgba, but will pick up the earlier, solid white background-color; IE doesn't pick up any background color, and both items are transparent.

Another CSS3 attribute I use that gracefully degrades is the new text-shadow attribute. With text-shadow, I can add shadow to text, such as the title in the page header. If the browser supports the text-shadow attribute, the shadow displays; otherwise, no shadow.

The text-shadow attribute takes four parameters: the color of the shadow, the x coordinate of the shadow as it relates to the original element; the y coordinate; the radius of the applied blur. I currently have the following text-shadow attribute setting on my main title:

text-shadow: #333 2px 2px 4px;

This CSS setting creates a dark gray shadow, offset 2 pixels to the right and bottom of my current text, with a blur radius of 4 pixels–a relatively soft shadow. The shadow shows with Opera and with Safari, though not with Firefox or IE. As long as no dependency is placed on the shadow (i.e. text the same color of the background, depending on the shadow to make the text show), the look degrades gracefully for browsers that don't, currently, support text-shadow.

Uploaded with plasq's Skitch!

Best of all, when the text-shadow attribute is eventually supported by a browser, the shadow is displayed without any further intervention or modification of the page design. All you have to do to is accept that a page will look different in different browsers. Not "bad", different. If you're willing to live with "different", you can have a lot of fun now with new design elements.

One of the advantages of SVG over some other graphics capability is the fact that SVG is vector-based. A vector graphic means that images are created via *recorded mathematical primitives (circle, line, square, etc.) rather than based on fixed pixels. Because SVG is a vector graphic, the same image can be sized very small or very large and remain crisp and bright regardless of the size. Typically the image has a smaller file size, too.

This doesn't seem like a big deal if the image is placed in a weblog post, and statically sized. My own use of SVG at this site is statically sized and I could just as easily use JPEGs or PNGs, other than the fact that I recreate the images based on the header graphic. However, over at the main Burningbird site, I'm experimenting around with using SVG as a resizable background element, and it's this use that truly demonstrates why SVG can be such an advantage over bitmap images.

Consider computer monitors and the problems we've always had about differing monitor sizes. Either our content seems to extend beyond the edges of the browser, generating a horizontal scroll bar. Or it's a skinny little bar in the midst of a vast expanse of blank space. Even if we use a background image and repeat it, we still end up with a mind numbing expanse of *nothing*.

As an alternative to the static, repeating background image, I used an SVG image I found at the Open Clip Art site, sized dynamically in the background, and statically in both the header and footer. For the background image, attributes on the SVG element provide further instructions in how the image is resized, and whether to maintain perspective or to have the image fill the given space. Right now, I have turned off the perspective, and the result is interesting when viewed in different sized windows.

Uploaded with plasq's Skitch!

Uploaded with plasq's Skitch!

Uploaded with plasq's Skitch!

Uploaded with plasq's Skitch!

Providing a dynamically sized background image is a fairly new use for SVG, so it's not without challenges. Opera on the Mac has problems with the resizing, as well as the gradients used in the image; Safari has problems with the gradient, though Webkit works nicely. However, I originally tried this approach using an external SVG file, incorporated into the page using the object element, but WebKit had problems with the object element. At this time, Firefox 3b3 is the only browser that manages both the gradient and the sizing, in addition to SVG inline or linked externally. I expect, though, that all three–Safari, Opera, and Firefox–will do well with using SVG for a background image in their next released versions.

As for IE, the entire site shows up primarily in black and white. The site is so plain, in fact, that I have a link labeled, "Why is this page so plain", to a page explaining my use of SVG that only shows up when the site is accessed by IE. As I'll be incorporating SVG into all of my sites, I'll be continuing my "B&W" support for IE to all the sites, rather than restrict access with the XHTML MIME type, as I originally did with this site.

Uploaded with plasq's Skitch!

Apple announced that it will be supporting SVG in the version 2.0 of the iPhone SDK because, according to a story on the topic, SVG is a resolution-independent image format that is highly compressible. The three variations of the same image at Burningbird demonstrate the resolution independence, with the image looking good in the site footer, the larger header image, and the potentially very large background.

Once I've debugged why the image isn't loading using the object element in Safari/Webkit, I could use one external gzipped SVG file, and eliminate most of the size constraints. The only restriction with using an external SVG file is that using the object element for the background can cause some odd behavior with IE. In addition, from a drawing performance perspective, I also found the inline SVG to be the best of the two options.

Eventually, though not implemented in any browser that I've been able to see, we'll be able to set the SVG background using the CSS background-image attribute. This just adds to the intriguing possibilities. update This functionality is implemented with Opera 9.5, as demonstrated in this example.

*Bonus material: a detailed instruction video from Nortel on the differences between raster and vector graphics. This is an older video, though. Support for SVG has increased, both with editing tools and with browsers. Other video formats and image lessons from the Nortel LearniT page.

Update I'm just playing around with this pattern, I'm aware that not all browsers are processing it correctly. This gave me a chance to do a little browser testing and also have a little fun with color. We've had so much cold and snow that I was desperate for a little color.