Empty and Broken

Apparently the :empty pseudo-class is (still?) broken in Chrome, as of version 9. p:empty {display:none;} results in every p being hidden, whether it's empty or not.

Background Size Matters

Was anyone else wondering what happened to -moz-background-size in Firefox nightlies? No? Just me? Well, for future reference it would appear that it was removed in favor of supporting the unprefixed property background-size.

The Pros and Cons of Vendor Prefixes

PPK makes a compelling argument against browser vendors using vendor-specific prefixes:

We’re currently moving toward a situation in which anything that is implemented by two browsers more-or-less automatically becomes a standard. I don’t think that this change of process has been accepted by W3C yet (it might take another generation), but it’s becoming reality as we speak.

While this is true to a degree, what he fails to account for is different implementations of the same effect by different browsers. The border-radius property is a prime example.

The Mozilla implementation differs from the latest W3C draft spec implemented in Opera as well as IE 9. Safari also implements an older version of the W3C spec, and adds the -webkit- prefix. Chrome implements the same spec as Safari with and without the -webkit- prefix.

Sure, maybe the fragmentation could all be avoided by everyone following the draft spec, but it isn't a standard yet, and with good reason. Personally, I think that vendor prefixes are still necessary. Maybe the W3C should change the standard to allow vendors to simply allow others' prefixes when they intend to provide identical implementations.

Borderless Radius

Apparently Firefox no longer requires the border property to be specified in order to render -moz-border-radius. I haven't tested this on Gecko 1.92 yet (I'm using a nightly), but I can confirm that Chrome 5 accepts the implicit border as well. Firefox 3.0 required border to be set, making border: 1px solid transparent a designer's best friend.

Greasemonkey and Pseudo-Classes

While fiddling with a Greasemonkey script, I discovered an interesting little CSS tidbit today.

<div class="bookmark">
  <span class="balloon">...</span>
</div>

I have several divs with class="bookmark". Each div.bookmark contains a child, span.balloon. I was attempting to make .balloon hidden by default, and visible when I hovered over .bookmark.

.balloon {
  visibility: hidden;
}

.bookmark:hover .balloon {
  visibility: visible;
}

This didn't work for me. Scratching my head, I checked everything I could think of, and naturally came to the conclusion that the :hover pseudo-class simply doesn't work with Greasemonkey. Of course, such a conclusion didn't sit well, and I went back to the basics. I found that body:hover worked just fine. div:hover worked as well. Working from there, I tried div:hover.bookmark. Eureka! Apparently pseudo-classes in Greasemonkey need to be attached to an element in order to work.

It's Supposed to be Standard, Right?

When I first set up this blog, I turned on the option to automatically publish an Atom feed. Personally, I prefer RSS, but it was no big deal. Once I had my blog set up, I decided to use a little JavaScript code to link my home page. At first it worked beautifully, but one day I discovered something funky going on. Apparently the code had changed. Somehow. Turns out, when I saved my last post the last post was formatted differently from all the others. My code was looking for one element, but it was getting another.