I downloaded the first alpha of Shiretoko, or Firefox 3.1, and I’m delighted to see the text-shadow I have attached to my site name showing up in a Firefox browser.
Not just text-shadow, Mozilla has also added JavaScript query selectors to this release, which means that we can query for all elements of a given class name, such as:
var list = document.querySelectorAll(".elements");
A behavior that we also had with the older, supported, document.getElementsByClassName. However, we couldn’t do the following with getElementsByClassName:
var first = document.querySelectorAll("div > p:first-child");
for (var i = 0; i < first.length; i++) {
first[i].style.backgroundColor="#f00";
}
This code snippet accesses the paragraphs that are directly the first child of any div element, using the CSS selector syntax, and sets the background of each returned element to red. You can see it in action with this simple example containing three div elements, each with three paragraphs, the first of which now has a red background. Well, you can see it with browsers that support querySelectorAll, which are Safari/Webkit, IE8, and now Firefox 3.1a. Opera has also committed to the support of querySelectorAll (as well as rgba, we hope).
Of course, I can do something like this with JavaScript by getting all div elements, and then all paragraphs of all div elements, and then accessing the first of the returned set, but how much simpler, and how my more robust will this process be if this type of functionality is built directly into the browser. Especially since my example is quite simple, but other queries on CSS selectors could be quite complex.
Firefox 3.1a also has support for border images, which means no more nested div elements to achieve specialized borders, which is what’s used in the design of this site. However, support for this CSS3 attribute is limited to Firefox 3.1a and Safari; until support for the option reaches three of my four target browsers, I won’t use it for my site designs.
(I felt comfortable using the text-shadow when only Opera and Safari supported the CSS attribute, because it provides such a nice effect, which degrades beautifully if the attribute isn’t supported.)
Firefox 3.1a also supports the HTML5 Canvas Text API, but I haven’t had a chance to play with the new capability, yet. I had rather hoped that the Mozilla team would add a little SMILe to the browser, but I guess it’s not to be with this browser release. Perhaps our man on the SVG street, Jeff Schiller, can update us on a SMIL timeline for the browser.
Oh, and look: anyone can try the browser and report a bug.