Working together for standards The Web Standards Project

I was a relative latecomer to the social bookmarking sites such as del.icio.us and digg, and even now I would not class myself as a regular visitor or power user. As a result I’m not sure that I properly understand the patterns that drive the results on these sites or appreciate exactly how it is that one web page/tutorial/news item gathers momentum while other gems remain undiscovered by such sites – so every now and then something pops up and surprises me. What’s surprised me today is how over 2000 people on digg (currently) found this worth a digg – Spiffy Corners.

Tell me, what is spiffy about this markup?

<div>
<b class="spiffy">
<b class="spiffy1">
<b></b>
</b>
<b class="spiffy2">
<b></b>
</b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<div class="spiffy_content">
<!-- Your Content Goes Here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2">
<b></b>
</b>
<b class="spiffy1">
<b></b>
</b>
</b>
</div>

All this to achieve a rounded corner effect? I feel kinda bad to dis it rather than digg it – the creator Greg Johnson has obviously tried to create a simple way for people to implement this effect, and it is very quick to generate – but, as many of the commenters on digg have stated, it’s whole lot of non-semantic markup being generated here. CSS can do many things, but it needs to be paired with good, rock-solid and valid (X)HTML. Validated markup alone is not enough – semantics are important too (arguably more important).

Your Replies

#1 On April 5th, 2006 6:01 am Michael Eichelsdörfer replied:

Yes,yes,yes! This markup is horrible!

But maybe it’s fine for those who see web standards as additional marketing keywords only. (There are many of them out there…)

#2 On April 5th, 2006 7:07 am Keri Henare replied:

It’s digusting. It’s not really any better than using tables for layout. Personally I’d rather have good markup than rounded corners. If you do want rounded corners try Nifty Corners Cube it’d be so much better.

#3 On April 5th, 2006 7:18 am sn replied:

I dug that particular item myself because the description sounded interesting and I wanted to have a bookmark of it so I could take a look later. After visiting the site though I promptly undugg it in my digg profile. In my opinion the coding practices Greg Johnson used in order to create his effect will actually be doing more harm than good in terms of trying to get people to understand the worth and significance of markup that is valid and semantic. For me, visual appeal will always take a back-seat to constructing a site that is semantic and valid first and foremost.

#4 On April 5th, 2006 7:20 am Mike Cherim replied:

Neat tricks aren’t necessarily good tricks, not when the price of admission is that which we see above.

#5 On April 5th, 2006 7:52 am Blair replied:

Agreed. Of course, there are always going to be those who bastardize something good, bending it to their own will, and in doing so, creating a monster.

Solutions like this do much to destroy and discredit everything we’ve all worked so hard for. For anyone learning by example, stuff such as this leaves them no better off than if they were to look at tables-based sites for their knowledge, and yet, they can claim to be following web standards, and using “tableless” techniques, and clients… well… clients won’t know the difference, especially those looking to fresh (and therefor often cheap) “talent” to complete their projects for next-to-nothing, yesterday.

That being said, while I think we would all agree this is a terrible solution, where do you draw the line between “necessary” and evil? Had those been “span’s” or “div’s” instead of “b’s,” would the complaint be as loud? What if they’d be added via DOM scripting, but were still “b’s?”

#6 On April 5th, 2006 8:06 am Stephen Clay replied:

1. The avg Digger isn’t a semantic HTML expert.
2. The author made it easy to adapt for your site in 2 seconds. Most people writing up best practice techniques lazily force people to dig through the source and figure it out themselves.
3. The author points out other better-practice methods.
4. There are much worse crimes against semantic markup than a few empty B elements and it does what it says on the tin: no Javascript, no messing with images.

This is really a lesson for tech writers: If you want your techniques to be used by the masses, step up and create easy-as-pie generators. The technology even exists to generate on-the-fly images for techniques like Thrashbox, but we aren’t doing it.

Writers often have the attitude that everything should be left as an exercise to the reader (and, damn it, we had to learn that way), but even the best programmers use code generators and templates.

