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.

And, by George, that was a really good feeling.

Entitled: “The Ghosts of Web Standards Present: CSS3, HTML5 and Mobile”, the whole thing ran about an hour and fifteen minutes. Fortunately people laughed at all of my jokes, so it wasn’t too torturous. I talked about the varying level of support in modern browsers for new CSS3 and HTML5 features (and how that shouldn’t matter), as well as my thoughts on the need to be ready for mobile devices today in our designs. If I did it again, I’d probably put more advanced CSS3 techniques and HTML5 tricks in, as I uncovered a whole slew of new things I’d not experimented with before while doing research for it.

Although the slides don’t contain the majority of my witty dialog (I’m so modest), I’ve put them up (after some corrections and modifications) for you to look at if you’d like. The background will flash into it’s proper place two seconds after the page loads, by design (I had some issues with the popdown request for the geolocation interfering with the way the background looked on the slide projector).

The Ghosts of Web Standards Present

As someone who is something of a typographic idiot, I can’t help but wonder what foul, plague-ridden beast I might accidentally birth someday while wielding the power of @font-face. And this example at CSS3.Info helps highlight the terrors that text-shadow can bring to the modern era.

I’m not seeking to serve as some sort of doom-saying prophet, but I fear for us all. I’ve seen what high-school students are producing in their “web design” classes (the quotes indicate my sincere lack of confidence). If we don’t shove some taste down their throats, the inheritor to MySpace’s throne of bile-filled ineptness may allow even more control over the pages by amateur authors, allowing some sort of vortex of evil that’ll suck the world’s light away, leaving a black speck in an empty universe.

So, for the love of all humanity, do us all a favor. Remember this motto: Friends don’t let friends use CSS3 without taste.

“I’m absolutely going to use it and recommend its use far and wide.”

Sounds pretty excited to me. What is all this enthusiasm being caused by? What is Sizzle?

I’m still catching up on the details as I write this, but in essence it’s a JavaScript project that will take advanced CSS selectors (read that, CSS3 selectors with little to no current browser support), do some work behind the mysterious veil, and then spit out the results on the browser. Any browser.

As a designer all you’d have to do is write your stylesheets with these new selectors (and possibly new properties like multiple-backgrounds, although I’m still confirming that), and let JS do the rest.

This is hot. It’s taking all the work that has been put into making JS engines these days smokingly hot, and converting that effort into some benefit for CSS, which isn’t getting the same fast-track treatment we’ve been desiring. I goofed around with a similar concept with a pseudo-class to class CSS converter called Pseudonut, but this is a whole other beast, and I’m really looking forward to it.

At the moment, the only notable (sorry Konqueror) browser to support both is Webkit (Safari). Firefox supports border-radius, but neither IE or Opera support either. Granted, Opera’s percentage of the browser population doesn’t make its feature set a deal breaker, but it’s simply impossible to put these solutions into play when IE’s massive user-base can’t see them.

*sigh*

I’d be less melancholy about it if Internet Explorer 8 was going to bring at least one of these with it. But no, that would be too nice.

It annoys me that out of the various improvements CSS3 is supposed to bring to the table that these two are so far away from implementation. The amount of presentation-only markup (the great enemy that CSS is meant to fight) that would be eliminated is immense.

That’s alright. I don’t mind putting three to five elements on a page where I should only need one.

I’m going to go get some warm milk and cry myself to sleep.

1. The modern versions of Internet Explorer, Firefox, Safari, and Opera all support them. (Here’s a test page at Mindfly‘s website to prove the point).

