However, I am following along via Twitter, and saw this announcement by Jeffrey Zeldman, web design godfather and co-founder of An Event Apart:

.@simplebits just unveiled Pears pea.rs, an open source web design pattern library/WP theme. #aea

Pea.rs looks like a convenient little tool for web designers to bookmark, a library of sorts where commonly needed HTML/CSS patterns for common page elements like navigation, lists and such can be quickly grabbed and used. I’m sure you’re all so amazing that you don’t need it for your markup, but I also think for prototyping some page elements this might be a good resource to go-to to quickly grab and paste. You might also find a few new ideas on how to arrange your markup or CSS, too.

Check it out.

In a perfect world, Ethan Marcotte would star opposite of me in a web design-themed, buddy cop action comedy called Beep and the Squirrel.

Actually… I’m writing that one down, just in case.

Until that glorious moment, I’ll enjoy his raw intellect and seasoned wit while envying his creative talent in a suitably stalker-like fashion. (Unless you’re reading this, Ethan, in which case I assure you that I am in no way digging through your refuse bins looking for cast-off brilliant ideas and toothbrushes.)

While we’re in the vein of borderline creepy idol worship, I’m going to agree with Ethan’s succinct tweet on the W3C’s CSS Conditional Rules Module Level 3 Working Draft (which I’ll reduce to the much easier to remember abbreviation “CCR Module”, hereafter nicknamed the “More Cowbell” document). I feel cold.

I’m still perusing the document. Although any judgement leveled while shooting from the hips (hello, ladies) is bound to be rife with bad summaries and skewed views, in my opinion the module doesn’t seem to solve any problems that aren’t already being solved in a better fashion by good CSS practice or other techniques. It’s a lazy man’s shortcut to “supportin’ olla them thar browsers”.

As Dylan Wilbanks said, these aren’t the conditionals I’m looking for.

Just look at @supports, for the love of cheese (or dairy-free cheese alternative for vegans and the lactose intolerant). It lets you test if a browser supports a feature, before (in their examples) you then go and use the feature. What? How bizarre is that? I know in their examples you can get far trickier with not and or and doogie howser, but seriously?

When it comes to the problems that CSS is supposed to solve, although @supports and its ilk would work, they seem to encourage bad or unnecessarily laboriously bloated CSS documents instead of streamlining the process. And when it comes to @document I believe that the authors are trying to make CSS solve problems it wasn’t intended for.

Look, if you’re trying to get your CSS to be flexibly supported across different browsers and devices, I recommend checking out Ethan’s Responsive Web Design, or at least actually using your skullmeat instead of slapping shoddy shortcuts into your CSS. Capiche?

I’ve used border-radius quite a bit. As far as CSS3 goes, it’s one of my go-to styles for making something look snazzy. Just round it and it’s cool, right? Right?

While working on an internal project for Mindfly Studio, I found myself grabbing this particular tool for rounding the thumbnail images that were attached with a list of article briefs. When I went to test the results, I found to my dismay that the images were square still, with the rounded borders cutting behind the square of the image.

Then I remembered that I’d encountered this particular issue before. No problem, I thought to myself. Just wrap that bad-boy in a div (or in this case, an anchor that already existed around the image) and use border-radius on the wrapper. Perfect! Right?

No, sadly.

At this point I felt like my CSS cred was rapidly drying up, and started debating going by JSONSquirrel instead.

“To the cloud!” I pronounced, feeling inclined to abuse buzz words, and fired up Twitter. I was informed this was an issue with Firefox (my browser of choice. I like big butts and I cannot lie) but that it’d be all peachy in Webkit (also known as Apple Browser Jesus in web designer circles).

But as it turns out, Webkit also does it wrong. Less wrong, but wrong.

Here’s my proof: border-radius test page.

What Webkit does correctly is round the corner of the image itself (when the border-radius property is set for the image, but not the wrapper), but it clips the border if one exists. If placed in a wrapper, like Firefox, it fails altogether.

