CSS includes with the title attribute might be ignored
Yesterday I ran into a little unexpected behavior when adding title attributes to a couple of link elements.
Core issue
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 title attribute?
Why would you want to have a <code>title</code> attribute in your stylesheet link?
Dto.?
Strange indeed. I know that stylesheets linked in with rel="alternate stylesheet" are ignored, but not stylesheets linked in with rel="stylesheet".
I have some of these alternate stylesheets on my web site. Just for fun, nothing important. And indeed here it is essential that those stylesheets are ignored until the user specifically selects one of them. But i always thought this behaviour was limited to rel="alternate stylesheet".
Well, sure, if you offer alternate stylesheets, you should also preset the preferred, or default, stylesheet. This stylesheet then has to have a name to make it selectable by the user. The user may choose to select one of the alternate styles, then later might choose to get back to the default stylesheet. So it has to be selectable by the title. So it may be a somewhat strange and unexpected behaviour, but it hase some logic.
I think the idea is to allow the user to choose from a selection of style sheets where they exist. So the titles could say "added bytes blue" and "added bytes red" and the user would be able to pick one (Opera has this functionality, no idea about other browsers).
This is for alternate style sheets, and it's a feature, not a bug. 🙂
A style sheet with <code>rel="stylesheet"</code> and no title is a persistent style sheet. It will always apply for the specified media types.
A style sheet with <code>rel="stylesheet"</code> and a title is a preferred style sheet. It will apply unless the user chooses an alternative style sheet.
A style sheet with <code>rel="alternate stylesheet"</code> is an alternative style sheet and will only apply if the user chooses it.
Preferred and alternative style sheets are grouped with the <code>title</code> attribute. When the user chooses one group all style sheets with that title are enabled and all the others are disabled (except the persistent ones, of course).
Since only one group can be preferred, it's not a good idea to have multiple style sheets with <code>rel="stylesheet"</code> and different titles. But you already found that out, didn't you? 🙂
Kim, Jens,
As mentioned by other commenters, it's to be able to offer the end user, through certain web browsers and/or plugins, to be able to switch stylesheets. To be honest, though, it was overkill in my case and removing the <code>title</code> atribute was the way to go.
Siegfrid,
Yes, it does have some logic as well as an element of being unexpected. 🙂
Dave,
Didn't actually know it was native in Opera.
Tommy,
Yes, I have experienced it now. 🙂
Thanks for the explanation!
Robert,
Very different behavior than what I would expect.
But then, I had not heard of a "preferred" stylesheet until I read your post. Thanks for the explanation.
As far as i know Opera was the first browser to support alternate stylesheets. Today all major browsers support that. And many of the smaller ones, too, All but… well, you may guess which one does not support it 🙂
I think, alternate stylesheets where basically meant as an accessibility feature. So anyone having difficulties reading a page might choose another stylesheet better suited for his needs. But of course it is possible to add them just for fun, too. Or to experiment with new styles before relaunching a site. F.ex. you might develop the new style as alternate style, then, when everything works, exchange the preferred and the alternate style, and voilá you have relaunched your site without any outtage. And anyone preferring your previous style may choose to use that alternately. Over time you might add a plethora of different styles.
What i have experienced: If you want to add alternate styles, and especially if those alternate styles are very different (f.ex. different geometry), then your HTML has to be 100% free of presentational markup. So building a site with at least 2 very different styles is the perfect way to learn semantic markup 🙂
Deborah,
Good to see that your reaction is akin to mine. 🙂
Siegfried,
Yes, first and foremost it would be a nice way to offer the option to the end user, but most don't know about this feature.
Secondly, I think it's a nice way to test custom skins on the same HTML code, possible mobile version etc. So yeah, it's good learning. 🙂
[…] Robert Nyman […]
The article above is from my own blog, in german, and somewhat a HOWTO, using my site as an example. I'm offering several alternate stylesheets. So i have postet an article on how to choose them. Because i think you're right: Most don't know about this feature.
Siegfried,
Great! Now, how can I trick you into writing in English instead? 🙂
Why would you use a title on a link tag anyway?
It isn't ever seen by the user, which is why they do make sense on an anchor tag.
food,
As mentioned above, certain web browsers and other plugins offer the end user to switch stylesheets.
Actually this behaviour rings a bell, some time ago a similar thing happened to me. I think my solution at the time was to pull the title attributes right out (although I couldn't say for sure), but I never realised or even questioned the foible again until today.
Thanks for sharing Robert. I hate black boxes, and that was one of them.
There are many sites that use alternate stylesheets to fix IE's bug of changing the text size (when it's defined in pixels). You can click a link and the default stylesheet is changed to one with a bigger font-size. I usually use em's, so I didn't need alternate stylesheets.
After this post and Siegfried's article, I just might make some 😀