Well, as you might think that I’ll be talking about how to implement border-radius across different browsers, which in fact I don’t intend to do, as there are already a plenty of good examples that you can find if you do some Googling. Recently, I was playing around border-radius in different browsers and I came across some inconsistencies, which I want to document it here, I am not sure which implementation is correct in this case but it looks like some browsers have identical implementation while others have a slightly different one. Below is the screenshot of images and how all looks in browsers in different conditions, I’ll show the code and how that works across browsers.

Basic styles for the box that I used in my tests:

  
  #box {
  margin: 100px;
  width: 250px;
  height: 100px;
  }

Applying equal border-width and border-radius

 
/* basic border styling */
  border-width: 20px;
  border-color: red;
  border-style: solid;
  /* Mozilla Firefox */
  -moz-border-radius: 10px;
  /* W3C, Opera and IE9 Preview */
  border-radius: 10px;
  /* Safari and Chrome */
  -webkit-border-radius: 10px;

After applying the above styles the border on all four browsers look something like below:

As you can see in the picture above, the box has given an uniform border-radius and border-width to all borders. It appears that Firefox, Chrome and IE9 all have identical behavior/implementation, only Opera seems to have screwed it up, by the way Opera handles it fine if the border-width value is smaller; in my test I set it up 20px to have the borders more prominent, so that it becomes easier to see the effect.

Applying variable width and radius to different borders

 
border-width: 1px 1px 20px 1px;
border-color: red;
border-style: solid;
/* Mozilla Firefox */
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
/* W3C, Opera and IE9 Preview */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
/* Safari and Chrome */
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Similarly after applying the above styles the border on all four browsers look really different. I must say that IE9 and Firefox have similar implementation whereas Chrome and Opera is completely different. Here’s the image:

Another example this time with right borders:

 
border-width: 1px 20px 1px 1px;
border-color: red;
border-style: solid;
/* Mozilla Firefox */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
/* W3C, Opera and IE9 Preview */
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/* Safari and Chrome */
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Here is the image:

As you can see even though all the above mentioned browsers have implemented border-radius property still there are variations in implementations. I am not sure which implementation is technically correct, but Firefox and IE9 seems to have more elegant solution than Chrome and Opera. I would like to hear more from you regarding this, please do comment if you have noticed any other problems with border-radius.

Here’s the HTML code that I used for my tests http://gist.github.com/350379

As there’s no way to target other browsers using conditional-comment like thing then how would you do it if you ever(though unlikely) have a need to serve different CSS files to some of the modern browsers? Well, seems like I have a solution for you. Recently, I stumbled upon a code while doing “view source” (I do it all the times and have found it pretty useful), which had something different that caught my eye on. I don’t know whether this is a well documented or a known thing, but this is something I have never seen before, so I thought it might be a good idea to document it here, in case it helps someone. By the way, keep in mind that this only works in Safari and Chrome as because both browsers share the same rendering engine, so assuming that all webkit based ones will have the same behavior. Opera, Gecko and Internet Explorer do not exhibit this behavior as I have found.

It appears that webkit ignores “text/css” value of the “type” attribute of <link> tags as long as you have “rel=stylesheet”, I assume that it depends on mime-type instead of the type mentioned in the tag itself. The following code will load the stylesheet file in Safari/Chrome but none of Opera, Gecko(Firefox) and Internet Explorer( 6, 7 and 8 ) will even load the CSS file:

<link rel="stylesheet" href="/style.css" type="text/safari" />

<link rel="stylesheet" href="/style.css" type="text/chrome" />

You can have anything in the “type” attribute like “text/mycss” or “text/webkit” all will work. By the way, removing the “type” attribute loads the file in other browser’s too, so to prevent that you got to specify something different albeit an incorrect type. This is a bit whacky or clever way to target webkit specific browsers.

Finally, the question is that do you ever really need this ? I don’t think so, mostly 99% cases you don’t need to target webkit browsers specifically, they have an excellent support of web standards and my experience says that most of the things just work out of the box in webkit and gecko. So this tip is for that 1% edge cases where you might need this.

I tested the above code in Firefox 3.6, Safari 4, Chrome 4, Opera 10.50 Beta and Internet Explorer(6, 7 and 8).

CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements — particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the infamous technique in your projects.

Read the full article at Smashing Magazine, it contains a ton of links regarding CSS-Sprites, check them out, after that you should have a fair understanding of what it is, and you will be able to optimize your site, which will load faster and also saves a lot of bandwidth, by the way this will also give users a nice experience. Keep reading….

Note: But if the textarea is inside a container which itself has position “fixed” and textarea background-attachment has also set to “fixed” then you will not see any background image, the reason for this may be that IE is trying to set the background image according to viewport because of the background-attachment value. I encoutnered this problem few times but so far have not found any solution.

Further reading:

http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment

Note that there is only one viewport per view. If an element has a scrolling mechanism (see ‘overflow’), a ‘fixed’ background doesn’t move with the element, and a ‘scroll’ background doesn’t move with the scrolling mechanism.