I tested on the following browsers: Safari 5, Chrome, Firefox 3, Firefox 4 Beta, Opera 10.63, Internet Explorer 8 and Internet Explorer 9 Beta. It’s no shock that IE8 didn’t do what I wanted, as it doesn’t support border-radius at all. Although, humorously enough, their outright failure to round the border (while leaving the image square) was still more aesthetically pleasing than the clipping/overlapping that were the results in Firefox, Webkit and Opera. And yes, Firefox 4 Beta also failed to round the corners as I desired.

Unexpectedly, IE9 Beta did exactly what I desired, which was rounding the image with the border intact (and rounded) with it. The only one, in fact, to do so. That was a shock.

Maybe I’m expecting this property to do something other than its actual purpose. That said, wouldn’t an image tag be the most likely case of an element that you’d want a rounded border to work properly with? It certainly is for me.

I’m aware that setting a background-image on an element and rounding it is a workaround that functions perfectly. However, if styles are turned off, you lose the image. What if you want the actual image present regardless of whether CSS was present? Well, at present, go with square corners, it seems.

If someone more clever than me comes up with a way around this that is CSS-based (and not overlapping it with a PNG with a rounded hole in it or some other such workaround) then please let me know. I’d be really curious to see how others tackle this shortcoming.

If you’ve got a better method, please tell me in the comments. I’m open to new and strange things, like Texan sushi.

At least one of which is the entire lack of kangaroo steaks.

My apologies to the vegetarians among you.

There’s two non-restaurant related points to the comic. The first is that almost everything I know about Australia I learned from Crocodile Dundee. Which means that large knives, boomerangs, and poisonous animals are everywhere. The second (and more relevant) point is that I am more than a little annoyed at the task of vertically aligning text with CSS. And clearly, John agrees with me. But, naturally, when he discusses the point it sounds so much cooler because of that dreamy Australian accent.

Let’s get to it. CSS has been around in some shape or form since, what, 1994? And most of the early web was all about text. Red text. Blue text. Flashing text. Marquee text. Text that was occasionally on fire with a sword going through it. Epic, taste-shatteringly bad text. In the entire intervening generation since, why has nobody in a position to do something about it said, “Hey, if we want to vertically center more than one line of text… how do we do that?”

Really, why? How wild and crazy is the concept that you may want to vertically align a paragraph of something in the mouth of a giant robot, or otherwise arrange it delicately between two slices of bread?

I’m aware that I can center text vertically inside an element that’s been given display: table-cell. And when the need arises, I’ve even used it. But it leaves my mouth tasting almost as bad as it did the day I chewed on a tiny blue plastic donkey I found in the playground when I was five. It’s the kind of rancid, oily taste that ruins your meals for the next several days. No, really. Kids, don’t chew on blue donkeys.

What if I want an inline-block? What if I don’t want all the behaviors of a table-cell? What if I hate tables with such a passion that I’d rather eat my meals while standing rather than bring back memories of table-based layouts with either using a CSS style that imitates them or eating on a wooden surface that shares a name with them? Huh? What then?

Well, in such a circumstance, I believe I’d be screwed.

I’m not entirely sure how necessary it is to have a Marquee module in CSS3. Don’t get me wrong, panning text is… er, hot… but along with all the whiz bang animations that CSS3 brought us, can I please get something that makes me capable of vertically aligning some bloody text in a bloody parent element with a single bloody style? Especially without invoking tables?

Thanks. Loves and kisses.

P.S. John Allsopp is a nutter. I say this, because he’s running a five week online course, HTML5 Live With John Allsopp, over at SitePoint. My evidence for his insanity is that this course contains 8 structured lessons, 2 Live Q&A sessions, practical exercises and a yak! All for under $10. Ok, it doesn’t have a yak. But it has the rest, and looks to be an in depth look at harnessing HTML5 hotness today and tomorrow (markup, native audio and video, canvas, ARIA and more!)

It’s a crazy good bargain. Go take advantage of it.

When I was first hired by Mindfly in 2007 I was not what you’d call “web standards aware”. Upon seeing the table-based layouts, font tags, and massive collection of inline-styles that stampeded through my pages like wild buffalo, grown men would gnash their teeth and wail in torment and mothers would hide their children.

