Home

CSS support in Firefox 3 and Opera 9.5

Submitted by Schalk Neethling on Mon, 2008/06/16 - 7:53pm
  • Delicious
  • Digg
  • StumbleUpon
  • Reddit
  • Technorati
Tags:
In less then 14 days both Opera and Mozilla released the latest and greatest version of their browsers, Firefox 3.0 and Opera 9.5. So with regards to improved CSS support, what can we as developers look forward to once the user community upgrades?

Instead of positioning the two browsers against each other and only looking at a specific CSS recommendation level, I will cover the improvements both browsers has made. Unfortunatelty, even though I said I am not going to focus on specific version of CSS, it was much easier for me to find exactly what improvements or enhancements was made with regards to a specific recommendation with regards to Opera, I am  first going to cover what Opera brings to the table in terms of enhanced CSS support. Following this I will mention what improvements Mozilla has made with Firefox 3. My appologies if I miss anything with regards to any improvements made by any of the two browsers. Please add your comments. With that said, let me start with Opera 9.5, only because it was released first.

With regards to CSS 2 and the 2.1 Opera support all of the recommendations except the following:

For CSS Level 2:
  • These properties: font-size-adjust, font-stretch, marker-offset, marks, and text-shadow,
  • The list style types cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha.
  • These property/value combinations: "display: marker", "text-align: <string>", "visibility: collapse".
  • Named pages (as described in section 13.3.2).
  • The "@font-face" construct.
  • The :lang() selector


And for what was added during the CSS 2.1 iteration, besides the above Opera does not currently support the following from CSS 2.1:

  • visibility: collapse and white-space: pre-line property values

Other then those Opera offers complete support of all the recommendation for CSS 2 and 2.1 but, what about CSS 3.0? Opera 9.5 supports the following from the current CSS 3.0 spec:

Media queries

This works similar to the conditional comments many of us have used to target IE but in a standard way, for example. If you want to apply specific CSS styles if the screen size is less then a specified amount you would wrap the part of your CSS code to be executed by a @media tag. So for everything that does not fit this scenario the CSS is:

img {
  margin: 10px 0 10px 10px;
  float: right;
}
But if it does the following CSS will be applied:
@media all and (max-width: 360px) {
  img {
    margin: 10px auto;
    float:none;
    display:block;
    font-size:70%;
  }
}

I can immediatelly see the usefulness of this, especially when developing your application to be accessible by various devices. Can anyone say, Bye, bye JavaScript sniffers?

Text Shadows

I have not been aware of this CSS property until recently when I did some development fot the iPhone and came across this used in the iUI library. This means you can add drop shadows to your HTML text without needing to resort to text replacement to get text with drop shadows. How does this look in CSS?

h1 {
  text-shadow: #555 3px 3px 4px;
}

So the first property is obviously the color of your shadow and then the left/right, top/bottom location and the amount of blurring.

Background Sizing

What the heck is this? Well, instead of text breaking out of your nicely designed rounded corner box would it not be nice if it scaled with your content? If you add a -o-background-size declaration to the div rule, you’ll end up with what is knows as backgrounf sizing. Please note however, Opera is still using an experimental version of this, hence the -o- prefix. Webkit and KHTML also have experimental implementations (using their -webkit- and -khtml-prefixes)

Opacity

This is so awesome, I cannot wait for all browsers to support this, and it is as easy to use as:

div {
  opacity: .5;
}

HSL

A new color space for specifying color values on the web, Hue, Saturation and Lightness. You have had this option available in Photoshop forever now, Opera brings it to the web via CSS3's support for HSL. Why HSL? It overcomes RGB by not being affected by hardware, and being much easier to predict. In CSS it is implemented as follows:

div {
  background-color: hsl(240, 90%, 50%);
}

overflow-x and overflow-y

I personally find that this a feature we should already have access to but alas, we have to wait untill support is wide enough. But why? Right now you just say overflow:hidden etc. but what if you want to control overflow in a specific direction? Currently you have no option in this regard. With CSS3 and in the latest release of Opera you can control overflow in either direction, whether it be top or bottom, right or left.

nav-index, nav-up, nav-down, nav-left and nav-right

This is an awesome accessibility feature and these properties allow you to specify which element will be given focus when the user presses navigation keys on the keyboard. This is especially useful when elements are absolutely positioned and does not follow each other in the HTML source order.

The first-of-type selector

Currently if you want to create a drop cap effect you enclode the character inside a <span>. You may also have given a class to a paragraph tag and then used the ::firstletter pseudo selector to create this effect. No more do you have to suffer these work arounds, in Opera 9.5 you can use the first-of-type selector as such:

div.article > p:firstof-type::firstletter { }

Opera 9.5 supports many more aspects of the CSS specification ranging from 2.0 to 3.0, for a detailed account please read the CSS3 support documentation on Opera's website.

Now as far as Firefox 3 is concerned I could unfortunately not find as detailed information on it's support for the above features but, from the pages of the Mozilla site, these are the enhancements in Firefox 3:


With these new browser versions released and the beta 2 of Internet Explorer 8 due out in August this year it seems that web developers can look forward to a much less frustrating design and development cycle and can start to look forward to the days when cross browser hacking and conditional comments are gone and we can take advantage off all of the awesome new features available in CSS 2.1 and 3.0.
0

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)