No Mod Required

Destroy a CSS Layout in Safari 1.*-2.0 With One Character

I got a bug report this morning about the recently launched Innocentive site failing to render properly in some versions of Safari. This was surprising to me as I test layouts in Safari 3 for the PC regularly, and I'd run a full Browsercam test on the site just last week and turned up no major issues. As the following screen shot shows it truly is a major issue:

u-g-l-y.gif

I validated both the HTML and CSS. The HTML turned up nothing major. The CSS spit back this:

27 #wrapper #content #messaging Parse Error - ;1 }

Looking at the style sheet, I saw the following rule:

#wrapper #content #messaging {
	height: 281px;
	width: 1004px;
	position: relative;1
}

Deleting the "1″ fixed the issue:

it-works.jpg

Here are the results of some other tests:

CSS Result
position: relative;
1;
Renders correctly
position: relative;
1
Broken Layout
position: relative;w00t Renders correctly
position: relative;? Broken Layout
position: relative;! Broken Layout
position: relative;# Broken Layout
position: relative;/ Broken Layout
position: relative;. Broken Layout
position: relative;_ Renders correctly
position: relative;- Broken Layout
position: relative;
-;
Renders correctly
position: relative;this is some crazy testing stuff right here Renders correctly

Basically it looks like Safari defines a valid property name as beginning with [a-z] or "_" (unless I'm mistaken [0-9] and "-" would also technically be valid*) and it completely craps out with an invalid property name if it's not stopped by a semi-colon ";"

This is changed for Safari 3, but could still potentially be useful if one needed to serve styles to just Safari. Define the majority of the sheet as if you were coding for Safari exclusively, then you could redefine the styles as needed for other browsers below the ;1 combination.

I went ahead and wrote it up because it was an interesting bug to me personally so I just ignored this question earlier, but- is this something people have seen before?

*anyone know for certain? I actually have to get back to work so I'm going to be unable to research that one.