CSS, JavaScript and XHTML Explained

6 Firefox 3.5 updates of interest June 30, 2009

Firefox 3.5 CSS 3 Selector Support

Firefox 3.5 was released today. Like the beta version that I tested a few months ago, FF3.5 supports all CSS3 selectors. See the CSS3 Browser support grid. This is great news, and makes us all tingly and happy, except for one thing: it means the CSS Google Chrome hack I wrote about in September also hits Firefox 3.5.

I did update the CSS3 Browser support grid to reflect Firefox 3.5 general release. All you’ll see is the pretty shade of green for FF3.5 as it does support all the CSS2.1 and CSS3 selectors.

Firefox 3.5 CSS & HTML Features

1. @font-face

   The @font-face declaration (it’s not really a property, but rather like a download) allows you to define a font face, download that font face, and then use the font family name in other font family property value declarations throughout your site.

   @font-face {
     font-family: <a-remote-font-name>;
     src: <source> [,<source>]*;
     [font-weight: <weight>];
     [font-style: <style>];
   }
   

2. media type

   Before you could target on limited criteria, such as screen, all, print. Firefox 3.5 supports more specific media queries, such as serving CSS based on color-index, device-aspect-ratio, device height and/or width, orientation, resolution, among others. We learned about some of these techniques in iphone CSS. In other words, very cool new feature for FF, but already mostly supported in Webkit, so this won’t make a good way to target just FF3.5, but it is a great way to target different devices. In addition, FF3.5 supports logical operators within the media type declaration, which is not supported by older browsers, so a hack may be coming soon.

   @media screen and (min-width: 600px) and (max-width: 800px) // low resolution laptop?
   <link rel="stylesheet" media="print and (min-width: 11in)"... // landscape printing

3. HTML 5 Features supported in Firefox 3.5

   Firefox 3.5 supports for the HTML 5 audio and video elements, offline resources and a HTML 5 drag and drop API supporting for drag and drop within and between web sites. Firefox 3.5 has improved support for canvas

Firefox 3.5 CSS2.1 and CSS3 New Features and Failure’s

Firefox 3.5 has made some improvements, but still has a way to go in supporting CSS: both CSS3 and CSS2.1. In addition to the support for @font-face and more media specificity, according to the Mozilla site, they have made improvements in the following areas (I’ll update here and on the CSS Properties and Values grid after I do more testing):

4. :before and :after updated to CSS 2.1 specs

   The :before and :after pseudo-elements did not have full CSS 2.1 support for positioning, float, list-style-*, and some display properties. see CSS Properties and Values grid. I still see some issues with this, but my CSS isn’t totally valid in my test… so need to test further.

5. opacity, text-shadow, word-wrap

   While these CSS3 (and in the case of text-shadow, 2.0 too) properties enjoyed some support in prior versions of Firefox, you no longer have to include the -moz extension in front of these three properties.

6. CSS3 properties with the -moz- extension

   -moz-box-shadow, -moz-border-image, -moz-column-rule, -moz-column-rule-width, -moz-column-rule-style, and -moz-column-rule-color are now supported in FF3.5

I still haven’t done much testing, but thought I would throw what is already known out there. I’ll be updating this page and the CSS properties and values grid when life gives me a chance.

Cheers-

-Estelle

90 CSS Properties, Values and Browser Support May 29, 2009

CSS Properties Index

Below is every CSS 2.1 Property, all the possible values for that propery, and the support for each property value from grade-A browsers

This is a work still in progress (i.e. unfinished) , but if you find a mistake, please let me know. Scroll on the table to see all the properties.

>