Why does the ‘title’ attribute cause browsers to ignore my styles?

Question

The following html document (together with the CSS) fails to render the styles in b.css.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" media="screen" type="text/css" title="A" href="a.css" />
        <link rel="stylesheet" media="screen" type="text/css" title="B" href="b.css" />
    </head>
    <body>
        <div id="A">A</div>
        <div id="B">B</div>
    </body>
</html>

/* a.css */
div#A   { color: blue;  }
/* b.css */
div#B   { color: red;   }

Making the titles the same (e.g. both <link ... title="A"> fixes it, but I don't see the reason, why it should. What is the title doing, here, that makes this wrong?

Neil Williams · Accepted Answer

The HTML 4.0 spec states that there are three kinds of stylesheets: persistent, preferred, and alternate.

A stylesheet is "persistent" if it is linked with rel="stylesheet" and has no title attribute. All persistent stylesheets are used when rendering.
A stylesheet is "preferred" if it is linked with rel="stylesheet" and has a title attribute; preferred stylesheets with the same title are grouped together, but there should not be more than one group. It seems browsers will choose just one preferred stylesheet to render since there should be only one.
Finally, a stylesheet is "alternate" if it is linked with rel="alternate stylesheet" and has a title. These stylesheets are supposed to allow the user to choose stylesheets, they are grouped together by title and show up in the browser's stylesheet selector if it has one (View >> Page Style in Firefox). Each group (by title) is mutually exclusive.

By putting title attributes on your stylesheets, you're unwittingly making them into preferred stylesheets rather than the expected persistent stylesheet. This is also why they work when they all have the same title.

Asher Dunn · Answer

Following up on Neil Williams' answer:

Authors may specify a number of mutually exclusive style sheets called alternate style sheets.... User agents should allow users to select from alternate style sheets.

(emphasis added)

Also:

To make a style sheet preferred, set the rel attribute to "stylesheet" and name the style sheet with the title attribute.

This is from http://www.w3.org/TR/REC-html40/present/styles.html#h-14.3.1

Why does the <link> ‘title’ attribute cause browsers to ignore my styles?

Tags:

html

css

title

link-tag

Andres Jaan Tack

2 Answers

Neil Williams

Asher Dunn

Recent Activity

Donate For Us