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

Debugging with Firebug

Cool article to print out and keep handy on debugging using Firebug. Sadly, I’ve still been using Alert. Call me dinosaur, but it’s worked for me — but I’m trying to change that!

• An in depth look at the future of JavaScript debugging with Firebug
• Firebug Tutorial

This code snippet will help out with browsers that do not have a console function

var console;
if (console == undefined)
    console = new function()
    {
        this.error = function(src) { alert("Error ---\n\n" + src); };
        this.log = noop();
    }

Tags: firebug, firefox

Cross Browser DOM Ready

This is an interesting post about cross browser DOM Ready…

Reinventing the wheel, cross browser DOM ready

There are different techniques to have DOM ready functionality. Some techniques are faster,smarter than the other (or a combination of both). Having it working in various of browser has always been an issue, with HTML 5 they introduced a new event called DOMContentLoaded.

Its a great step to have cross browser DOM ready functionality, but there will always be browsers who doesn’t have this implemented *cough* Internet Explorer *cough* and also the older browsers that some people are still using. So I think it will be safe to say that we can use the DOMContentLoaded completely crossbrowser in the year 2020…Read More

What he’s come up with is very interesting, and for high intensity sites, could be a huge boon.

Tags: firefox, ie6, ie7, safari

Hiding and showing scroll bars with JavaScript

Have you received a requirement that says “We want to see this many elements before you add a scroll bar, we don’t care about the height of the elements, just the number”? If you are using YUI, there is a VERY easy way to handle this! YUI has the following 2 CSS classes which you can add either through javascript or other server side language:

show-scrollbars
hide-scrollbars

The CSS for this is VERY simple:

.hide-scrollbars,.hide-scrollbars * {
    overflow: hidden;
}
.hide-scrollbars select {
    display: none;
}
.show-scrollbars {
    overflow: auto;
}

Now you have scroll bars on command through any language. Using YUI, implement this by addClass, and in Spry, addClassName.

<div class="myBody">
    <ul>
        <li>List of stuff 1</li>
        <li>List of stuff 2</li>
        <li>List of stuff 3</li>
        <li>List of stuff 4</li>
    </ul>
</div>

<script type="text/javascript">
   YAHOO.util.Dom.addClass("myBody","show-scrollbars");
</script>

I’m using the div id “myBody” as text above, but the function also accepts an array of elements, or a single element. You can also wrap addClass into a function that decides when to show or hide the scroll bars.

Tags: firefox, ie6, ie7