Archive for the 'progressive enhancement' Category

RGBa is the new black, with sup­port in most mod­ern Safari 3, Fire­fox 3 and Opera 10, you can have semi trans­par­ent ele­ments. Only there is no sup­port cur­rently in IE for RGBa.

How­ever, you can eas­ily fake it for back­grounds of block ele­ments in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The fil­ter gradi­ent places a alpha chan­nel col­our gradi­ent over the back­ground. So as long the back­ground is trans­par­ent, the start and end col­ours the same and the alpha (aa) chan­nel a value greater than 0 (fully trans­par­ent) and FF (fully opaque), you get a block ele­ment in IE with a RGBa back­ground. You can see an example of RGBa in action in IE …

For those who have not seen my Edge of the Web CSS3 demon­stra­tion I used the CSS Zen Garden HTML. Why, because I wanted to use some­body else’s HTML, mainly because I wanted to show it works with any HTML and that most people would be famil­iar with the site.

I will not sub­mit it, because Dave has not accep­ted any new sub­mis­sions almost two year, my demo is far from the visual stand­ard of most other design and I broke one major rule the CSS does not validate.

I really enjoyed devel­op­ing my present­a­tion for Edge of the Web. The research and exper­i­ment­a­tion was a lot of fun. Explore the demo using CSS Zen Garden HTML and ser­i­ously try it in IE6, the Web­Jam present­a­tion with some even more out­rageous trans­itions needs Safari4 or FF3.7 and a little explor­ing with a mouse.

What I learnt is enough from prob­ably a dozen blog posts, so hope­fully I will be writ­ing lot in the next few weeks.

For those who have not seen my Edge of the Web CSS3 demon­stra­tion I used the CSS Zen Garden HTML. Why, because I wanted to use some­body else’s HTML, mainly because I wanted to show it works with any HTML and that most people would be famil­iar with the site.

I will not sub­mit it, because Dave has not accep­ted any new sub­mis­sions almost two year, my demo is far from the visual stand­ard of most other design and I broke one major rule the CSS does not validate.

Well I am speak­ing at the Edge of the Web Con­fer­ence in Perth in Novem­ber. The title Pro­gress­ive Enhance­ment with CSS: Or how I stopped wor­ry­ing about IE6 and start­ing lov­ing CSS3.

The aim is to show how you can use CSS2 and CSS3 to improve the exper­i­ence of vis­it­ors using mod­ern browsers, while not block­ing access to those people still using older browsers like IE6 …

There are a num­ber of people demon­strat­ing what is pos­sible is pos­sible with CSS3, here are a few of the bet­ter ones I have found.

I adore the prin­ted page and those little refine­ments such as Ini­tial Caps, that use to only be pos­sible in print. Here is an explan­a­tion of the first-letter pseudo ele­ment which allows you to rep­lic­ate that using HTML and CSS.

My first exper­i­ment / tutorial in the pro­gress­ive enhance­ment series is with the @font-face prop­erty, so enjoy and please do not lit­ter the web with ugly sites that over use fancy type, mod­er­a­tion please.

I have start exper­i­ment­ing with CSS2 and CSS3 prop­er­ties to see what I can use now for pro­gress­ive enhance­ment. And by pro­gress­ive enhance­ment I do not mean Hey we are so f&#8230ing cool and if you are not cool enough to use the latest bleed­ing edge browser you can go and read our RSS feed. It is more great your are using a good browser, lets make your exper­i­ence bet­ter by provid­ing a design closer to what I would of liked to use if it was not for the lim­it­a­tions of other browsers.