#7 On April 5th, 2006 8:14 am Baxter replied:

Bah. Digg users have shown time and time again they don’t know squat about css, xhtml, semantic markup or standards. To their credit, Slashdot is no better.

#8 On April 5th, 2006 8:37 am Jules replied:

And I thought divitis was bad!

#9 On April 5th, 2006 8:49 am WaSP Member lloydi replied:

Stephen, I totally agree with you about generators – the more no-brainer they are, the more likely they’ll be successful and used. Banging on about theory is all well and good, but the people who you might want to benefit from learning it the most will have left long ago and found some other tool that does what they want – as in the visual effect they are after – but in double-quick time. From that point of view, hats off to the guy. It is a lesson for tech writers.

I was disappointed to learn that the average digg reader doesn’t get standards. I always saw it as far more standards-aware than, say, slashdot. And to some extent that’s why it bothered me that so many people dugg it – it shattered my illusion!

#10 On April 5th, 2006 10:11 am Robert Wellock replied:

Extremely malformed use of presentational markup if nothing else.

#11 On April 5th, 2006 12:48 pm Heather Wright replied:

This article reminded me of http://www.eastsussex.gov.uk/ and a solution one of the web developers came up with to render rounded corners. Looking at it always made my head hurt.

The CSS

/* corners */
div.roundedBox { background: #ddddca url(/eastsussexcc/pics/template/corner-tl.gif)
no-repeat 0 0; width: 100%; }
div.roundedBox div { background: url(/eastsussexcc/pics/template/corner-bl.gif)
no-repeat 0 100%; }
div.roundedBox div div { background: url(/eastsussexcc/pics/template/corner-br.gif)
no-repeat 100% 100%; }
div.roundedBox div div div { background: url(/eastsussexcc/pics/template/corner-tr.gif)
no-repeat 100% 0; padding: .5em; }
div.roundedBox div div div div { background: none; padding: 0; }

The HTML

<div class="roundedBox homeBox"><div><div><div>
<h2>Top five forms</h2>
<ul>
<li><a href="/educationandlearning/schools/findingaschool/casualadmissions/eform.htm">School
admissions during the academic year</a> </li>
<li><a href="/leisureandtourism/localandfamilyhistory/esro/research/">County
Record Office research service</a> </li>
<li><a href="/educationandlearning/schools/findingaschool/appeals/">School
admissions appeals</a> </li>
<li><a href="/community/registration/changename/default.htm">Changing
your name</a> </li>
<li><a href="/atoz/forms/default.aspx">More forms…</a>
</li></ul>
</div></div></div></div>

#12 On April 5th, 2006 1:26 pm Thomas Tallyce replied:

@ Heather:

The question is – what is the best solution given the lack of CSS3 browser support?

Personally I’d say their solution, using the admittedly iffy:

isn’t actually too bad. It only requires three superfluous div’s and reasonably simple and self-explanatory CSS.

Given that the alternative is presumably nested tables, if the designer *requires* the use of rounded corners for 100% of users rather than the 10% with Firefox et al, isn’t this a reasonable compromise?

#13 On April 5th, 2006 2:19 pm Zachary replied:

Wow… It’s rather interesting that a topic would be started on this, just after I’d decided to use it for my new website design.

I’m using it to round off the bottoms of some navigation tabs I’ve made. Normally, I love being correct in my semantics, syntax, css and all other forms of code. The Nifty Corners example that Kerri mentioned is a great way to have the rounded corners without messing up the page’s markup. However, I am going for a site that does not loose functionality or appearance due to the lack of javascript or restriction thereof.

I’ve decided to add in the tags to my page, accepting a little bloat for skipping on the use of javascript. I’ve got a server-side script setup so that only browsers like Opera, Firefox and IE (Excluding 5.5 on Windows and 5 on Mac), will get the extra code to show the rounded corners. Text-based browsers, screen readers, and older browsers (Less than or equal to version 4) will either square tabs or just old fashioned plain text.

