Chomper Stomping jQuery/JavaScript/CSS 3/HTML 5, Java/PHP/Python/ActionScript, Git, Chrome/Firefox Extensions, Wordpress/Game/iPhone App Development and other random techie tidbits I've collected

It really helps to read the documentation. Way back when I started designing websites using external stylsheets, I found a little trick. If you had IE specific styles and Firefox specific styles, you could extract them both out, and include them both like this:

<link href="ffStyles.css" rel="stylesheet" type="text/css" title="Firefox Styles" />

<link href="ieStyles.css" rel="stylesheet" type="text/css" title="IE Styles" />

Since you are (in this case) telling the browser that you have two styles, and both are different (you used a title attribute), but both should be default (you used the "stylesheet" parameter for the "rel" attribute) the browser doesn't know what to do. You've told it only to use one, but that both are the default, and thus, have contradicted yourself.

At this point, IE and FF both make very different (but helpfully so) decisions. I'm betting that IE said, "well, these are cascading, so in cascades you always take whatever the last thing is and use that" and therefore IE used the last style as the default and ignored the first. Firefox either said "IE uses the last one, so I'll use the first one so people can use the trick Chris is talking about above" or they said "Ok, looking for stylesheet... found it! Use it! Oh, another one... um, we don't need anymore because we already have one, so ignore it" either way it doesn't really matter, because the point is, it works out nicely for the developer.

I always thought this was a "bug" that I was exploiting, and that my dual stylesheet was an exploit/hack. Then I read the documentation today for the first time and learned how stylesheets are supposed to work and be included. The major thing I found out was that the title attribute is purely optional, and serves a double purpose:

It clearly states in the documentation not to put a title attribute if you want it to be “persistent” (universal) but if you want it to be “preferred” (default) to set the title attribute and set the rel type as "stylesheet". It doesn’t say anything about being able to have two stylesheets both with the rel attribute set to “stylesheet", but it does make it appear as if you are not supposed to have more than one with the rel type of “stylesheet” (at least that’s what I’m inferring from the fact that they are giving you a way to make “alternate” stylesheets). This actually makes sense, because if they give you a way to have “preferred” and “alternate” stylesheets, why would you make two preferred? What would that even mean? I’m guessing the way they intended was something like this:

<link href=”basicStuff.css” rel=”stylesheet” type=”text/css” />

<link href=”blueStuff.css” rel=”stylesheet” type=”text/css” title=”blue theme” />

<link href=”redStuff.css” rel=”alternate stylesheet” type=”text/css” title=”red theme” />

This way, all of the stuff that is universal to both themes just goes in without a title tag, because the only purpose of the title tag is so you can switch between them, and why would you want to switch the universal stuff (you wouldn’t)? So, by putting a title, you are implying that the user should be able to see and choose between your titled styles, and by putting “stylesheet” instead of “alternate stylesheet” you are stating that “this one is the one you should see by default”. So in this example, the blueStuff.css style would be used by default (for both IE and FF) and the redStuff.css style would be an available alternate.