It only took a few crying infants for me to realize something needed to change if I wanted to keep this career. My infovore nature led me to consume as much information on the topic I could muster, starting with Andy Clarke’s Transcending CSS and continuing through dozens of online tutorials and references. Learning the errors of my past, I spent a bit of time quietly taking my old sites out to the woods, instructing them to dig their own graves, then whacking them with a shovel before burying them for all time.

After the evidence had been destroyed, I went about trying to make compliant, pretty sites using the best practices in HTML and CSS. By 2008, I had friends who thought making website was the bee’s knees, but they didn’t know where to look for learning CSS, etc. At that point my bookmarks of handy sites had grown enormously, so I heartily recommended several.

One that I mentioned time and again was the Sitepoint CSS Reference, which was (to my knowledge at the time) a very complete, useful reference to the wonderful world of CSS. It even included tasty tidbits about CSS3 support. The main reason I sent each person who asked to this reference was explained in Sitepoint’s announcement:  “…the reference contains a bunch of features that make it stand out from the pack — things like cross-browser compatibility charts and user feedback to ensure that it is accurate, up to date, and best-practice. If you’re building sites with CSS, this is a reference you’ll keep coming back to again and again.”

With the speed at which this industry changes, who wouldn’t want access to a constantly updated reference that even incorporated outside feedback?

There is a problem, unfortunately. As near as I can tell, the reference isn’t updating. Since its launch, it seems to be sitting still, failing to modernize its information as browsers march on. Every single browser on their compatibility list has had major updates since its launch, putting much of the CSS3 support information well out of date. Never mind that Google Chrome has been out for quite a bit of time now (as the Internet sees such things) and has no compatibility information present despite it’s higher browser share than Opera in most markets.

In a book, this situation is a necessary reality. Books, by their static nature, are out-of-date typically before they’ve even been published, requiring later editions, etc. But for a web-based reference, which claims specifically to have the benefit of staying up-to-date and incorporating user feedback, this isn’t terribly cool.

For me, the situation is exasperated by their promise to incorporate feedback (or even claiming to do so) when they (at least in situations I’ve experienced) clearly are not. To back my claim, I’d like like to direct you to my own experience I’ve had, which I’ll call Exhibit A. If you examine the page on CSS3 Attribute Selectors, you’ll find that it erroneously claims that Internet Explorer 7 completely fails to support these little gems.

I’m no IE fan, but I can tell you my friends, that this is a falsehood. And because I was foolish enough to take that advice at face value (who doesn’t trust Sitepoint?) I created IE-specific workarounds in a project where I first included these selectors, workarounds which ended up costing me a decent chunk of time. It was only later that I decided the best experience is personal experience and I actually tried the selectors in IE7, only to discover that they work perfectly fine. I’d wasted time (translate that: money) fixing a nonexistent problem they claimed existed.

Not being the type to hoard information, I shared the fact that they were mistaken in a comment on May 2, 2008, complete with a link to a test page to confirm that I wasn’t full of hot air. (The old test page has disappeared, so you can see what I’m talking about if you check this test page in IE7). Eventually they marked that they’d incorporated my comment into the article… only they hadn’t. It still incorrectly stated IE7 support didn’t exist. Sometime much later (aka, this year), I commented in annoyance at the mistake again on Twitter. They responded multiple times over Twitter to me, asking for clarification (which I gave) and then promised to update their Reference (which they didn’t).

That was a couple months ago.

Today’s comic shares my view on the so-called Reference, albeit in a somewhat abstract sense. So let me make it clear: I don’t think the Reference is what they claim: a reference. Rather, much like René Magritte’s unpipe it is not what it appears, merely the image of it. The unreference, if you will, is something that claims authority and completeness but increasingly lacks both as time moves forward.

One erroneous page isn’t worth tearing down their entire reference. However, with a complete lack of modern CSS support information on every major browser, Sitepoint’s “up-to-date” CSS Reference has become largely useless as a source for web designers living and working in 2009.  I’m upset at this, because I sent literally everyone I knew with an interest in learning CSS to their site, saying “Hey, these guys know their stuff.”

Now… well, now I tell people to avoid it. I’ll repeat that for anyone reading: Don’t bother. They mean well, but they’ve failed to live up to their mandate of keeping updated. In March, when I’d commented (again) on my disgruntlement with the lack of updates, I received the following pair of tweets from Kevin Yank (@sentience).

