Pro tip: communicate to the client that shadows are a bonus feature. Your designers may disagree, but the site will not suffer considerably when special effects like box shadows, text shadows, or rounded corners are regarded as enhancements for decent browsers. However, your client’s budget will suffer when they are determined to provide the same visual effects on outdated browsers such as IE6. That said, here is the well-known method in CSS3:

1. .wrapper {
2. background-color: #fff;
3. border: 1px solid #d30d01;
4. box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
5. float: left;
6. height: 75px;
7. margin: 15px;
8. padding: 10px;
9. width: 75px;
10. -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
11. -o-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
12. -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
13. }

1. <div class="wrapper">
2. <p>CSS box-shadow</p>
3. </div>

At the same time when we rolled out the website, Robert Nyman came to the conclusion that the proprietary Microsoft filter for Shadow looks much prettier than DropShadow, so I forgot about blogging myself as his solution doesn’t rely on unsemantic markup and is more elegant:

1. .wrapper {
2. /* For IE 8 */
3. -ms-filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
4. /* For IE 5.5 – 7 */
5. filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
6. }

Note that you get slightly better effects when you choose a dark gray instead of black as shadow color. If you can live with the rendering of the third box below, don’t read any further.

However, applying the filter had the side effect that text inside the box wasn’t anti-aliased in IE 6-8 anymore, and the shadow still didn’t look decent enough. So we added an extra span and applied the blur filter on it.

That led to a more complex code as we needed an inner wrapper where the border and background is applied to, while the outer wrapper merely acted as a … wrapper, where the styles were reset to defaults. HTML first:

1. <div class="wrapper ms-box-shadow">
2. <div class="inner">
3. <p>Internet Explorer with blur filter</p>
4. </div>
5. <span class="shadow"></span>
6. </div>

And here’s the CSS that’s added with Conditional Comments for IE 6-8 only (as IE9 supports native CSS box-shadow, more or less). The shadow element is absolutely positioned, set behind the inner content and blown up to 100%. Not original, but it works:

1. .wrapper, .inner {
2. background-color: #fff;
3. border: 1px solid #d30d01;
4. height: 75px;
5. padding: 10px;
6. position: relative;
7. width: 75px;
8. }
9. .wrapper {
10. float: left;
11. margin: 15px;
12. }
13. /* reset wrapper styles to defaults; work-around for screwed box-model */
14. .ms-box-shadow {
15. background-color: transparent;
16. border: 0 none;
17. height: 95px;
18. padding: 0;
19. width: 95px;
20. }
21. /* Move the inner wrapper to the foreground */
22. .inner {
23. z-index: 50;
24. }
25. /* The shadow element */
26. .shadow {
27. background-color: #000;
28. display: block;
29. filter: progid:DXImageTransform.Microsoft.Blur( makeShadow='true', pixelRadius=4, shadowOpacity=0.30 );
30. height: 100%;
31. left: 0;
32. position: absolute;
33. top: 0;
34. width: 100%;
35. z-index: 0;
36. }

For some reason I got a more similar result with the shadowOpacity set to 30% instead of 20%.

Where’s the crux?

If we are willing to ignore lots of bloated CSS: IE6 only blows the shadow up to 100% when the wrapper has a fixed height. This sucks, but unless you want to add more bloated code in JavaScript I don’t know of any solution for this problem. Still IE 7-8 handle a value of 100% right, and there are many cases where the height is known. Take for example photos where you’d like to apply shadows, some buttons, or horizontal shades lying above images, like the shadow of the second level navigation on this site. Beautiful, isn’t it?

But if your blog or a client has a loyal readership, it would be convenient if they could just use their browser’s searchbar as a shortcut. For example currently we work on a website relaunch for a big German city, and it’s easily conceivable that citizens want to search this site more often.

Here comes a side effect of OpenSearch: the OpenSearch descriptions are machine readable XML files. Firefox and Internet Explorer 7 are two of those “machines” if you let them know the file exists:

