Combined CSS and image comment bubbles

This article concludes my three part comment bubble article series. If you want comment bubbles in your Blogspot blog, you can pick one these three hacks.

1. Comment bubbles using only CSS
2. Comment bubbles using an image
3. Combined solution, which uses CSS whenever possible (installed in this blog)

As I explained in the CSS only comment bubble hack article, Internet Explorer does not support all CSS needed for rounded comment bubbles with gradient background. And the support varies from version to version.

Internet Explorer 8 and lower

I start with the "CSS only" hack installed, and then add there stuff for different Internet Explorer versions.

IE8 and lower don't have rounded corners and IE7 does not support :after, so I decided simply to use a comment bubble image, when IE version is lower than 9. First I thought that I'll use conditional comments like this:

<!--[if lt IE 9]>
..stuff for ie versions below 9..
<![endif]-->

But after trial and error I found out that it was not so easy. I learned that the browser version number does not actually determine the CSS capabilities, but the document mode (compatibility mode) instead. Well at least in Blogspot blogs, and that's where I'm targeting with my code.

I finally came up with this solution for IE (documentMode) < 9:

<!--[if IE]><script type='text/javascript'>
if(typeof document.documentMode == 'undefined' || document.documentMode < 9)
document.write('<style type="text/css"> a.comment-bubble { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiustzmZZ_DVTnRogE2sCovlleU6eLrJRn1oHbGe6cMmLm4kcqMNhD8BC2ha4QqDKZYbn5I9oxxOTgu6UzxYkRHdJDZ2yZAKaA5BRThJDFlz7nmFTW7ChfqrhG8oO4ZXscQLUwWDwUEoIo/s800/comment_bubble.jpg) no-repeat;width:36px;height:26px;border:0;padding-top:3px;} a.comment-bubble:after { border:0; };</style>');
</script><![endif]-->

That code is placed somewhere after template stylesheet and before </body>. The javascript is seen and runs only on IE. If documentMode < 9 (IE8, IE7, ...), new style definitions are written: bubble background uses an image, set width and height, no border and right padding, and for a:after remove the border that made the triangle. Basically make comment-bubble use same styles as in the image comment bubble hack.

Internet Explorer 9

As we saw in the CSS only comment bubble hack, IE9 does quite well with the comment bubble CSS: only the gradient background is missing. There is a filter provided by Microsoft to make gradients, but that messes the rounded corners. There are workarounds for that, too, but I chose another way: I made a gradient background image and encoded it in base64 to make a data URI, so it could be directly embedded in CSS without external file. Background image is correctly clipped by the rounded corners.

So the comment bubble CSS became:

Data provided by Pastebin.com - Download Raw

Line 15 is new (compared to CSS only solution) and contains the gradient for IE9. Because it is before the background gradient definitions, they override it on browsers that support gradients. And on IE8 and below the background is later reset to use an image (see previous chapter).

The discovery of data URIs base64 gradient PNG lead me do a simple linear gradient tool for making embeddable gradient backgrounds.

Complex solution?

So, is there any point in this complex solution, one might ask. Well, to be honest, I don't know :) You might prefer to use either CSS only or image only solution, for simplicity. I could also have used either, but this way I learned more. In a year or two Internet Explorer will do CSS comment bubbles, too, and then these browser version dependend hacks won't be needed anymore.