However, you can easily fake it for backgrounds of block elements in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The filter gradient places a alpha channel colour gradient over the background. So as long the background is transparent, the start and end colours the same and the alpha (aa) channel a value greater than 0 (fully transparent) and FF (fully opaque), you get a block element in IE with a RGBa background. You can see an example of RGBa in action in IE

The simplest way is including in your CSS
background: transparent ;
background: rgba(255,0,0,0.5) ;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88ff0000', EndColorStr='#88ff0000');

Which is clean and simple, even it does deliver you invalid CSS. There are two problems, if a browser does not support RGBa and is not IE, (eg FF2) the block element background will be transparent. I do not think that is a major issue right now. There are a handful of browsers outside IE in use that do not support RGBa. My main concern is future proofing, the next major version of IE (the beta is due within a year) will support RGBa (as well as HTML5 and some CSS3 according to sources) and as usual will maintain backwards compatibility with earlier versions of IE. So you will get a semi transparent background colour overlaid with a semi transparent gradient.

The solution, is to provide a stylesheet to all browsers and an extra stylesheet to IE8 and below with conditional comments. So your CSS will have:
background: fallback color RGB or hex ;
/* background colour for browsers that are not IE that do not understand RGBa */
background: rgba(R,G,B,a) ;
Your HTML will include (note don’t try and cut and paste from here as grab the text file instead):
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/xtras/ieonly.css" media="screen" />
<![endif]-->
And ieonly.css file include:
background: transparent ;
/* needed to clear the background colour */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88ff0000', EndColorStr='#88ff0000');

If you don’t believe me and do not have IE6, here is the screenshot. And I was not the first one to suggest this method for implementing RGBa in IE, Hedger Wang did some time ago, and even suggested using canvas to provide the transparent background to FF2. I only found his example while finalising this post.

I will not submit it, because Dave has not accepted any new submissions almost two year, my demo is far from the visual standard of most other design and I broke one major rule the CSS does not validate.

There are no hacks in the CSS just lots of browsers specific declarations like:

-moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.66);

And even worse Microsoft specific declarations, which break the W3C rules for CSS

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#AA666666', Positive='true');

As I said in my presentation, the important thing to know about validation, is why your code does not validate, if you know that, then validation is irrelevant.

What I learnt is enough from probably a dozen blog posts, so hopefully I will be writing lot in the next few weeks.

The aim is to show how you can use CSS2 and CSS3 to improve the experience of visitors using modern browsers, while not blocking access to those people still using older browsers like IE6. I want to convince the audience, that you can build sites that do not have to look the same in all browsers.

I will be looking at what CSS2 and CSS3 you can safely implement now. The main provision it must not break IE6. It does not have to work in IE6, just have a safe fallback position.

The presentation is not aimed at people who read Surfin Safari, CSS3.info or similar sites and then go off an experiment with what they have been shown. That is what I do

I know I will be covering those I covered indepth before like opacity/transparency and <a href=http://nickcowie.com/2008/font-face/”>@font-face. Are there any other CSS2 or CSS3 properties you would like to see me cover? Otherwise I might go all shock and awe with transitions ;-)

So this is what I created to clean up Word HTML, you paste the HTML is to the editable div, hit the button and if you are using Internet Explorer the converted HTML is copied to your clipboard. So you can paste the clean HTML (note it is HTML code) straight into the CMS editor in HTML mode or WordPress.

Note, while you can use JavaScript to add to the clipboard with Internet Explorer, you need to use Flash to copy the contents to the clipboard for other browsers. I have not do that yet. Mainly because Internet Explorer is the corporate browser and this was created for work.

So have a look under the hood, see how it works, take the code and modify it for your own use. It appears to be working for what I need, but maybe needed to be modified for your situation.

*** does not currently work in IE8, I need to investigate further ***

The specs for :first-letter pseudo-element state:

