IE7 and url(data:=...) via https gives mixed content warning

The problem

The url(data:=...) scheme (defined in RFC RFC2397) allows you to embed raw image content into a style definition. This can be quite useful for lots small gradient images, or for lots of small images to avoid having to create a separate download for each.

Unfortunately neither IE6 nor IE7 support this yet. Fortunately they both just ignore it, so if you want to do a gradient, you can use a url(data:=...) item for Firefox/Opera/Safari, and a FILTER for IE.

The bad news is that IE7 now makes this worse if you use https:// connections. It appears that IE7 now parses the url(data:=...) construct, and even though it doesn't use the data, it regards it as "unsecure" data. So if you use a url(data:=...) construct in a stylesheet delivered via https or on an https page, then you'll get "mixed content" warnings.


This paragraph should have a background gradient colour on it

If you view this page via https:// on IE7, you should get a mixed content warning. Click here for a https version of this page.

Solution 1

The obvious, deliver separate stylesheets to IE7 that remove any data(url:=...) constructs.

Solution 2

Use conditional comments to only show url(data:=...) to non-IE7 browsers. Click here for a https page showing an example of this.