Categories
Web

Shock, Awe, Economics, and the Web

Battered into a fetal ball by waves of bad economic news, only surfacing to watch an occasional crash and bash flick, such as Iron Man, I discovered my own personal bailout via Naomi Klein’s book, “The Shock Doctrine: The Rise of Disaster Capitalism”. Oddly enough, it wasn’t something that Klein wrote (though she has many interesting points and I hope to write more on her book at a later time). No, it was a quote by the master of the Chicago School, Milton Friedman, himself, that loosed my death grip on self. As introduction to his book, Capitalism and Freedom, Friedman wrote:

only a crisis—actual or perceived—produces real change. When that crisis occurs, the actions that are taken depend on the ideas that are lying around. That, I believe, is our basic function: to develop alternatives to existing policies, to keep them alive and available until the politically impossible becomes politically inevitable.

The irony that the free market system Friedman loved so well is now experiencing its own “shock and awe”, as corporations grasp at despised government intervention, like a baby its bottle, has not escaped me. But for me, the operative phrase in this quote is “the actions that are taken depend on the ideas lying around”. This is totally irreverent to the problems we’re facing, and I apologize in advance for seeming to trivialize the very difficult times we’re all facing, but when I read this phrase I thought to myself, “Internet Explorer, your days are numbered.”

Consider this: movement forward in the web has been stymied in recent years because, we’re told, thousands of corporate intranets, and millions of corporate employees using these intranets are dependent on tricks and hacks put into place to support Internet Explorer 6. Add to this the, in my opinion, anal fixation that web pages must look the same in every browser, and most of our page design has been stuck like a bug in pitch.

Now that the corporations are downsizing in order to preserve what they can of executive compensation, the machines on which these applications run are being sold for scrape, tossed out along with the other chaff (i.e. employees). And those still employed, frankly, have other concerns than whether IE supports opacity or not.

I don’t believe I’m alone in seeing the Friedmanesque possibilities of our current economic disaster. What better explanation for the recent production release of Google’s Chrome browser? Google released Chrome from its beta utilizing a speed for which the company is not known. After all, isn’t the GMail still in beta? Come to that, isn’t the Google search engine still in beta?

Then there’s the fact that Chrome is currently only supported in Windows, just like IE. Only like IE, as a matter of fact. No, I am sure that Google sensed corporate shock, and moved quickly to displace IE in the hearts and minds of upper management—not to mention the hearts and minds of millions of newly unemployed workers who are no longer subject to the intransigence of corporate IT. If by doing so, Chrome also kicks Firefox, Opera, and Safari in the face in its haste, eh, casualties of war.

I am not displeased by Google’s move. After all, Chrome supports XHTML and some SVG, both of which Microsoft seems incapable of implementing. However, there is some confusion about what Chrome is, or is not, capable of supporting. True, Chrome has utilized the excellent WebKit, which also serves as the soul of Safari. However, as others have discovered and my new experimentation in web design demonstrates, Chrome has a different graphics engine (Skia) than Safari/Webkit. In the interests of “stripping” down the browser to make it lean and mean for web applications, the developers also made it rather, um, unattractive. At least for now. If you view this web page using Chrome, you will see that Google currently does not support the CSS3 text-shadow property, though it does support box-shadow. It also supports border-radius, though badly—the anti-aliasing is less than optimal, as is the support for alpha transparency.

While it is true that text-shadow, box-shadow, and border-radius are CSS3 properties, and thus not part of a released specification, they are supported in Safari 3.1 (and Firefox 3.1 and partially in Opera 9.x). Because of the Webkit tie-in between Safari 3.1 and Chrome, people may be confused when what works in Safari, does not work in Chrome. Well, those people who don’t have other, more pressing, worries.

Screenshot of Chrome in action

Categories
Graphics/CSS

Incorporating CSS3

With the growing support for CSS3 in most of the major browsers, including Firefox, Safari, Opera, and now Chrome, I decided to incorporate the use of CSS3 properties into my own site designs. In addition, I also used an SVG graphic whenever I wanted a background that sized with the page.

The CSS3 properties I’m most interested in are text-shadowbox-shadowborder-radiusborder-image, in addition to support for RGBA opacity. No more having to use kluge methods to add curved corners, or shadow text; no more stretched transparent PNGs, or layered DIV elements in order to provide border images. Though not all browsers support all of the properties, as long as we use the effects carefully, the designs should degrade, nicely.

text-shadow

The text-shadow attribute is from the CSS3 Text Module, which is currently in candidate recommendation. It’s implemented as follows:

h2 { text-shadow: #ccc 1px 1px 2px }

The first parameter is the color specification used for the shadow, the second and third are the shadow offsets (horizontal distance to the right, vertical distance to the bottom), and finally the radius of the blur. The setting just described is quite subtle, and the shadow effect not immediately apparent when looking at my sites. I use the above CSS setting to add a level of richness to the header text in my sites, rather than create a noticeable text shadow.

I use more distinctive text-shadow settings for my site titles, including another subtle effect for the Secret of Signals web site. Though it may not be apparent, there is a text-shadow applied to the header, but the offsets are set to zero, which creates a “glow” around the text—white for inactive, red for when the header link is active—rather than a distinctive title.

#header h1.site-name a {
  color: #fff;
  text-decoration: none;
  text-shadow: #fff 0 0 6px;
}

#header h1.site-name a:hover {
  text-shadow: #f00 0 0 6px;
  color: #f00;
  text-decoration: none;
}

The text-shadow works with Safari 3.1, Opera 9.6 and up, and the beta of Firefox 3.1. Neither Chrome nor IE8 currently support text-shadow.

box-shadow

The box-shadow CSS3 property is part of the backgrounds and borders module, which is currently only in draft status. Since this module and the properties it describes are a work in progress, we need to apply the new effects, like box-shadow, using each company’s CSS extension naming procedure:

  • -moz-box-shadow for Mozilla/Firefox 3.1
  • -webkit-box-shadow for Webkit/Safari 3.0 and up and Chrome

The syntax for box-shadow is:

  -moz-box-shadow: 1px 1px 10px #00f;
  -webkit-box-shadow: 1px 1px 10px #00f;
  box-shadow: 1px 1px 10px #00f;

In addition to the extension listings, I also include the final box-shadow property, so that I don’t have to modify my CSS style sheet when the module reaches candidate recommendation status.

The first two parameters are the shadow offset, just like with text-shadow. The third is the radius of the shadow blur, and the fourth the color of the shadow. This setting is what I use for the blue menu bar in the top, right corner of Secret of Signals in addition to the shadow effect I use around the sidebar and content area in this space. Again, as with the text-shadow effect described earlier, using a small offset and a large blur radius creates a “glow” around the box, rather than a sharply defined shadow. The larger the blur radius value, the more diffuse the shadow effect.

In this site, I’m using the box shadow to “soften” the hard edges of the sidebar and content columns, as well as enhance the “candle effect” of my incorporated Burningbird symbol. In Secret of Signals, I’m trying to emulate the glowing blue buttons we see on our USB devices. In MissouriGreen, I use a more traditional shadow effect around the top menu items.

Currently box-shadow is not supported by IE or Opera. The box-shadow does work with Chrome, but when combined with the next CSS3 property I’m covering, border-radius, the effect is less than optimal.

border-radius

The border-radius property is also a part of the CSS Backgrounds and Borders module currently in work at the W3C, and as such, each browser that supports it, does so with its own extension naming. To me, the border-radius property is important because with it, we can finally begin to simplify our web sites, eliminating all of the nested div elements we’ve used in order to create the effect of rounded corners.

The following is an example of the syntax used with border-radius:

  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;

The parameter represents the “radii of a quarter ellipse that defines the shape of the corner of the outer border edge”, according to the specification documentation, and is a shorthand technique for the longer specification of each corner:

border-top-left-radius:     30px;
border-top-right-radius:    30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius:  30px;

Currently, I am using a border-radius for the columns and menu list in Secret of Signals, and the columns in this space. However, the corner curvature does not show for the menu items in Safari and Chrome, as neither browser currently implements border-radius for list (li) elements. However, both Safari 3.x and Chrome, in addition to Firefox 3.x and up, do support the border-radius on the div elements acting as columns.

One caveat when it comes to using border-radius with box-shadow together: Chrome does not map the edge of the box shadow to the curved border, leaving a rather disfiguring “black” filling in the gap between. Of all the browsers and effects, this is the only instance where an applied effect does not degrade well.

border-image

The last CSS3 property I have incorporated into my sites, at least for now, is the use of border-image at MissouriGreen. This is a wonderful CSS property that is a little tricky to implement, but well worth the effort. As with border-radius and box-shadow, it is part of the CSS Backgrounds and Borders module.

I created a single image to use in my MG borders.

[image gone]

I wanted this image to serve as border or my individual posts, except that I wanted the top leaf to be at the top, left border, the bottom two leaves to form my bottom, right border, and I wanted the tips of the leaves to “stretch” to form an enclosure for the text block.