These are the properties that apply to :first-letter pseudo-elements: font properties, … ‘line-height’, … margin properties, padding properties … UAs may apply other properties as well.

Width and height are not properties that have to be applied to first-letter. Only the WebKit family (Safari, Chrome etc.) apply these properties. The main issue is line-height which could be used to control the vertical size of the first-letter pseudo-element, as according to the specs.

To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter

Internet Explorer, Webkit and Opera have chosen not to apply line-height and unless one is specified, a :first-letter pseudo-element will inherit line-height from the parent element. Firefox has chosen to apply a line-height to all first-letter elements equal to the height of the element and you have no method of changing it. This automatically aligns the top of the floated :first-letter pseudo-element in the parent block element.

Because the line-height is the height of the type, you get different line-height for different characters eg a, t and p. Which makes it virtually impossible to use lower case letters to produce drop caps like effects.

So you need to reduce the line-height of first-letter to the cap height of your chosen typeface then use margin-top or padding-top to vertically align the top of first-letter with the top of the remaining text. Not only is this more complicated than just changing line-height, you need to do two calculations instead of one. Internet Explorer applies margin and padding to floated :first-letter pseudo-elements differently than other browsers. By fixing the :first-letter pseudo-element in place after applying line-height then applying margin and padding to it, which does not effect surrounding elements.

Five different browsers rendering floated :first-letter pseudo-elements with slightly different properties. Chrome produces the same results as Safari. Note IE8b2 does strange things to backgrounds both colour and images of the:first-letter pseudo-element.

So to get a cross browser drop cap effect using :first-letter pseudo-element that vertically aligns, you need to apply float: left, then find the height of the typeface cap height, reduce the line-height to that, adjust margin-top so it aligns correctly in Firefox and in Opera or a WebKit browser, and then using conditional comments for an IE only stylesheet remove margin-top and change line-height to correctly vertically align the type.

It would of been a lot easier if Mozilla Corporation and Microsoft read the CSS specifications the same way as everybody else and applied the same rules.

Then on December 1 24 Ways showed what could be done and how not to do it with regards to graceful degradation. After problems with the initial design, there was a couple of great articles on using CSS3 for progressive enhancement by John Allsopp and Elliot Jay Stocks.

A few days ago, Smashing Magazine published Push Your Web Design Into The Future With CSS3, which is a general introduction to CSS3. It also lead me to the Zen Elements blog of Alex Mitchell, which like me is experimenting with CSS3 properties and putting it on display for everyone to learn from.

I have not forgotten my demonstration of @font-face, first-letter and adjacent selectors. I am having issues with vertical alignment cross browsers. You will see that demonstration is the near future.

Internet Explorer 7

This would of been a great browser if it was released in 2003, instead it was released in 2006. The improvements over IE6 were good but not worth waiting 5 years for. It still has a number of the IE6 idiosyncrasies that require work arounds. It is the most popular browser is common use today, and likely to remain so for another year, before succumbing to IE8. Still you and I will supporting it for a few years to come.

Google Chrome

A fast, lightweight browser, which I was happy to use while in beta. Since it reached 1.0 release, I have become aware of a few short comings. It branched from the webkit evolution far too early and has not included recent improvements that other webkit browsers have. For example the problem with border-radius and box-shadow, lack of support for @font-face. In addition the Chrome renders type differently from all other browsers. Still while it has a decent market share for a new browser and the opportunity to improve exists, so it needs to be supported.

Internet Explorer 6

A great browser in 2001, which should of been replaced in 2003 and disappeared from view by 2006. It has a number of idiosyncrasies that require work arounds, and you have to spend considerable time after getting a design to work in IE6 after you had it working in more modern browsers. However, over two years after being replaced it still commands around 20% of the IE market share. This has very little to do with computers not being able to support IE7. Less that 5% of all IE6 users are on an OS other than XP.