1. <link rel="search" type="application/ opensearchdescription+xml" title="Your website’s title" href="/opensearch.xml" />

Of course that belongs in the head. Now all you need are a few more lines of code in the opensearch.xml file:

1. <?xml version="1.0" encoding="utf-8"?>
2. <OpenSearchDescription xmlns="http://a9.com/-/spec/ opensearch/1.1/">
3. <ShortName>Your website’s title</ShortName>
4. <Description>A short description of the search</Description>
5. <InputEncoding>UTF-8</InputEncoding>
6. <Image height="16" width="16" type="image/x-icon"> http://yourdomain.com/favicon.ico</Image>
7. <Url type="text/html" template="http://yourdomain.com/ search/ ?q={searchTerms}"/>
8. </OpenSearchDescription>

Just change the shortname property, the favorite icon path, the search URI and parameters. Don’t change {searchTerms}. And that’s all, it’s a five minute no-brainer…

Further Reading

• OpenSearch documentation (Mozilla Developer Center)
• JSON type-ahead suggestion functionality for OpenSearch

Update: Internet Explorer 8 now supports type ahead suggestions, too.

In this post:

• Eric Meyer: Keynote
• Jeremy Keith: Using DOM scripting to plug the holes in CSS
• Chris Wilson: IE: 7 and beyond
• The new accessibility guidelines: WCAG 2.0
• Jeffrey Veen: Designing the next generation of web apps

Introducing geeks to a social life

There was some socializing the evening before the conference where I met with a couple of Germans, like Jens Grochtdreis who initiated the German web standardista group “Webkrauts”, Jan Eric Hellbusch whose website I had noticed before for some master theses about accessibility, or Tomas Caspers who is a member of WaSP and the mastermind behind the accessibility portal Einfach für alle. Actually I wasn’t the only one to notice he looks like the lost fifth member of the German punk band “Die Toten Hosen”?… Also that’s where I met Roger Johansson, whose technical blog 456 Berea Street is a must-read for CSS and accessibility aware coders.

So my first day on @media began with a walk through polluted London air along surveillance cameras and anti-tank barriers along the Houses of Parliament over to the queue in front of the Queen Elizabeth II Conference Center (QE2CC) where we got nice bags and name tags. I would suggest shawls with the @media logo for next year to stand a chance against the bloody cold air conditioning while it was 28° C outside.

Eric Meyer: Keynote

The conference started with a keynote by Eric Meyer with his personal impressions of the last ten years of the web. Quite interesting since I’ve been reading his articles on Web Review, where he published among other things the famous CSS browser compatibility chart, a great companion in my struggle with 4th generation browsers.

Looking back, he realized the following truths:

1. Small groups of dedicated experts can change a lot (e.g. the CSS Samurai, or Tantek Çelik who introduced doctype switching).
2. Free information is an essential part of any new web technology’s adoption.
3. You don’t hear much anymore from people or companies who kept information as a “personal advantage.”
4. You might be the first who thought about a certain solution. Savour this moment, and then share it.

Using DOM scripting to plug the holes in CSS

As an example, Jeremy Keith introduced the techniques of Buck Owens, the first musician to “hack” the tinny sound of early radios by replacing the bass with a regular guitar. So his tracks sounded better and got more airtime. Using DOM scripting to work around incomplete CSS implementations or to simulate CSS 3 behavior is basically the same, as long as there aren’t yet browsers with “great bass.”

Okay, most of the stuff in his presentation sounded familiar, and I’d rather set zebra stripes on table row backgrounds server side. Still I got some inspiration how to do some things better. For example it never occurred to me to combine selectors like

1. document.getElementById("id") .getElementsByTagName("p")

Or I never thought of using a universal selector in JavaScript:

document.getElementsByTagName("*")

Also the next time I’m manipulating an object’s class, I promise to do it by writing some reusable functions like

1. document.getElementByClassName()
2. function addClass(element, className)

And after I createElement I should set more attributes by setting a className instead of adding each attribute separately.