Forgive me if I sound crazy, but I am a young aspiring web designer trying to find a balance between proper markup and appearance. Little touches, like these round corners truly appeal to me and my style of design. If anyone manages to find another solution without the use of javascript or images and using symantically correct markup, please let me know!

~ Zachary

#14 On April 5th, 2006 2:23 pm Zachary replied:

Whoops, sorry. I didn’t mean to make that all bold…
It should have been “I’ve decided to add in the <b> tags to my page,…”

#15 On April 5th, 2006 4:06 pm Britney replied:

Tagging sites became popular when spammers relized the potential of having back links from sites like digg reddit technorati suprlicous delicious etc etc and now Yahoo has My Web 2.0 Bookmarks as well. And now adays everything has an import/export feature mostly via delicious so adding sevral thousands sites is as quick a pressing the import button. Some spammers go as far as looking for high value tags such as Google Computers etc in order to better there rank value as well. But it does not stop there either most tagging websites have rss feeds, so then spammers go and sign up the feeds at aggreggator services like suprglu bloglines etc etc thus giving them that many more back links. Thought you should know why these sites were becoming so popular since you did not know Ian !

#16 On April 5th, 2006 4:27 pm WaSP Member agustafson replied:

Amen, Ian.

I posted on the topic a while back. It really boggles the mind what some people consider OK. It’s like they think because it isn’t in the markup of the page before their script runs that it isn’t “really” there. Such rubbish.

For DOM Scripting and Accessibility to go hand-in-hand (as indeed they should), people need to be cognisant of what code they add to the DOM via scripting.

’nuff said.

#17 On April 5th, 2006 5:41 pm Andy Saxton replied:

I know what you mean about rounded corners and the extra markup. Looks like they use the same method over at Technorati though:

..Snipped code…

From Homepage.

These tags may be being added after with js but I’m not sure.

#18 On April 5th, 2006 5:42 pm Andy Saxton replied:

Apparently it trims HTML code examples. No matter.

The code is on view in the main page of Technorati on most divs.

#19 On April 5th, 2006 5:43 pm Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Am I Spiffy Or Not? replied:

[...] Am I Spiffy Or Not? – a question posed over on the Web Standards Project by Ian Lloyd. [...]

#20 On April 5th, 2006 5:54 pm Dustin Diaz replied:

I linked this off my del.icio.us a week back and had the same thoughts. It may be worthy of a blog entry as a hacky way to get rounded corners, but not a whole domain. I share your thoughts Ian.

#21 On April 5th, 2006 6:25 pm mattymcg replied:

What’s worse is not that the markup is ugly, but that it is a direct, unmodified rip-off of Alessandro Fulciniti’s Nifty Corners (the markup that his JavaScript files generate). And that the “author” is encouraging people to give him money for his “hard work” via a Donate link.

#22 On April 5th, 2006 6:36 pm Damien replied:

Wow, bad, bad, bad

#23 On April 6th, 2006 7:20 am Richard replied:

OK, OK.

If:

1. the code used spans (or similar) instead of b tags
2. it was all added with DOM scripting
3. it was all kept to a minimum

would it go ANY way towards being more acceptable?

Or are ALL non-semantic elements pure evil? (Thinking about it, I think there’s a lot more of them around than I think some of us are willing to admit… maybe not bold tags used in this way (essentially harmless?) but certainly plenty of spans and divs that are only there to act as hooks for styling purposes…)

Either way, “It’s digusting. It’s not really any better than using tables for layout.” seems a bit over the top. Save your energy for the real struggles out there – there’s more than enough.

#24 On April 6th, 2006 5:52 pm Chris Neale replied:

Squiffy Markup more like …

I have had my own attempts – and iirc I didn’t need that many extra boxes (possibly, no extra boxes) : http://www.elogicom.com/c/sp/

Notes: I can make things do things, they don’t necessarily end up beautiful

I may not be 100% semantic

I try

#25 On April 6th, 2006 5:59 pm Chris Neale replied:

Plus [the one with extra boxes] DOM-added corners via single background image on the product image

