Style sheets break with TITLE attribute on <link> tags?

Question

I'm helping with an effort to upgrade a very old corporate intranet. Our users are on IE8 and IE9. Most of our sites are written to work in IE5 - IE9.

We're on the verge of upgrading everyone to IE11, and pilots are finding a ton of compatibility issues. There will be a great deal of remediation in the months ahead, as well as judicious use of Enterprise Mode, Compatibility Modes, X-UA tags, and so on.

But I've encountered one strange problem that doesn't make any sense. It seems like a bug, but:

• It happens in IE11 edge mode, Chrome, and Firefox.
• I've duplicated the problem on servers running IIS 6 and IIS 7.5, as well as from my desktop.
• Happens with .asp, .htm, and .aspx file types.

Here's the issue:

If you have a web page with two linked style sheets, and both tags have a title attribute, the styles defined in the 2nd style sheet are not applied unless either (a) The title attributes match exactly, or (b) one of the title attributes is empty.

For example:

Everything works fine if your <link> tags have identical title attributes:

<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css" TITLE="1">

Everything works fine if one of the title attributes is blank:

<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css" TITLE="">

And everything works fine if one of the tags has no TITLE attribute:

<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css">

But… if you have different values in the title attributes, the 2nd style sheet will not be applied.

<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css" TITLE="2">

I've resigned myself to the fact that we're going to have to scan every last page on our Intranet looking for pages with title attributes attached to <link> tags, but I really would like to understand why this is happening. What's most interesting is that this happens in every modern browser I've tried. If you force IE11 into Enterprise Mode or Compat View, the problem goes away.

Can anyone explain what's happening, or propose a solution besides removing title attributes from <link> tags?

Answer 1

This appears to be expected behavior. From, for example, the MDN docs

A preferred stylesheet [...] is one that has a value of stylesheet supplied for the rel attribute, and any value at all for the title attribute. Here are two examples:

<link type="text/css" rel="stylesheet" title="Basic styles" href="basic.css" />
<link type="text/css" rel="stylesheet" title="Fish and boats" href="ocean.css" />

According to the HTML 4.01 specification, only one of the preferred stylesheets can be used at a time. Therefore, given the above example, only one of the two preferred stylesheets will be applied to the document. The specification does not supply a procedure to decide which one should be used, so user agents are free to make whatever choice they like.

Answer 2

From the spec

The title attribute gives the title of the link. With one exception, it is purely advisory. The value is text. The exception is for style sheet links, where the title attribute defines alternative style sheet sets.

Browsers can (I don't know of any that do any more, but extensions are available) provide a UI to allow the user to switch between different stylesheets supplied by the author for a page.

The title attribute is used to group the stylesheets for selection (and provide the label for them).

The first stylesheet encountered will be used to determine which group is used by default.