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?

Posted in CSS,Developing,HTML5/HTML/XHTML,Technology |

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>