2. The Dean Edwards IE7 script DOES extend full CSS3 attribute selector support to IE6 (I’m guessing my earlier tests had an error, because now I’m showing full compliance with this second test page that includes that script (once again, at Mindfly).

The CSS3 features I’m really looking for support for now, then, are the CSS3 pseudoclasses and multiple background images. *drool* Multiple background images alone would help cut down on my markup immensely, making features such as rounded boxes so much less of a pain in the arse.

Then I discovered to my total shock that IE7 actually does support CSS3 attribute selectors.

Someone should tell Sitepoint this, as their reference incorrectly states that it does not.

However, IE6 doesn’t support ANY attribute selectors, so I went to the blackboard again to write a script for that.

Then I discovered that Dean Edwards’ IE7 script does give IE6 attribute support. So I stopped writing my own script and went to check that out.

A while later, I discovered that the Dean Edwards script, however, does not give full support to IE6 for css3 attribute selectors. (Most notably, *= doesn’t seem to work).

So now I’m working on that script again.

I think I’m beginning to understand what a yo-yo feels like.

Fortunately for me, I spend at least a little of that time doing other things, like actually working on previously mentioned web design solutions. One area of interest that I’ve been getting more and more obsessed with is using Javascript to allow cross-browser CSS3 functionality on modern browsers, despite the fact that short of Konquerer, (which really annoys me because of the ‘cool’ spelling of a word with the letter K) browsers probably won’t be doing a lot of note with CSS3 until sometime after global warming causes the seas to rise and dolphins enslave humanity.

As much as I look forward to designing amazing tuna-oriented websites under the strict guidance of our future dolphin overlords, I’m not realy interested in waiting any longer to get my hands on all the cool features of CSS3 that have been “on the horizon” for half a decade now. I’ve talked about this lack of patience before, discussing the ability to use CSS3′s multi-column features today with Cédric Savarese’s css3-multi-column.js (which I offered a slightly altered version of here) and adding some CSS3-like pseudo-class mimicking support with Alex Bischoff‘s Offspring.js (introduce in a List Apart’s article Keeping Your Elements’ Kids in Line with Offspring, which I talk about here).

At some point, while I was sitting in Andy Clarke’s workshop at Web Directions North 2008 and dreamily drawing sketches of everyone’s favorite CSS rockstar, Andy talked about how it’s important to make use of cutting edge CSS features as often as possible to bring the browser makers’ attention to the fact that there is demand for support of these features. I think he was pushing in the right direction, but I think it’s not just enough to use modern browser support. I think people like Cédric and Alex are making strides in the right territory, which is using Javascript to implement CSS3 today.

Realizing it’d be a bunch of noise to just preach it without practicing, I’ve thrown my hat into the ring. My Javascript is a lot less practiced than my CSS, so I’m not exactly rocketing to the top with a killer script. However, they’re not nonexistent either, so I’ve put my nose to the grindstone.

The first challenge I decided to tackle was to fix an issue that I have with offspring.js. The script does a great (some might say overly thorough) job with adding classes to each element on the page so that they can be targeted with “pseudo-class”-like classes such as “.first-child”, “.last-child”, and “.nth-child” (it only currently supports the “odd”, “even”, and “#” values for nth-child). But to use these, you have to mark your CSS up with classes (such as “.last-child”) instead of pseudo-classes (such as “:last-child”). This is all great and dandy while modern browsers don’t have up-to-date CSS3 support. But as soon as they do (which, considering IE’s pace of advancement will be somewhere near 2020) you’d have to go through all your stylesheets and convert the styles to the proper pseudo-classes.

Not anymore. Let me introduce you to Pseudonut, a small script that goes through your stylesheets, checks for CSS3 pseudo-class selectors (currently only last-child, first-child, only-child, and nth-child) and then updates the stylesheets with new rules using classes instead. This means that you can drop the script into a project, use the supported CSS3 pseudo-classes, and it’ll convert them to a format for use with Offspring or any similar script you have.

Although it was my hope to use Javascript’s document.styleSheets.cssRules to read the existing selectors, strip out the pseudo-classes, and then replace them with classes, I ran into a major hurdle right away. Namely, most of the browsers wouldn’t actually read the pseudo-class marked selectors, as they’d see a style that held something they didn’t understand and therefore not add it to the list of cssRules. So instead I’m loading the stylesheets with XMLHttpRequest, splitting it into an array of strings holding the selectors and styles, making the changes from pseudo-class to class, then using javascript’s document.styleSheets.insertRule (or addRule if the viewer is using IE, since it has to be a special snowflake) to add the updated rule.

Here’s an example of it in work (I recommend checking out the stylesheets and html in Firebug). I’m using Offspring.js for adding the proper classes to the HTML, but you could use any script of your own for that feature.

Here’s the Javascript file: pseudonut.js.

Here’s the CSS file for that test: pseudonut.css.

Before I get reamed by Javascript experts for the cleanliness of the code (or lack thereof), I’d like to advise that this is what I’m calling version 0.1. It’s raw, it’s new, and it’s going to need a lot of polish. In particular I’m already thinking I should have loaded all the different pseudo-classes into an array of strings instead of checking for each separately. This is just the tip of the iceberg, though. Here’s a list of upgrades I plan for the project.

• Add configuration features so you can choose which pseudo-classes to support.
• Add support for all of CSS3′s pseudo-classes.
• Add the functionality to insert the needed classes into the HTML tags so that Pseudonut can stand alone without offspring (and ideally design it to only add extra classes to elements to tags that’ll need them, rather than Offspring’s jackhammer approach of banging them all), including full nth-child support.
• Add support for CSS3 attribute selectors.

Pseudonut is filling its initial purpose, which is to allow me to keep my stylesheets “clean” while still being able to make use of the features offered by Offspring and other such scripts. Going forward, I’m definitely open to suggestions or comments regarding whether such a thing is needed, and if so, what kind of changes or direction should occur.

Oh, and for those of you who are too young to have experienced Ferris Bueller’s Day Off, go watch it, if for no other reason than to be grateful that women don’t use as much hairspray today.

Misspelling words on purpose, how enjoyable!

My current CSS tomfoolery involves creating a javascript file that can convert proper CSS3 selector pseudoclasses like :nth-child(#) into Offspring-compatible fake pseudoclasses like “.nth-child-#”. It’s about 80% there, but I’ve ran into an issue where JS doesn’t recognize a selector as a selector if it’s got “(” or “)” in it, which is what nth-child makes heavy use of. If I can’t conceive of a workaround, it’ll tank the mini-project. Arrr…