Firefox 3.1 - One step closer to IE

jfkern — Mon, 03 Nov 2008 20:54:57 GMT

Today's topic is Firefox 3.1. Now, you may be wondering why a Microsofty is blogging about our competitor. The fact is, we do quite a lot of development for non-IE browsers and with good reason: Firefox now represents almost 20% of the worldwide browser usage share according to Net Applications. Safari makes up over 6% and IE is about 72%.

So let's take a look at what's coming in the next release of Firefox. What makes 3.1 special is the trend towards supporting features that, until now, only IE supported. Rather than enumerate all the new features, I'll call out a select few that were gleaned from IE and will make a big difference in your browser support development.

Script Deferal

Firefox 3.1 will add support for the defer attribute in the <script> tag. This will allow you to defer script execution until the page has been loaded which decreases PLT (page load time) and can make writing a client-side application easier. IE has had this attribute for a while, and it is even defined in the W3C HTML 4.0 standard and DOM Level 1.

Word Wrap (CSS)

Another relic from IE making its way into Firefox is the word-wrap rule in CSS. This rule is used to decide what to do with a long string with no natural break points (e.g. spaces, dashes, etc) when the container is small. You may have wanted to use this rule when you have a fixed-width element and someone puts a string like "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" into it. Before this rule, the string would overflow outside of the element's width and start doing funky things with your layout. The word-wrap rule allows you to force a break regardless of whether there's a break point.

To use this rule, add the italicized rule into your CSS class for the element:

 .cssClass {
    width:150px;
    padding:5px;
    word-wrap:break-word;
}

This will solve your big-ugly-string woes.

Selectors API

One of the best new features in Firefox 3.1 is support for the W3C Selectors API. You can read all about it in yesterday's post.

Appendix

Well, there you have it. These 3 features were taken directly from IE and will make your cross-browser work far easier. You can read more about the new stuff coming in Firefox 3.1 at the Firefox 3.1 for Developers page on Mozilla's website.

W3C Selectors API

jfkern — Fri, 31 Oct 2008 04:24:51 GMT

First off, welcome to inetpub, my foray into the world of blogging at work. Part of my job is working with web standards and non-standards, so I figured that I could share my knowledge with whomever wants to listen.

One of the biggest and most useful up and coming browser features is the introduction of the W3C Selectors API. This handy set of functions lets you use CSS selectors in your DOM code to get a collection of elements with exceptional specificity. For example:

var elms = document.querySelectorsAll(".cssClass");

will get you a collection of elements with the CSS class "cssClass" applied on it. Now, you might ask why we need this if there's document.getElementsByClassName(). Well, for starters, getElementsByClassName is non-standard which means that only Firefox and a handful of other browsers support it. Furthermore, IE adds support for the Selectors API in version 8 which makes this a standardized, cross-browser method of grabbing all elements with a given class.

It gets better though: You can query for any valid CSS selector, for example:

var elms = document.querySelectors("#navbar li.selected");

gets you the selected nav node in the nav bar element. You can even query for siblings and direct descendants using the + and > selection operators, respectively. Also note the two methods presented above are different: The first one, querySelectorsAll, will get a collection of all elements on the page that match the given selector. The second method, querySelectors, will get the first element on the page that matches the selector.

You can also run these methods on an element to get children of a given node, for example:

var contentArea = document.getElementById("contentArea");
var codeSections = contentArea.querySelectorsAll("pre.code");

The beauty of these methods is that they're already natively supported in almost every browser. The rendering engine must use the same operations to apply the CSS styles to the page in the first place. This API provides you, the web developer, with a direct link into the ultra-performant rendering core of the browser.