There are a number of ways to "skin" an HTML element. Here I demonstrate each of the techniques that I am familiar with and examine some of the pros and cons of each method. All of these methods allow the element being skinned to be an arbitrary size. You can see this for yourself by changing the viewport width and/or text size. These examples have been written with clarity and ease of understanding in mind and are therefore far from optimal.
| display: table | multiple backgrounds | nesting | positioning | table | |
|---|---|---|---|---|---|
| Firefox | Yes | No | Yes | Yes | Yes |
| Opera | Yes | No | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
| IE6 | No | No | Yes | Yes | Yes |
| IE6 with transparency | N/A | N/A | No | Yes | Yes |
| IE6 needs extra CSS?* | N/A | N/A | No | Yes | No |
| IE6 extra CSS size in bytes, gzipped** | N/A | N/A | N/A | 209 | N/A |
| IE7 | No | No | Yes | Yes | Yes |
| IE8 Beta | Yes | No | Yes | Yes | Yes |
| Transparency works generally*** | Yes | No | Yes | Yes | Yes |
| Additional markup per element in bytes, gzipped | 125 | 0 | 130 | 118 | 149 |
| CSS size in bytes, gzipped | 402 | 257 | 324 | 487 | 360 |
| Total size in bytes, gzipped | 527 | 257 | 454 | 605 | 509 |
* this is apart from CSS to allow IE6 to show PNG files with alpha tranparency. IE6 always requires either extra CSS or JavaScript to show alpha transparency.
** not included in total size below.
*** by generally I mean the technique does not break in browsers that support alpha transparent PNG, aka all of the ones listed above except IE6
This article is part of nrkn.com