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:
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?
You can't style an actual title attribute How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.
Link Title Attribute Best PracticesYou should use a link title when you are providing more information about the link. Don't use a link title to provide the information over again, as this is a usability fail that will only result in annoying your users.
If the title attribute's value contains "LF" (U+000A) characters, the content is split into multiple lines. Each "LF" (U+000A) character represents a line break.
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 therel
attribute, and any value at all for thetitle
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With