Yesterday I ran into a little unexpected behavior when adding
title attributes to a couple of
Basically, I had this code to include stylesheets:
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" title="Main stylesheet"> <link rel="stylesheet" href="css/additional.css" type="text/css" media="screen" title="Additional stylesheet">
The interesting behavior with the above code is that only the first CSS will be included. What, you say, that can’t be?! Yes it so can.
Getting rid of the problem
Felling pretty stumped, as any good Web Developer, I started to desperately remove random attributes to see what was wrong. After a little time of testing, I realized that the problem was related to both
link elements having
title attributes. O-kay…
What’s the reason behind this?
Feeling more stupid than usual, I decided to ask a friend who’s actually talented to explain what this behavior stems from. It took about two seconds, and then he pointed me to Specifying external style sheets. Apparently, the key in how it is specified is:
Setting the title attribute makes this the author’s preferred style sheet
The effect of this is that if the document finds a
link element with a
title attribute, it becomes the preferred style sheet and will disregard all other stylesheets, which have a
title attribute as well. Then, the exception to this is that if any of the following stylesheet includes have a
title attribute, you can make them work if you specify exactly the same
title value as the first one in the web page.
My thinking was that, no matter the existence of the
title attribute, setting a
media attribute would always take precedence. For crying out loud, is that really what we want, that a stylesheet is completely ignored if it happens to have a