Posts Tagged ‘css3’

Square Peg, Round Hole

Tuesday, November 2nd, 2010

There is going to be a comic that gets attached to this rant, I assure you. However, I’m so fired up on the topic at the moment that I’m tossing this post out sans the punchline.

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.

Recap: My Refresh Bellingham Presentation – The Ghosts of Web Standards Present

Wednesday, December 30th, 2009

On December 16th, 2009, I had the opportunity to do something I’d been meaning to do for a while. I gave a presentation (in front of an audience, even) about web standards! I was invited to speak at Refresh Bellingham, which was a great experience. Discussing the topics of CSS3, HTML5 and Mobile, I definitely bit off a larger chunk than I needed to (in the future I think I’ll pare the experience down to CSS3 and HTML5 unless it’s for a much longer time format), but by the end of the presentation I felt like I’d done a good job of entertaining the audience and maybe teaching some of them a thing or two.

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

Comic Update: The Return of Bad Taste

Monday, October 19th, 2009

Today’s comic is not reactive, but rather, predictive. As October is the month where Halloween brings its ghouls, ghosts and other monsters to the mind, I can’t help but think about the terrors I’ve seen on the Internet from the days of yore (and sadly yes, even today). Horrible, blighted monstrosities involving the blink and marquee tags, or garish color combinations that unlock portals to the deepest circles of hell.

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.

The More You Know

JS Has Always Been Hot, But Now It’s Sizzling

Wednesday, October 22nd, 2008

Eric Meyer wrote a little post about new project in development by John Resig called Sizzle that should be making every web designer wet themselves. He’s really excited about this. Almost to the point where in my mind’s eye I can see him skipping down hallways. How excited?

“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 want my CSS3-provided rounded corners

Saturday, May 10th, 2008

Every time I have to slave away at a CSS solution to a problem that could be easily solved by CSS3′s multiple backgrounds or border-radius, I want to inflict harm upon myself. This is exasperated by the number of rounded corner designs I seem to be working on today. (Are those currently in, out, or tacky?)

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.


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.