Are you afraid of Shadows? Part 2

Back in March, I asked the question: Are you afraid of shadows?
In the article, I showed off some really neat transformations which at the time, were only available to Webkit users (Safari and Google Chrome), and the users of the early beta release of Firefox 3.5 (at the time Firefox 3.1).

The little things like text shadowing, which you really wouldn’t think much of unless you look at the power of the iTunes stores.  The iPhone App Store in iTunes, much like all of iTunes is simply a web interface to the database of apps available for purchase, but if you’re a developer, you’ll notice the sweet effects that are laid on top of your app icon.  Being both a developer and a web developer, I was curious how they went about making that happen automatically.  My first thought was that they modified the image, but that wasn’t the case, it’s all CSS transformations which have been submitted for addition to the CSS 3 recommendation. Take a look at some of the documentation Apple has to offer

So now one must wonder if Internet Explorer will try to catch up[1], or if we will continue to require our web developers to handicap the abilities and speed of their websites just to appease the MANY users of Microsoft’s always behind browser. With luck, we will see Internet Explorer 8.5 which will add many of these abilities, and allow even the most novice of users to see the best that the web has to offer, but until then, those users will look upon the web with unseeing eyes. Ironically, once Internet Explorer does catch up, the world will be amazed at everything Microsoft has brought to them, never to realize that these things had been available for years before.

1 – To be fair, Internet Explorer does have this functionality, but it is something that must be handled in javascript, or by other programmatic means in the stylesheet, and is not the cross-browser way to handle this functionality.

Looking for more specific information? Try Firefox 3.5 for developers at Mozilla.org.

Text Shadowing availability by browser:
Safari 3 & 4
Firefox 3.5
Chrome 1

Have I missed a browser like Opera? I don’t run it and am not required to test against it, so if you know of other browsers that support the latest CSS let me know and I’ll add them to the list!

Tags: chrome, css, css3, firefox, ie8, safari

IE8 Released Today

Internet Explorer 8 was released into the wild today. The enhancements are great, but what about CSS3? Looking at my Blog, I have created some very cool styles that highlight and bring the text more into a 3D view. Apple’s Safari and Google’s Chrome browser supports all of these enhancements, Firefox 3 supports some, but the major player, Internet Explorer continues to leave us swinging in the wind.

A quick sample is this page: Kitty Code / Products When you look at this page in Internet Explorer, you find image icons which are square. Take a look at those images using an iPhone/iPod Touch, Safari under Windows or OSX (all of which run Safari, so maybe that’s not fair), then look at them using Google Chrome (which again probably isn’t fair since the underlying engine is WebKit which Safari shares), then look at it in Firefox and Internet Explorer. This is only one sample of the very cool effects you can create just using a little CSS, which is portable and allows you to use the same image anywhere.

Why is this important to me? Why does it matter? Simply put, Internet Explorer is still the market share stake holder. All large companies acknowledge this. So how are those large companies going to be able to move toward the future if they have Internet Explorer hanging on them like a noose? I find myself dumbing down the websites which I write for this very reason. The website is written to look the same in each browser, which means rounded corners in all browsers are only attained by images, which weigh more than a simple CSS border. This makes those same websites load MUCH slower on hand held PDAs, like the iPhone, PSP, Windows Mobile enabled Cell Phones and more. The point of CSS was to take the design away from the programmers, and leave it in the CSS where it can be manipulated in just about any way without the need for a code change.

So really, until Microsoft decides that CSS2 and CSS3 should be fully incorporated, we will have slow browsing ahead for all.

Tags: css3, ie8

Are you afraid of shadows?

Have you ever wondered how iTunes manages all those cool effects with the iPhone App images? The neat text shadows and box shadows for images, the curved corners… I thought it was something they were using an image tool for, but the more I looked at the feeds, the more I noticed that the the feeds were just that, straight text with not a lot of graphics. Yes, the app image is an image, and yes they are manipulating it, but does it surprise you to know that they are simply using CSS3 effects that are available in WebKit?

I was going through styles at the end of my work day today because our pages just look so bland. I was looking for easy ways to spice it up, even just a little. I started playing with shadows, and instantly fell in love. I made the title of the page look like it was popping out of the screen, and the boxes appear above the page. These were VERY cool effects, but they would only be available to webkit browsers – Safari on Windows and OSX, and on the iPhone and iPod Touch – pretty much anywhere if I understand the documentation correctly.

And that’s when it hit me. Isn’t Google’s Chrome web browser based on WebKit too? So I open it up to the page I was testing and wow! My shadows all worked wonderfully!

I was upset because I know FireFox 3 does not support shadows, but then found a reference to FireFox 3.1a saying that this will be the first version that allows for the shadows. About time I say!

But here we are, supporting an 8 year old browser which will never support these cool effects. I even looked to see if IE8 will show the text shadowing, and even though it’s in RC1, it does not support text shadowing. Maybe that’s why there’s word on the street that IE8 will possibly be the last version – which I’m sure only means for the engine, which is already out dated before launch since it does not support many of the visual effects that WebKit does, which really amounts to the coolest browsing with the least overhead.

With any luck, the tide will turn, and we will be able to produce more and more rich web applications, with eye-popping effects by simply using CSS. Here’s to hoping!

Tags: css, css3, firefox, google chrome, ie6, ie7, ie8, iPhone, safari