These examples use a cool-ish relatively new CSS feature associated with border styles. The support isn't wide spread, but seems poised to become so. It uses the border-radius property which, while described in the W3C's CSS3 draft, isn't complete. This basically means that until support comes to a browser near you, (and er, more importantly, your visitors) it's probably not worth integrating wholesale into your application. Now go pitch that to the business or design folks... ugh.
That said, if you've got a compelling reason, ...one whose very success hinges upon the presence of roundy borders, and that, in the small subset of upwardly mobile browser softwares currently forward looking enough to have implemented it, well, then knock yourself out! The examples try to be smart about whether your browser supports this approach or not. And, by the nature of CSS, in the case of "not", degrades gracefully at least in the fact that hopefully it doesn't throw an error, or leave positioning related spewage strewn about to attract ridicule.
Firefox at least supports them, and so for now, that's good enough to step further into the dark swirling mists. While my own design tastes are questionable, perhaps roundy borders best serve custom dialog boxes, or very stylized designs. All I'm saying is that I've seen them popping (wow, I almost typed "pooping", which perhaps better emphasizes my point) up all over the place, and often in questionable usage. However, I've seen some very cool designs too, so I think while trendy, they are hardly out of the question -- if you've got the power to wield them wisely.
The other caveat here is that this method while in the working draft, is not finalized. Maybe I just don't get that process yet, but until it's final, doesn't the concept of "can change" still apply? So, what conservative browser manufacturer would program support for them when the rug may get pulled out from under them (consider the IE box model fiasco that still plagues us... regardless of which side of that particular electrified fence you may have your picnic set up on).
Further, Firefox offers only partial support. If you compare the language in the W3C draft with what's rendered on your screen in Firefox (assuming that's what you are viewing this in... BTW, sorry to the 80% of you that I've just alienated. Uh, I'd like to point out that this 20-80 approach is a bit bassackward and doesn't represent the weight of my work so please, if you are going to dismiss me as a crank or crack pot, do so on the basis of my words, and not on my bastardization of the hallowed 80-20 rule.)
Still if the axiom that possession is nine-tenths of the law holds any truth, it seems like this "roundy" CSS3 methodology is a good investment for the future... at least certainly better than some of the convoluted (maintenance nightmare inducing) solutions I've seen offered as an alternative. Don't get me wrong... I like innovation. In my career on the web though, I've noticed a shift as teams I've worked on have iterated through projects from nimble/futile to encumbered/insulated (a whole notha' rabbit hole). Right or wrong, adopting approaches that "just keep working" seems the wisest course for web veterans, professionals, and amateurs alike. If we apply a simple scoring system, then using an approach where (+1) CSS is used to achieve the goal, and (+2) CSS which appears in a W3C draft, and (+3) CSS which has at least instantiation in one -- contending browser, appears to be possessing at least of a certain method in it's madness.
Here are the examples. If these suit your purposes, all the better, if not, hopefully you've at least eliminated an avenue from your search criteria. I'd appreciate any feedback you feel inclined to give (particularly if it's useful ;-) If you look close you'll notice some discrepancies with the language in the W3C draft, and how it's actually implemented even within Firefox (again, I point back to the idea that this isn't finalized.) But then as my friend's friend, Egyptian News Fred says, "If we don't do stuff... the folks who talk about doing stuff will never have anything to talk about." So, while only slim, partial implementation exists, "it's something" and "it's something that will work better and better as time goes by."
|
|
|
|||
|
|
|
Here's the code for the example (or, just view source for this page if you don't trust your browser not to translate the source into it's own linguo.)