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 ;-)

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.

Lets you style the first letter of any element.

Supported by:

Firefox, Safari, Chrome, Opera, IE5.5+

Known bugs

They are detailed at pseudo-class, pseudo-element, pseudo-CSS. IE6 & 7 has more than a few, negative margins and vertical-align separating from the box are the most frustrating for me. As well as Safari and Firefox handling the text-indent property differently (sorry but I can not get my head around the specs today).

Not support by:

Old browsers and some mobile browsers.

What happens when first-letter is not supported:

The first letter is not individually styled, instead it has the same styling as the rest of the element.

Properties

Only a limited number of properties can be applied to first-letter:

• color properties
• border properties
• font properties
• text-transform
• line-height
• background properties
• margin properties, though it appears only margin-top and margin-bottom works when combined with float.
• padding properties, note padding-bottom does not affect the size or text flow of the holding container unless combined with float.
• text-decoration
• letter-spacing, only when floated
• clear, only when floated
• vertical-align, only when not floated
• float
• clear

If you want to see the properties in action here is an example.

Screenshots from IE7, Firefox 3.1b and Safari 3 (note the differences in the last second and third last items in Firefox and Safari, otherwise it is the usual IE vs everybody else.)

Issues

If you look at the examples, you will see two choices. After working out what properties you can use with IE, you will either spend a time tweaking margin-top and padding-top when combined with float or learning the difference between vertical alignment: baseline, centerline, mathline and topline (another experiment for me) and adjusting line-height, depending on your desired results.

Example

Not yet, I will combine it adjacent selectors for an example shortly.

Will I use it now?

I will definitely look at combining first-letter, adjacent selectors and @font-face when I redesign this blog and for any other project.

Allows you to use fonts other than those installed on your user’s computer on your web pages.

Supported by:

Firefox 3.1, Safari 3, Opera 10, IE4+ (for Windows, note IE uses different format for fonts)

Not support by:

Chrome, Firefox 3, Safari 2, Opera 9

What happens when @font-face is not supported:

The next font-family in the list is used, so you need to ensure a suitable second choice font that is likely to be installed on your visitors computer is next in the list of fonts.

History:

Back in middle of the browser wars in 1997, MS introduced the then proposed CSS2 property @font-face with IE4. Like the button element which first became available with IE4, @font-face never can into popular use. Why?

• Netscape choose to support the alternative TruDoc format instead
• .eot files are a non-standard format, (though in 2008 Microsoft made a submission to the W3C to adopt .eot)
• .eot files can be difficult to create (more on this later)
• users will have download the font file and in 1997 with almost everyone on dialup this added considerable weight to the page.

Well in 2007, Webkit announced support for @font-face, which was included in CSS2 recommendations in 1998. This time the open source philosophy reigned and they choose to support the standard TTF and OTF formats. Safari, Firefox and Opera all followed within 12 months.

Issues

You need to deliver two different font formats to two different browsers, though that as not difficult as it seems.

Some font files and particularly TTF files can be large, with some exceeding 1Mb.

Not all fonts work with all browsers, while experimenting I found a number of fonts both TTF and OTF that Opera 10 alpha on OS X refused to load and a few of those did not load in Opera 10 alpha on XP.

Creating .eot is a interesting challenge. I wasted a few hours with WEFT tool on Vista repeatedly crashing, I finally created a number of invalid .eot files. So I ended up using the WEFT tool with XP to successfully create .eot files and it only crashed once. Please don’t ask me for help with WEFT, it was just a trial and lots of errors experience and I do not have easy access to XP.

The WEFT tool only works with TTF files. So unless you can convert OTF files to TTF, you can not use OTF files with IE.

Font licensing is a complex issue, I would suggest reading for and against standardizing font embedding by Bert Bos as a starting point. Personally I am taking a long hard look at the licence when I download a free font from the web to use. If the licence is unsuitable I do not install the font. I am currently going back through my font library and hunting down the licences for each font and reading them carefully before deciding to keep the font.

Writing the code

There are a few of issues here,

IE will download all EOT, TTF and OTF fonts declared with @font-face even though it can only use EOT fonts.

Webkit, Firefox, Safari and Opera will download all EOT, TTF and OTF fonts declared with @font-face even though it can not use EOT fonts.

If you declare an EOT font for a font-family already declared with a TTF or OTF file, that font-family is no longer usable in Firefox. However the reverse does not appear to be true for IE.

If you use a font-family name and that is the name of font already installed on a visitor’s computer, the computer will used the installed font instead of downloading.

So after after some thought and a little experimentation, this is how I will be using @font-face:

<!--[if IE]>
<style type="text/css" media="all">
@font-face {
	font-family: Bleeding Cowboys;
    font-style:  normal;
    font-weight: normal;
	src: url('BLEEDIN0.eot') !important;
}
</style>
<![endif]-->
<style type="text/css" media="all">
@font-face {
	font-family: Bleeding Cowboys;
	font-style:  normal;
    font-weight: normal;
	src: url('Bleeding_Cowboys.ttf');
}
h1 {
	font-family: Bleeding Cowboys, 'Bleeding Cowboys', 2nd choice, serif;
}
</style>

The logic is:

1. Use conditional comments to feed the EOT font to IE only.
2. Use !important so IE will ignore any future declarations of src for that font-family.
3. Provide the TTF file for other browsers to use.
4. Use the normal name for the font, so people who already have that font will not have to download it a second time.
5. Provide a suitable alternative for browsers that do not support @font-family

Example

A typographers worst nightmare Using InkedGod for headings, Bleeding Cowboys for body text, both faces I adore in the right place. Note neither font works with Opera 10 alpha on a Mac(you get your default fonts) and Impact for browsers that do not support it. Screenshots Safari 3, Firefox 3.1beta, IE7 which support @font-face, Opera 10 alpha on a Mac with default fonts, Firefox 3 and Chrome which do not support @font-face and display impact.

Will I use it now?

I will definitely use @font-face when I redesign this blog and for any suitable projects before then, if I can get access to the WEFT tool on XP. At the moment, depending on the site between 50% and 90% of visitor’s browsers support @font-face. Once Firefox3.1 in released that will rise to around 90% to 95% within a couple of months.

There are a couple of exceptions :

I will not use it just for a logo, if image replacement or flash provide a light weight alternative

I will be extremely cautious about using @font-face for large amounts of body text. While there is a large number of suitable fonts for display (heading) text available with the right licence to use with @font-face. For long sections of text, I will stick to the best type for that job of reading online and that is usually already installed on most people’s computers.

As I have said before, I have not changed how I code HTML and CSS for more than five years. I have made minor refinements to my methods, but I have not changed my techniques or used any new CSS properties in that time.

I will be sharing what I learn, because I know a lot of people are in a similar position to me. So sit back and enjoy the ride and I hope you can learn something you can put to use.

You will notice that I make use of the CSS Zen Garden HTML in my examples. That is a conscious decision, even though the code has far more hooks than I need. CSS Zen Garden was great in 2003 when I was still learning CSS1, you could stick your head under the hood and see the techniques used by others. Unfortunately over the past few years, updates have be infrequent and concentrating on beautiful design with nothing in the CSS has been new or interesting to me. I now want something similar for CSS2/3, to showcase what is possible now with current browser technology.

My first experiment / tutorial is with the @font-face property, so enjoy and please do not litter the web with ugly sites that over use fancy type, moderation please.