Jan 10

CSS Hiding

Mark Pilgrim has suggested intentionally leaving bugs in Safari's CSS to give designers a way of working around Safari bugs by telling Safari to ignore certain rules.

We're just approaching the point where it's possible to rely on standard HTML+CSS and I'd hate to relax on that front even slightly, particularly as the browser vendors are finally coming to realize that standards are not optional. There's an additional risk in relying on bugs: there's no guarantee that a bug is specific to a single browser - even if that's true now, will it be true in 6 months?

Of the suggestions Mark listed, Aaron Swartz has the best: using a custom media type. This works with all of the standard tools and avoids cluttering other stylesheets with selective blocks.

This leaves a few interesting questions:

  • How do you tell Safari not to load a page, either because it's difficult to reverse your previous declarations or because you've discovered a bug which crashes the browser?
  • How do you tell later versions of Safari to stop ignoring your code after the bug is fixed?
  • Finally, is there a way to use the same easy mechanism for other elements such as JavaScript?

I'd propose a more general system using XML namespaces and a few custom attributes. The namespace is a Java-style reference to the appropriate vendor: org.kde.khtml, com.apple.webcore, org.mozilla.gecko, etc. Assuming a future OmniWeb 5 were to use WebCore, it might support 3 namespaces (KDE, WebCore, Omni) giving developers the ability to differentiate between different branches of the same engine.

The simplest approach is an attribute like minimum-version="1.0.2" but that is less reliable if you can't verify that the next release fixes a problem: we're all stuck updating our old pages when 1.0.2 comes around and you discover that all the developers were too busy adding an animated assistant to fix your bug. Fortunately there's an alternate method using the bug databases every browser manufacturer already has: requires-fix="bug id". Finally we need a simple alternate-href in case we have a workaround.

The final result might look like this in cases where a newer version is known to work:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" com.apple.webcore:minimum-version="1.0.2" com.apple.webcore:alternate-href="safari-kludge.css" />

Namespacing also allows us to gracefully handle bugs in multiple browsers ("Damn - couldn't they at least break CSS3 in the same way?"):
<link rel="stylesheet" type="text/css" media="screen" href="style.css" com.apple.webcore:requires-fix="47892" org.kde.khtml:requires-fix="18675" />