When he mentioned CSS 3, I learned that Safari is already capable of handling multiple background images. And I liked his introduction of the geeky Star Trek term of a “Kobayashi Maru scenario” for a no-win situation, or his translation of object detection

1. if (document.getElementById) { }

with “you must be this high to ride.” Rather cool, and a very entertaining presentation.

IE: 7 and beyond

Chris Wilson worked on the Mosaic browser (that’s, like, Netscape 1 — scary, isn’t it?) and on IE ever since version 2. Praise him for first implementing CSS in IE3, blame him for some nasty bugs he’s personally responsible for in IE6. Also he’s the one who wrote he will quit (and probably become a professional surfer) the day he loses his passion or IE gets mothballed again.

After some blatant promotion for all the outstanding new features and fixes in IE7, things you can read about in the IEBlog if you haven’t yet, he came to the interesting facts:

First of all, they are planning the next two releases now, and it won’t take another five years until IE8 will emerge. Also IE7+ for Windows Vista is only marketing speak, what counts is that it has the same features as IE7 for Windows XP, except for some vista-only security and parental control. IE7 will ship in “second half 2006.” More precisely, the Malaysian Vista developer Jabez Gan disclosed earlier that December 6 will be the release date.

Because of the deep interaction with the operating system they can’t push it as a critical Windows update, but they will “strongly encourage people to update.” The new fonts won’t be deployed with the update, more likely in a separate package, simply because with Unicode support some are too large.

On a technical side they are aware of developer’s problems to test on multiple versions of IE. Though it is technically hard to have a friendly co-existence of multiple IEs because they provide the operating system, it should be possible to create side-by-side versions of the browser only. Yay, that’s what we want!

Also they would like to support the XHTML MIME type, but want to do it right, later. Same is true for advanced DOM support, or passing the Acid2 test. What’s next for the web? Mashups, RSS, microformats, and XMLHttpRequest (did you know there’s a W3C working draft?). XForms is on their radar, but they need to coordinate efforts with other browser vendors.

Besides Chris recommended some tools like an expression finder to spot CSS hacks, or an application compatibility toolkit, stuff you can download as part of the Internet Explorer 7 Readiness Toolkit from Microsoft with a genuine copy or from someplace else without.

The new accessibility guidelines: WCAG 2.0

I had hoped that by visiting the panel about WCAG ['wu:kæg] I could avoid having to read the unreadable myself, but I was disappointed. You will read in another post about it. Not much else to tell about that panel, except WCAG 2.0 is probably not as bad as we have thought. There are notes and the slides available on accessify.com.

Designing the next generation of web apps

Jeffrey Veen is the partner of Jesse James Garrett who gets all the attention for coining the term “Ajax.” Anyway, Ajax is so going to change our world. Like the automobile, or the Great Depression. Some will get more mobile, some will get greatly depressed when the web becomes inaccessible.

In another panel the speakers agreed that Ajax can make live easier as an enhancement (Jeremy Keith calls it “Hijax”), but shouldn’t be a world of pain for the others. Actually I can see some of Jeff’s examples (use Stuart Colville’s notes to understand the slides) as an enhancement. Like giving immediate feedback when input fields in a form validate, while degrading gracefully by giving feedback after a regular submit.

You can enhance understanding by coloring and visualizing rainfall values in a nicely designed table, or you can further enhance it by making it interactive with a fader to choose cities on a map. But I can’t imagine how to have both.

In another example he showed a mashup of Google Maps with a Chicago crime database. Nice, but how can that be made accessible? So that people without JavaScript, or screen reader and braille display users with JavaScript can access the raw data table that lies under the visualization?

There was a lot of talk how today’s websites will be tomorrow’s web applications, but like Nate Koechley put it: You can’t just copy one aspect of desktop applications while ignoring the accessible alternatives. Desktop applications are accessible with multiple input devices, like a mouse or a keyboard. Screen readers can get the content. Don’t you forget it when developing the “next generation off apps.” There’s more than just good looks.