Unfortunately IE6’s reign of 5 years cemented it’s position in the corporate market and their intranet systems. A large number of corporate networks could not upgrade to IE7, because major tools like the finance and human resources system (in our office) would not work with IE7. These are not quick and dirty locally built tools, but major applications built by vendors like Oracle, IBM and the ilk. However, more than 2 years after it’s release, IE7 is now getting support from these applications and as corporates upgrade these system, most are also upgrading their corporate browser to IE7. Unfortunately this will take a couple more years, before IE7 or IE8 rule the corporate sector.

A more disturbing trend is the netbooks and inexpensive laptops that connect to the free wifi at work, over 50% of the machines running XP use IE6, compared to less than 25% of the XP machines accessing the regular website. I do not know if this is because IE6 is the preferred browser for low spec machine running XP or something to do with the large number of Chinese and Korean language devices.

Still while IE6 is our corporate browser, I will have to support it, no questions asked. As I will while it remains popular in either in the corporate or low end netbook/laptop sectors.

Internet Explorer for Windows Mobile 6

If you thought supporting IE6 or the old IE5 was painful, you have never had to support IE for WM5 or WM6. It does not know if is a mobile browser or a full blown browser for the small screen, it loads both screen and mobile profile stylesheets, it only supports XHTML-MP which is missing a few key elements from HTML4. JavaScript support is interesting, some scripts work, other do not and some just crash the browser. Unfortunately it is one of the major mobile browsers and Windows Mobile is popular in the corporate sectors. Around 10 times more popular than the iPhone and Mobile Safari and a lot more than Opera Mobile, my favourite small screen browsers.

Browsers I will stop supporting this year

I have already made a decision not to worry about getting the new website I just launched for work, perfect in Firefox 2 and Safari 2. they accounts for less than 1% of all traffic. So as long as it functions correctly that is all I am concerned about. Minor defects are acceptable. On the other hand, Firefox 2 support will be a concern if I every get round to redesigning this blog because it accounts for 5% of all traffic. Apparently web geeks are twice as likely to stick with Firefox 2 than the average Firefox user, probably something to do with the trusty web developer toolbar. Still I will review that later in the year.

I am a little more ruthless than the Yahoo browser support chart, I have already dropped Windows 2000 support. I currently only worry about XP, Vista, OSX 10.4 and 10.5 and Ubuntu as OSes and IE6, IE7, Safari 3, Chrome, Opera 9.5, Firefox 2 & 3 as browsers for computers. Though I am looking at dropping Chrome and Firefox 2 to functional only, while adding IE8 and Opera 10 to supported. I also support Mobile Safari, Opera Mobile, Internet Explorer for Windows Mobile 6 and would support the latest S60 browser if I had access to a test device.

edited 17 February 2009 for grammatical reasons

On close inspection, I like Cambria and the idea of using it for body copy. Just need to find a suitable Mac font and a fallback for those XP machines without it. Times New Roman has never cut it as a body copy font for me. On the other hand Times New Roman looks so elegant at large text sizes, that I could not bear to use Cambria as a display text(Title and headings) if Times New Roman was available.

Mindful of the recent Chrome and Safari render the same…or do they? discussion on the WSG mailing list. I fired up all the test browsers on that machine to see if there are any differences in font rendering between IE8, Firefox3.1 beta, Safari 3.1, Opera 10 alpha and Chrome. The results have been combined into single image.

The shock was how differently Chrome rendered the text to all the other browsers. The type is significantly heavier with Chrome, looking more like a semibold version of the typeface, when compared to all the other browsers, which rendered the type identical to my untrained eye.

I have always known that type on the web is far from perfect. But by selecting the right fonts and using relative sizes, you could deliver a fairly consistent typographical experience to most users no matter what OS, browser, installed fonts and user settings they had. Chrome takes your carefully constructed typography and makes it darker and dramatically changing your design. Oliver Reichenstein said Web design is 95% typography that is because Google Chrome now has a 5% market share.