#26 On April 12th, 2006 5:48 pm Tyler replied:

I dont see a problem with inserting presentational elements via DOM. the only people who will recive the extra code are modern desktop browsers.

#27 On April 26th, 2006 6:02 pm hwright.net » Standards… are we getting off-topic? replied:

[...] Everyone says “the site needs to be developed using standards” but are some people forgetting what the point was? Separation of content and presentation. HTML – produce content. CSS – layout the content. So, in all the fuss over content and presentation, I guess some forgot about the other part of websites — Functionality. There is a reason there is a difference between a web designer and a web developer. The web developer adds functionality through any number of technologies available to them. So why is Javascript being lumped into the the design side? Just because it can access the DOM model and modify presentation doesn’t mean it’s a good idea. Webstandards.org had a post on Spiffy Corners a little while ago. The comments from that post discussed other hacks like Nifty Corners and semantics. I won’t rehash it all, but it’s worth a read if you are hazy on the topic. [...]

#28 On April 29th, 2006 12:30 am Max Design - standards based web design, development and training » Blog Archive » Some links for light reading (5/4/06) replied:

[...] Spiffy markup? [...]

#29 On May 10th, 2006 2:33 pm Web Design and Development » Blog Archive » Spiffy Corners replied:

[...] I found it on WaSP, as Ian Lloyd was lamenting its redundancy and non-standards markup. [...]

#30 On May 18th, 2006 6:47 am Helen, design manager replied:

I think that amount of html codes will make the maintenance a nightmare! Better use some images.

#31 On June 27th, 2006 6:54 pm Frank replied:

I don’t give a shit about semantics or what have you. what it does is create a simple way to put content inside of a rounded box on a page…cool, thats just what i want. visitors to my website are not going to care how.

#32 On August 5th, 2006 3:53 pm Scott Tankard replied:

I agree the markup is nasty, however I feel it’s still a step up from tables (I mean… at least it fits in thirty lines).

I hope the border-radius and gradient CSS stuff Mozilla has prototyped is accepted into the W3C specs — soon!

#33 On September 18th, 2006 2:44 am Greg replied:

I’m a little late to the party, but I thought I would chime in:

There is a lot of ignorant nonsense in this thread about how this is a ripoff of Nifty Corners and such, but if you actually read the page at spiffycorners.com you’ll see exactly what and why.

I didn’t create the technique, and I don’t pretend to. As for the donate link, It’s for the extreme amount of bandwidth the site uses – and it was suggested by people visiting the site, not myself.

I think it’s a little silly that it has caused so much controversy though. To say I wish I never created it would only be half truth. I mean, it’s uses on youTube (view the source of any page on youTube and scroll down just a short ways) and that’s kind of cool. But it’s got everyone in such a hissy.

#34 On March 9th, 2007 5:17 pm Chip Peterson replied:

So, in the end, what is the best way to create rounded corners without using images and still be W3C compliant? I have friends that know html are are asking me all the time I want rounded corners because they look so nice. They don’t know much about Photoshop and graphics and they want to adjust everything by themself.
This seems so complicated I better create the images for them than try to explain what is in here.

#35 On March 18th, 2007 12:50 am stk replied:

Nope, the code is not very spiffy, but it does work as advertised and thanks to social bookmarking, has achieved a certain degree of notoriety.

I typically weigh the XHTML/CSS footprint and semantics against the benefit or wow-factor of a spiffy technique. For me, the footprint is too large, the code isn’t elegant and the semantics are horrid. For me, the ends do not justify the means.

For others, the ends are all that matter. To each his own, I guess and hats off to the author for “finding a way”.

However, until I can find a nicer way, all my corners will be square (at least, for liquid designs).

I do hope that the W3C utilizes the feedback – an easy, semantically-correct, light-weight method of rounding corners for block-level elements will be well received! :D

(And the funny part? When I first looked at both Spiffy and Nifty, I was sure they would fail validation. Color me converted, but I thought the <b> tag was long gone.) :p

Post a Reply

Comments are closed.