It’s that time again. A new version of Safari is out, so here we go with a new round of CSS hacks.

Here’s a page from the W3C’s CSS-3 test suite: :empty pseudo-class on a non-empty element. The test passes in Mozilla 1.5, IE/Win 6, IE/Mac 5.2, and Opera/Win 7.22, but fails in Safari. Although it’s considered invalid CSS-2, it will be valid CSS-3. So it’s evil, but it’s evil in a forwardly compatible way.

As you can see from the page’s source, the syntax is simple. p:empty should not be applied to non-empty paragraphs, but Safari applies it.

Here’s a slightly less evil hack: :lang() pseudo-class. This validates as CSS-2, but is only recognized by Mozilla and IE/Mac. Safari, Opera, and IE/Win ignore it. Since I already declare a lang on my <html> element, I can use the :lang() pseudo-class to extend an existing IE-hiding hack to also hide from Safari and Opera:

.foo {
  /* rules for everyone */
}

html:lang(en)>body .foo {
  /* rules ignored by Safari,
     Opera, and IE/Win */
}

If you declare something other than English as your page language, then just make sure the lang codes match. If you don’t declare a page language at all, well then you’ll just have to start. The irony of using CSS hacks to encourage other standards practices is not entirely lost on me.

Admittedly, I’m not sure how useful this hack is in general; the combination of Safari, IE/Win, and Opera is a fairly large population, and there aren’t a lot of situations where you want to paint them all with one brush. However, I am testing it in iteration #10 to prevent Safari and IE/Win from screwing up the rendering of my standards-compliant navigation rollovers. (Sorry, Opera users. I have nothing personal against either of you.)

I only advocate using CSS hacks when standards fail me, and even then I feel kinda guilty about it. In my defense, this hack is an improvement from my previous design, which included the invalid CSS selector *7 hack, which I felt extremely guilty about. Although apparently not quite guilty enough not to use. All hacks that target actively developed browsers are, obviously, time-limited. Safari 1.1 broke my last design by fixing an obscure bug I didn’t even know existed, which in part spurred me to redesign, which unfortunately has uncovered new bugs in Safari, which is what I am now working around.

On the upside, as a bonus for Safari users, iteration #10 includes a subtle text shadow, which (AFAIK) only Safari supports. It looks insanely great.

§

Fourteen comments here (latest comments)

  1. That :empty pseudo-class test exhibits a bizarre behavior. Upon first load (or refresh) the test fails, but when revisiting from cache (e.g., use back/forward buttons) it renders as expected!

    Beware basing hacks on that selector…

    — Hans Gerwitz #

  2. Aww, shucks. The square rollovers work perfectly in Safari post 1.1. If I make Safari properly support :empty, will I get the pretty rollovers back? :)

    — Dave Hyatt #

  3. kusor dhtml weblog (trackback)

  4. Have you tried highlighting text in IE/Win? It’ll select everything from where you click (and drag, of course) to the top (excluding the “d i v e i n t o m a r k” text in the banner).

    Is there a way to download Safari for Windows, or will that become my shattered dream?

    — Håvard Skjæveland #

  5. I’m one of those two Opera users, and I think you are right to prefer this hack over an evil hack ;)

    Even though the rollover effect is really cool in Mozilla. Maybe this will spur the Opera developers to support :lang at last…

    — Rijk #

  6. I’m that other Opera user, and I just wanted to say, I bear you no ill will. Today.

    — Pieter Van de Bruggen #

  7. Strange… I’m the third Opera user. Mark, whoever you’re source is, he’s obviously unreliable. :)

    — Håvard Skjæveland #

  8. Actually, there have been at least 347 of you in the past few days, and that doesn’t even include those of you who are lying about who you are.

    http://diveintomark.org/about/stats/bybrowserdetail.html

    I bear no ill will towards any of you. You all have excellent taste in browsers. :)

    — Mark #

  9. And another one of those 347 ☺

    I like the rollover effect (three cheers for Opera’s easy editing of cached CSS), a shame your hack disables it in my browser of choice.

    Still this is one slick layout.

    — Jor #

  10. Find some hack that disables the rollovers in *all* browsers, then you’ll really be showing some design skill. :-)

    — mpt #

  11. I’d use Opera if it rendered pages like Gecko-based browsers do.

    …still can’t figure out how to make the menu on my redesign ‘pop-out’ in Opera. Originally it was doing it occaisionally, then not at all… thoughts of using JavaScript instead of CSS for that flicker briefly in my mind…

    …I had even weirder issues with Safari, which I eventually (grudgingly) fixed by using pixel height and width values…

    …And now I have to add things for IE 5! Will it never end?!? AAAAIIIIeeeeee!

    /me goes over to the corner, curls up in the fetal position, and starts sucking his thumb.

    — kami #

  12. I sure _hope_ it’ll end, but I’m not really optimistic about it. In fact, I’ve stopped giving a damn about IE. If something doesn’t work in IE, I try my best to work around it and if I can’t find a way, I just leave it be.

    Correct me if I’m wrong, but doesn’t Opera identify itself as IE upon installation (i.e. you have to manually switch it to identify as Opera)?

    — Håvard Skjæveland #

  13. Yes, the default option for «Browser identification» in Opera is «Identify as MSIE 6.0». Although, this doesn’t change the fact that the browser is fully recognizable as Opera, as the word «Opera» is still in the USER_AGENT string;

    Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.21 [en]

    — Asbjørn #

  14. All right, since Dave Hyatt swears this is fixed already in internal builds of Safari, and Opera didn’t do anything to deserve it, I’ve reverted to the normal html>body hack to hide things from IE/Win. Which deserves it, and is no longer being developed, so it’s not like this hack will need tending until Longhorn. And the design won’t last that long anyway.

    Thanks for all the opinions, public and private. CSS hacks always bring out the passion on both sides.

    — Mark #

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)



§

firehose ‧ code ‧ planet

© 2001–9 Mark Pilgrim