The CSS specification I use is:

  -moz-border-image: url('leaves.png') 48 52 43 40 stretch stretch;
  -webkit-border-image: url('leaves.png') 48 52 43 40 stretch stretch;
  border-image: url('leaves.png') 48 52 43 40 stretch stretch;

The parameters for the property are the URI for the image, four values that determine, respectively, the height of the top edge for both top corners, the width of the right edge, for both right corners, the height of the bottom edge, and the width of the left edge. The final two parameters instructs the browser how to scale or tile the border image.

In MissouriGreen, the upper leaf in the border image is 50 pixels tall and 45 pixels wide; the two lower leaves are 55 pixels wide, about 45 pixels tall. When I specify 48 pixels for the upper corners, the part of the image that would be used for the upper right corner is transparent pixels, and so no image shows. However, the part of the image used for the upper left is the solitary leaf, but the amount I specify feels just above the end of the stem.

The width I give for both right corners again uses only transparent pixels for the upper right corner, but the two leaves are used for the bottom right. Again, though, the width I specify falls just to the right of the end of the leftmost leaf.

The bottom edge falls just short of the top of the rightmost leaf in the double pair. For the left width, the amount given places the edge just before the tip of the solitary leaf’s right border.

MissouriGreen border image

How the border image fills the space given around the nodes is based on where I set the edges in the previous four values (notice all were just before the leaves’ terminating edges), and the next two parameters, in my example both given as stretch. The first parameter determines what happens to the image’s top, middle, and bottom border, while the second parameter controls the left and right borders. The allowable values are “stretch”, which means to stretch the image, and “round”, which will tile the image, rounding it in such a way that it fits within the given space.

By using stretch, what I’ve done is instruct the browsers to take the leaf tips and stretch them out, along the sides, top, and bottom. Since the image is stretched, and the dimensions I provided show leaf tips ending in transparency, the ends stretch, more or less, evenly along the sides, top, and bottom, creating an open enclosure around the text.

Other uses of the border-image property can specify a different border image for each border, as well as an image with graphics that would scale and tile nicely to fully enclose the space—the W3C Borders and Background module includes a nice example.

RGBA

The support for RGBA comes with the CSS Color Module Level 3, which is in draft state. Most browsers support an RGB color space, but only Firefox, Safari, Chrome, and now Opera 10 beta, support RGBA.

Why RGBA is important is that it gives us the ability to define the opacity for an element, without having to use the opacity property, which not only impacts on the element, itself, but also the contents of the element. With RGBA, I can set both the color and alpha transparency of an element (the -A part), and not impact on the opacity of the contained elements.

#sidebar-wrapper { background-color: rgba(255,255,255,.80); }

The first three parameters are the Red-Green-Blue values for the color (in this case, white), and the fourth is the alpha transparency value, in this case an 80% opacity value. I use this value for my sidebar at this site, and other variations for the content, and the footer. As you can see, setting the alpha transparency of the background for these page content areas does not impact on the opacity of their contents.

Opera 9.x doesn’t support RGBA, but you can specify an RGB setting, first, and the browser will pick that up and use it.

This is one where IE does not degrade gracefully. If you specify an RGBA value, IE doesn’t understand it but rather than use the previously defined RGB setting, it falls back on its default. However, there is a simple trick to get around the problem. IE also doesn’t support certain of the advanced selector syntax, while other browsers do. A simple, cross-browser solution for using RGBA is the following:

#footer { background-color: #fff; }
html>body #footer { background-color: rgba(255,255,255,0.8); }

Degrading Gracefully

None of these effects currently work with IE8, the box-shadow, border-radius, and border-image don’t work with Opera, and text-shadow doesn’t work with Chrome, but the sites look fine without any of these effects. The only problem I’ve experienced is with Chrome and mixing border-radius and box-shadow, and I’ve left the effects, as a reminder to Google that it’s better not to implement support for specific CSS properties, rather than do a half-assed job of it.

Though not specific to CSS3, I also used SVG as background for this site and Secret of Signals: a wavy background in reds to represent the ‘signal’ in Secret of signals; and a white on blue curvy effect in this site to represent smoke, and to complement the “soft corner” effect I was creating. Both are deliberately sized just to the original browser window, not the entire contents, as the latter stretches the patterns too much. However, resizing the browser window will re-size the pattern. Opera, Firefox, Safari, and Chrome all pick up the SVG, IE does not.

For more on CSS3, I recommend CSS3.info.