The biggest problem with calc() right now is that it is not well supported. Firefox supports it with the ‘-moz-’ prefix, and Chrome will add support in version 19 with the ‘-webkit-’ prefix. IE9 has support for it, un-prefixed. Because of the vendor prefixes, I’m guessing for now, cross browser syntax would look something like this.

#foo {
width: 200px;
width: -webkit-calc(50% - 100px);
width: -moz-calc(50% - 100px);
width: calc(50% - 100px);
}

In the above example, I provided a fallback for older browsers first, followed by the 2 vendor prefixed versions and finally the un-prefixed version. See the gist here.

While thinking about using calc(), I wondered if Modernizr had a test for it. I was sure it must but discovered that it did not. While it looked like someone tried to add a test, it was missed. So I contacted Paul Irish and asked him about it, and he worked with the original developer to add the test. You can now run the test in Modernizr to see if it is supported and write different CSS rules based on that. But you still need to provide and fallback and use the vendor prefixes.

It also got me wondering about how calc() would work in a language like Sass. I’m assuming you would just write it out and it would work, but since Sass has it’s own method for doing calculations, it’s worth exercising caution.

I can’t wait until we are able to use calc() to calculate values in CSS. It’s the first step to being able to use something like Sass in the browser. But until it is well supported, it requires you to write multiple rules. If you are opposed to that, you should stick with Sass or Less which do the calculations and conversion for you.

After two years of regular updates, we’ll end our support for Firefox 3.6 on April 24th. In the years since Firefox 3.6, we’ve make incredible improvements to Firefox, including phenomenal HTML5 capabilities, Firefox Sync, faster JavaScript performance, support for the Do Not Track header, and an easier, quieter update process. Barring any major stability or security issues found over the next few weeks, Firefox 3.6.28 will be our last 3.6 release.

Firefox 3.6 was released on January 21, 2010. They also announced that the minimum supported Windows version will change to Windows XP SP2 in Firefox 13.

via Upcoming Firefox Support Changes | Future Releases.

This tutorial shows you how to calculate percentages with the percentage function in Sass and also how to write a custom function in Sass to convert pixel values to ems.

Responsive Web Design in Sass Part 1: Fluid Layouts and Fluid Images – Intermediate.

You should be using Sass already because it supports variables, functions and nesting. But if you’ve been holding out for some reason, now you have another reason to use it. This is the future of CSS.

What I do know for certain is this: H.264 is absolutely required right now to compete on mobile. I do not believe that we can reject H.264 content in Firefox on Android or in B2G and survive the shift to mobile.

via Video, Mobile, and the Open Web ? Mozilla Hacks – the Web developer blog.

via It’s time to start using JavaScript strict mode | NCZOnline.

via 0to255.

Firefox 11 Release Notes – Desktop

We hope we can illuminate why W3Schools is a troublesome resource, why their faulty information is a detriment to the web, and what you (and they) can do about it.

http://w3fools.com/

I admit that I have used W3Schools a lot as a resource for JavaScript, but I also know that the info is a bit dated and plain wrong in many cases. But someone just starting out may not know that. This site along with Promote JS is designed to dislodge sites like W3Schools from their rankings in Google and promote more up to date and accurate resources.

One tip…

To filter out w3schools from your searches, add -w3schools. Meanwhile, to get results from the Mozilla Docs Center, just prepend mdc.

Google might even take notice of behavior like that and demote these sites in the rankings.

I predicted this here.

This is obviously a response to Google Chrome releasing a new version every six weeks. Chrome is eating Firefox’s lunch. Maybe not in overall marketshare, but Chrome is definitely faster. In the browser market, faster is better. People are noticing this.

Also, developers are shifting to Chrome, and I would argue that developers were a big force in pushing adoption of Firefox. Chrome is helping itself in this area by having native dev tools and focusing on improving those tools.

Firefox 4 was in development for over a year with the release date slipping multiple times. Firefox could simply not continue on it’s current path and stay relevant in the current market.

Firefox 4 is set to be released on March 22, 2011. Versions 5, 6 and 7 are also currently planned for release in 2011.

Modern Browser Development Timeline