Internet Explorer - Box Shadow

Internet Explorer 6–8 do not support the CSS3 `box-shadow` property. However, legacy systems often required visual depth or elevation effects. This article explains why the limitation exists, how to simulate shadows using Microsoft’s proprietary DirectX filters, and the practical considerations of doing so.

Background

CSS3 introduced `box-shadow` to create drop shadows without images. Modern browsers implemented this quickly, but Internet Explorer 6–8 pre‑dated CSS3 and relied on older rendering engines that lacked support for many visual effects.

For developers maintaining legacy applications, intranet portals, or embedded browser controls (e.g., Windows CE terminals, kiosk systems, industrial HMIs), simulating shadows was still desirable — but had to be done using techniques available at the time.

Why Internet Explorer 6–8 Cannot Render Native Box Shadows

Internet Explorer 6–8 used the Trident engine long before CSS3 existed. Limitations included:

• No support for the CSS3 visual module
• No hardware‑accelerated compositing
• Dependency on proprietary filters (`progid:DXImageTransform.Microsoft.*`)
• Rendering model that pre-dated the idea of “element layers”

As a result, effects like blur, glow, and soft drop shadows were only possible using DirectX-based filter effects, each with their own quirks.

Using DirectX Filters to Simulate Shadows

IE’s proprietary filters allowed Microsoft to provide visual effects long before CSS standards existed. Two filters are relevant for shadow simulation:

• `DXImageTransform.Microsoft.Shadow` — hard-edged shadow
• `DXImageTransform.Microsoft.DropShadow` — slightly softer, but still not comparable to CSS3

Example:

```html

   Legacy Shadow Box

```

Limitations of DirectX Filters

• Shadows are rectangular only — rounded corners do not clip the shadow.
• Rendering is slow — IE6–8 repainted using software, causing lag on scroll or resize.
• Aliasing is visible — no Gaussian blur.
• Opacity control is limited — achieving soft, realistic shadows is nearly impossible.
• Filters break hardware-accelerated transparency in PNGs.

Despite these, the effect can provide sufficient visual structure for interfaces of the era.

A More Realistic Simulation Technique

The method popularised by User Agent Man uses pseudo-elements combined with images to approximate softer shadows. While not true CSS3 shadows, the result is significantly closer to modern rendering.

Reference: [User Agent Man: How to Simulate CSS3 box-shadow in IE6-8 Without JavaScript.]

This approach typically uses:

• Absolutely positioned elements
• Background images representing blurred corners and edges
• Wrap-around containers
• Fallbacks for environments without PNG support (IE6 “AlphaImageLoader”).

Performance Considerations

When simulating shadows in IE6–8, performance must be carefully balanced:

• Filters degrade scrolling performance
• Opacity + filter combinations are expensive
• Nested filters multiply rendering cost
• Fast machines mask the issue, but older hardware suffers greatly

Practical Guidance for Legacy Compatibility

• Prefer simple 1px borders if performance is critical.
• Use a single outer container for any effect; avoid multiple layers.
• Prefer DropShadow over Shadow for better results.
• Use the image-based simulation for rounded or soft shadows.
• Avoid applying shadows to dynamic or scrolling elements.
• Offer a reduced-effects mode for older browsers.

Common Pitfalls

• Rounded corners + shadows mismatch
• Shadow overlays text in some IE versions
• Inconsistent shadow offset across zoom levels
• PNG transparency issues in IE6

Example: Practical Compatibility Pattern

```css /* Modern browsers */ .box {

   background: #fff;
   padding: 20px;
   box-shadow: 0 2px 10px rgba(0,0,0,.25);

}

/* IE6–8 */

• html .box, /* IE6 */

  first-child+html .box { /* IE7 */

   filter: progid:DXImageTransform.Microsoft.DropShadow(color=#aaaaaa, offX=3, offY=3);

} ```

Related Topics

• Internet Explorer – AlphaImageLoader (PNG Transparency)
• Legacy Browser Compatibility Techniques
• Progressive Enhancement and Graceful Degradation
• Hybrid CSR & SSR for Legacy Support

References

• Microsoft Developer Network (MSDN): DirectX Filters
• User Agent Man: CSS3 Box Shadow Simulation in IE6–8