'How to correctly use title attribute in stylesheet link tags

Can someone describe in detail what the title attribute is for when added to a stylesheet <link> tag in the <head> of my HTML page? Playing around with some HTML today and while <link>ing to multiple stylesheets, I noticed that I seem to be misusing the title attribute in my <link>s.

Here is my html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- styles -->
        <link rel="stylesheet" type="text/css" media="screen" href="/static/css/foundation.min.css" title="Foundation">
        <link rel="stylesheet" type="text/css" media="screen" href="/static/css/icomoon.css" title="IcoMoon">
    </head>
    <body>
        <h1>Welcome <span class="icon-home"></span>!</h1>
        <!-- scripts -->
        <script src="/static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
        <script src="/static/js/foundation.min.js" charset="utf-8"></script>        
    </body>
</html>

As I started working I was frustrated because my icomoon.css stylesheet wasn't loading. It took me a while to realize that the title attribute was the issue. Specifically, if I removed the title attribute from both stylesheets:

<link rel="stylesheet" type="text/css" media="screen" href="/static/css/foundation.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/icomoon.css">

Or if I gave them the same title:

<link rel="stylesheet" type="text/css" media="screen" href="/static/css/foundation.min.css" title="Foundation">
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/icomoon.css" title="Foundation">

My styles loaded correctly. After a little bit more investigating, I found that Firefox allows users to select which styles they see by going to View -> Page Style. For example, I could make two stylesheets, one called "Boring" and one called "Cool" and the user can switch between the two styles.

That being said, I still am not sure what the purpose of the title attribute is? Mostly because Chrome and Safari (I haven't checked Edge or Internet Explorer) don't seem to have the same functionality to switch between titled styles like Firefox does and because that would seem to me something that should relate more to whether or not a <link>'s rel attribute includes the alternate indicator. It clearly is not just a convenience attribute to give my stylesheets a nice title.

html


Solution 1:[1]

From the W3C website:

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.

A definition of alternative style sheet sets can be found in MDN. Apparently, it's a Firefox-only feature.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maria Ines Parnisari

Related Questions