Reader Question: What are -webkit- and -moz-?
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:
border: 1px solid #a9a9a9;
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!
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!