April 6, 2009 4:19pm: “What erroneous compatibility info did you find? We are planning to refresh the Reference for the latest crop of browsers in May.” (after which I gave a summary).

April 6, 2009 4:50pm: “Thanks! Will get that corrected ASAP.“

It’s July now. I think we may have different definitions for “corrected” or “ASAP”.

To get a better view of what I’m speaking about (assuming you’re not already familiar with it), go check out the post I wrote at Mindfly about this very issue: Web Developer Weems and the Case of the Multiclass Bungler (AKA IE6).

A while back, I found a way to make my inline-block spacing issues go away by getting tricky and using word-spacing to remove the gap, as discussed and tested here. I failed to check the results in a webkit browser, though, and recently discovered a slight problem.

Mainly, they don’t support that.

For whatever reason, IE, Firefox and Opera all apply word-spacing styling to inline-blocks, either adding to or removing the whitespace between the elements depending on your style. Safari and Chrome, however, do not. Mind you, they both have whitespace between the elements. They simply don’t allow the use of word-spacing to modify that space.

Here’s an example page showing the use of word-spacing with inline-blocks and normal sentances. Take a look in a webkit and non-webkit browser to notice the difference. (I didn’t bother to do IE 6&7 correction, so those browsers won’t show the lists side-by-side. Upgrade your browser already!)

As you’ll see, the webkit browser isn’t removing the whitespace.

So, the question is this: Does the w3c spec say what behavior is supposed to occur? Is the webkit result a bug/out-of-spec, or are the other browsers providing a result that isn’t required by the spec? It seems to me that the non-webkit result is the proper one. If you’re going to make blocks behave like words with spacing, you should be able to modify them in the same fashion. But then, there’s a lot about CSS that doesn’t always work like you think it should. (point in case: vertical-align. Probably the worst style ever.)

I don’t know why floats drive me bonkers. But they do. I feel like frequently they’re being used almost exclusively to solve problems that were never intended for them, and the end results can get messy as soon as a client starts using a carefully balanced page built upon delicate floats and adds an unexpected list or makes a given element too full or too empty.

Not terribly far back in the past I talked about display: inline-block, one of my favorite CSS style, as a solution to this problem at Mindfly in The Curious Case of Inline-Block. It provides a nice tutorial to getting columns of content to work side-by-side without floats using inline-block, and how thanks to the quick adoption rate of Firefox 3, all major browsers (including IE6) support this style (granted, IE6 & 7 actually require a helping hand, but the tutorial discusses the easy fix).

I had one problem that nagged at me, though. Whitespace. In particular, the inline-block style is whitespace sensitive, so normal markup practice will result in your columns getting space between them when you use this style, which can mess with your carefully measured columns, and so forth. One possible fix is to simply remove any whitespace between the elements in question, but this is impractical for two reasons: 1. A lot of dynamically generated content won’t be set up with that sort of issue in mind, and 2. Clients entering their own content.

So I did some digging around, and through a complete accident later stumbled upon word-spacing, a style I’ve never had cause to make use of in the past. It’s simple enough as a style goes. Give it a value (in px, em, etc) and that’s how it modifies the existing whitespace between words. This counts for space between inline-block elements as well. So if you give the parent of those elements word-spacing: -1em, then it will remove the whitespace (normally 1em) that is between your inline-block elements. The catch? Make sure to give the elements themselves word-spacing: normal to resest the spacing for any text inside them, or you’ll get some nasty results.

Here is an example of positioning items side-by-side cleanly by using word-spacing and inline-block together (as well as showing the IE6&7 fix). Of course, with the whitespace issue solved, you can add your own margins to elements to create whatever nice gutters and such that you prefer.

I decided to try to find a method that pares down the div count, and makes the CSS a bit cleaner and more appropriate to the task. Lightning struck, and my mind put together a technique that feels like a decided improvement on accomplishing the desired task. I wrote about it over at Mindfly’s blog. Go check it out at Get Refreshed: Liquid Layouts with Simpler CSS and Without A Semantic Mess.