We recently got a question from Jack, a reader of Head First HTML5 Programming, about the CSS used in the example in Chapter 3. In this example, we create a web application that creates a playlist from songs the user types into a form field on the web page, and of course, we’re using JavaScript to dynamically update the page. Jack is curious about how the CSS for the example works:

Although the CSS seems to render OK, my IDE doesn’t seem to like a lot of it. I’m using Intellij IDEA (Java IDE) which is HTML and JavaScript capable. I’m also using the current versions of Firefox and Safari (Mac OS/X, Lion 10.7.2). Of course, I’m only on chapter 3 so have no idea what the -webkit or -moz are. Do I need to include something else in my project?

What’s happening here is that Jack’s IDE, Intellij, doesn’t recognize the new CSS3 property border-radius, or the browser specific versions of this property. Here’s an example of the CSS we use in that example:

ul#playlist {
    border: 1px solid #a9a9a9;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px;
    padding: 0px;
    list-style-type: none;
}

We actually never get into explaining -webkit- and -moz- (and the other browser-specific CSS properties) in Head First HTML5 Programming, as we focus almost entirely on the JavaScript APIs, and will be going back to update our Head First HTML & CSS book to address updates in CSS.

Some of the new CSS3 properties haven’t yet been finalized (CSS3 is still very much in development) and many of the browsers implemented early versions of these new ideas, and use the -name- prefix (like -webkit-, -moz-, -o-, and -ms-) as a way to say, “This is Mozilla’s or Webkit’s idea of what the property should be, but it’s not written in stone yet.” So, to get your CSS to work in multiple browsers, you have to supply all the browser specific versions, plus the version that we think will eventually be the one that gets finalized in the standard!

Whew.

So, a new property like border-radius has a Webkit version, -webkit-border-radius, and a Mozilla version, -moz-border-radius, and so on. Webkit is the browser engine used by Chrome and Safari; Mozilla is the engine used by Firefox. -ms is for IE and -o is for Opera. The trick is to put the browser-specific versions above (what we think will be) the actual property name (in the ordering in the CSS rule) so that the browser will use the last one it recognizes, and so will override an older browser-specific implementation with the new, final implementation when it’s complete.

Not all properties have implementations in all the browsers yet, and some “final” (or close to final) versions have been implemented in some browsers (for instance, for border-radius, you can use border-radius instead of -webkit-border-radius, and it will work in the most recent version of Safari and in Chrome).

Anyway, as you can see, it’s a bit of a mess right now, but should get cleared up as time goes on. Jack’s IDE simply doesn’t know about these browser-specific properties (or, perhaps, the new CSS property at all) and so is highlighting these properties as potential problems. The key is to test in the browsers, and also check sites like caniuse.com. For example, if you search for “border-radius” on caniuse.com, you’ll see that current versions of Safari, Firefox, Chrome, and Opera all support the border-radius property now, but slightly older versions of IE and Safari either don’t support it at all or require the browser-specific property name.

In general, with CSS, if you want to use a “new” CSS3 property that may not be supported by all browsers (particularly if you think your users are still using old versions of browsers), you’ll want to make sure you either test to see if that user’s browser supports it (using Modernizr) and supply an alternative stylesheet if it doesn’t, or test to make sure that the page looks fine without that particular stylistic feature. For instance, if you are using CSS to do a complex layout then you’ll want to make sure the browser supports the layout properties you’re using and offer an alternative stylesheet with an older style layout if it doesn’t. For something like border-radius, generally, the page will look fine if your elements don’t have rounded corners so it doesn’t matter as much.

Thanks for the great question Jack!

Don't miss out!!

Don't miss out on brain-friendly WickedlySmart updates early access to books and general cool stuff! Just give us your email and we'll send you something about once a week. 

You have Successfully Subscribed!