Aligning your CSS properties .... and using a few different ones
Well, that was a slight surprise. I looked at the visitors statistics for this blog yesterday and discovered that more than 70% of you are not using Internet Explorer. As a result, I have decided to ‘align’ the CSS properties that I use with the browser stats on this blog – and start using some CSS properties that I would not normally use. By this, I mean properties that are supported by Firefox and Safari, for example, but perhaps not by IE. Users with browsers that do not support these properties will still see the website perfectly fine but will not see some of the styles that are produced by these ‘more advanced’ properties. After all, websites should not look exactly the same in all browsers.
I have started the process by sprinkling in some border-radius loveliness around the site. The border-radius CSS3 property allows you to add borders with rounded corners to elements by specifying a few simple rules in your style sheet. If you have a background colour on the element but no border you will get a rounded corner box. I will describe this in more detail in a later post but here’s a nice article that explains border-radius.
This is an example paragraph with the border radius property applied. If you are viewing this with Firefox and Safari, you will see that it has a pale green background with rounded corners. If using Internet Explorer, you will see straight edges.
Using these properties gives me a chance to experiment a bit with some newer CSS features that I’m sure will become mainstream. In this case, it also means that I can implement rounded corners in a few lines with minimal effort. Result!
Related Posts
Comments
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
Vim 26 June 2009, 17:27 1
Good post, useful information, is there anyway of getting rounded corners in CSS for explorer?
Clive Walker 28 June 2009, 16:59 2
@Vim: Not by this method, no. There are many other methods of course.