Modern browsers have support for RGBA colours, allowing you to have semi-transparent background colours. Unfortunately, this only works in awesome browsers (everything except IE 8 and below). However, IE does support a custom gradient filter. Whilst it's commonly used to render gradients (obviously), it supports alpha transparency. If you set the start and end colours to be the same, this has the same effect as setting an alpha value on the colour.

This involves quite a lot of CSS for each alpha colour you want to use. We can automate this tedious code generation through a LESS mixin. If you're still using 'pure' CSS, I'd highly suggest looking into LESS and SASS, they're extremely handy. In any case, I use a mixin similar to the following:

.rgba(@colour, @alpha)
{
	@alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
	@ieAlphaColour: argb(@alphaColour);
	
	background-color: @colour; // Fallback for older browsers
	background-color: @alphaColour; 
	
	// IE hacks
	zoom: 1; // hasLayout
	background-color: transparent\9;
	-ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 8+
	    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7 
	
}

Note that IE requires the element to have layout in order to apply filters to it (hence the zoom: 1 hack), and IE 8 changed the filter syntax to use -ms-filter instead. This LESS mixin can be used as follows:

#blah
{
        .rgba(black, 0.5);
}

This will set the element to a 50% black background. This mixin could be converted to SASS quite easily, too. Ideally I would have liked to apply the IE styles in a better way (like using conditional comments to set classes on the element) but I couldn't get this approach working with LESS.

Hope this helps someone!

Until next time,
— Daniel

I thought I'd give some link love to some of the lesser-known web development blogs I enjoy reading. This post was prompted by a post about my site at GiveUpInternet.com. I didn't expect the link (as I don't think my blog is very good for web development stuff), but I do appreciate it heaps! This blog hasn't really focused too much on web development, perhaps I should post more web development articles 😃

  • GiveUpInternet.com — As it says on the site, "Give Up Internet is a Humor Blog for Internet People and Developers." While it's technically not a web development blog, I love the posts on this site. Unlike a lot of other "humour" sites that post stupid things a lot of the time, it's got actual funny posts. It's one of the only humour blogs that I'm subscribed to.
  • The CSS Ninja by Ryan Seddon— This is a great blog about nice little tricks that can be done in CSS. One of its focuses is doing things that previously required JavaScript, in pure CSS (no JavaScript whatsoever). This includes cross-browser CSS-styled checkboxes, a lightbox in pure CSS, and an easy way to preload images using CSS2.
  • David Walsh's blog — David is one of the core MooTools developers, and as such, he blogs mainly about JavaScript, and occasionally some PHP snippets. While, in my opinon, his posts on PHP are often messy 😛, his posts on JavaScript are excellent.
  • AdequatelyGood.com by Ben Cherry — If you're interested in JavaScript (especially the nitty gritty of its internals), this is by far the best blog on the topic that I've seen. Ben has written detailed articles on a lot of unique features of JavaScript, including scoping and "hoisting", and how it handles object to primitive conversions.
  • Hallvord R. M. Steen's blog and the Opera sitepatching blog — Hallvord is a developer for Opera Software. His blog covers the state of the web as it unfortunately is at the moment - Broken browser sniffer scripts, standards violations, and just general scripting stupidities. Things are definitely improving, but there's a LOT of broken scripts out there. Opera has a file called "browser.js" that contains patches to make these broken sites work correctly in Opera. Hallford's blog (and the Opera site patching blog) detail the things that Opera does to patch these broken sites. There have been some very interesting posts, including the horrible XML and XSLT on the Israeli rail website, how Google Docs used to print documents, and many others.

That's all for now... I might eventually write another blog post like this. Or a proper blog post 😛 😃

Until next time,

— Daniel