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?
The HTML spec states that there are three kinds of stylesheets: persistent, preferred, and alternate.
rel="stylesheet"and has notitleattribute. All persistent stylesheets are used when rendering.rel="stylesheet"and has atitleattribute; preferred stylesheets with the sametitleare 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.rel="alternate stylesheet"and has atitle. These stylesheets are supposed to allow the user to choose stylesheets, they are grouped together bytitleand 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
titleattributes 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.