More CSS Drop Shadows For All Browsers

Martin Kliehm — Mon, 23 Aug 2010 16:00:18 +0000

Thanks to the unstoppable advancements of web standards aiding mankind to overcome the real burdens of the 21st century, adding drop shadows to boxes became much easier in recent years! No more PNG background images! Leaving the question aside whether drop shadows are really progressive and appropriate for a flat medium (anybody remember the fad of “3D” bulging buttons in the 1990ies?), I was confronted with the challenge of adding box shadows in Internet Explorer for a client project.

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:

.wrapper {
background-color: #fff;
border: 1px solid #d30d01;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
float: left;
height: 75px;
margin: 15px;
padding: 10px;
width: 75px;
-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
-o-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

CSS box-shadow

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:

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

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:

Internet Explorer with blur filter

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:

.wrapper, .inner {
background-color: #fff;
border: 1px solid #d30d01;
height: 75px;
padding: 10px;
position: relative;
width: 75px;
}
.wrapper {
float: left;
margin: 15px;
}
/* reset wrapper styles to defaults; work-around for screwed box-model */
.ms-box-shadow {
background-color: transparent;
border: 0 none;
height: 95px;
padding: 0;
width: 95px;
}
/* Move the inner wrapper to the foreground */
.inner {
z-index: 50;
}
/* The shadow element */
.shadow {
background-color: #000;
display: block;
filter: progid:DXImageTransform.Microsoft.Blur( makeShadow='true', pixelRadius=4, shadowOpacity=0.30 );
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}

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?

Farewell, XML declaration

Martin Kliehm — Wed, 04 Jun 2008 16:00:04 +0000

For years I have been using an XML declaration prior to my DOCTYPE declaration:

TR/xhtml1/DTD/ xhtml1-strict.dtd">

It was obvious for me that such a declaration would be a good thing to have since XHTML is XML after all. Only later I learned that it triggers a bug in IE6 to render pages in quirks mode with a broken box model. But I was used to build workarounds for Internet Explorer bugs since IE 3.0 and never knew anything but the broken box model in IE, so I continued to use the declaration.

Until recently my colleague Thomas Junghans took the trouble to research, and found this phrase in the XHTML specification:

An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol.

The declaration is not required as long as you encode in UTF-8 or UTF-16, you are only strongly encouraged to use it. Gasp!

Richard Ishida lists some advantages of using the declaration when serving the pages with an XML MIME type or viewing them offline, however I’m convinced the disadvantages prevail.

So as long we are stuck with IE6 — and people say that could be as long as 2014 when support for Windows XP ends (reminder to self: throw a party on 8 April, 2014) — I will refrain from using the XML declaration. Amen.

Learning the World » ie6

More CSS Drop Shadows For All Browsers

Where’s the crux?

Farewell, XML declaration