Firefox 3.5 – Fonts, clean and crisp

Something that I have been detesting is how my sites have been looking in Firefox under Windows. I know, I know, you deal with these things for security, etc. But I looked at Safari, and the fonts were always clean and crisp… So what gives?

I found an article relating to @font-face css rules, read it in Firefox 3, and then decided to look at the same page in my VM instance of Firefox 3.5. The difference was staggering, and yet very slight. Firefox 3 looks very grainy and even pixelated where Firefox 3.5 looks crisp, like an Arial font should look. I start looking at the author’s CSS (yes, I’m a nosey person) and realize that they’re not actually using @font-face styles on their page! So I looked around the web a little more, comparing the pages side by side just to find that wow, the experience may not bring me headaches any longer!

For me, this one little thing is a huge win. I look at Firefox every day during my development cycle and to be able to see the fonts just as I would in any other application is frankly awesome. This is something that I expect, and it was a disappointment before. I am very glad to see that Safari has taken up the challenge of being innovative and improving the user experience on the web. Other browsers like Firefox are now catching up, and for those of us who develop applications for the web, and those that use our applications, this is nothing but WIN!

Thank you Mozilla – for something so simply pretty. Thank you WebKit for making the challenge happen.

Tags: css, firefox, safari

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

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

Graceful Degredation – What does it really mean?

It goes hand in hand with unobtrusive javascript, and really is just another name for the same thing. Here are some quotes from some decent articles on the subject:

from Dan’s Web Tips by Daniel Tobias

“Graceful Degradation” is an important principle in Web design. It means that, when you put in features designed to take advantage of the latest and greatest features of newer browsers, you should do it in a way that older browsers, and browsers letting users disable particular features, can “step down” to a method that still allows access to the basic content of the site, though perhaps not as snazzy in appearance.

from Augmentative authoring
- a different look at “graceful degradation” in Web authoring

The phrase “graceful degradation” is often used to describe the idea that a Web page that uses special technologies for presentation enhancements, animation, interactivity, etc., should “degrade” to a simpler, yet fully functional page in circumstancies where the technologies are not applicable. This document takes a somewhat different view: instead of considering how to provide “fallbacks” for various advanced constructs, we consider how to create first a robust document that works always, then augment it by providing optional alternatives to the simple constructs. We’ll discuss the different techniques that are needed for different enhancements.

We currently have a lot of old legacy javascript menus which contain all of the links to the various places on our sites. In our latest efforts, dubbed T2, we have introduced Spry and YUI libraries which use non-obtrusive javascript to manage the menus, sliding panels, collapsible panels and popups. In the article JS Menus – Good or Evil? the author highlights a few good reasons to get rid of those old javascript only menus and replace them with the new-fangled way of doing things in the Web 2.0 world, like Suckerfish. This article was written sometime in 2003, so it is quite old (as is the Suckerfish reference), however you will find after looking at the Suckerfish article that the SpryMenu we are using is actually uses this exact unobtrusive theory.

Tags: accessability, css, graceful degredation, javascript