Cross Browser CSS Calc()

This post on CSS calc() on HTML5Rocks got me thinking about how I could use calc() and have it work cross browser. Calc() will be a valuable feature in CSS3 once it is supported. The biggest thing it allows you to do is mix percentage and absolute values as well as mix sizing units.

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.

Firefox Dropping Support for 3.6

Firefox is forward thinking.

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.

Sass Makes Responsive Design Easier

If you are familiar with concept of Responsive Web Design, you should also understand fluid layouts. Sass, the CSS pre-processing language, has a few features to assist you with calculating values for fluid layouts.

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.

Firefox Commits to Supporting H.264

Mozilla finally came to their senses and realized if they want Firefox to be relevant it has to be on mobile phones, and it has to support H.264 video.

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.

W3Fools – A W3Schools Intervention

A very interesting resource I came across last night,

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.