Question

有人可以详细描述title属性在添加到HTML页面的<link>中的样式表<head>标记时的用途吗？今天在使用一些HTML并且<link>使用多个样式表时，我注意到我似乎在滥用title中的<link>属性。

这是我的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>

当我开始工作时，我感到很沮丧，因为我的icomoon.css样式表没有加载。我花了一段时间才意识到title属性是问题所在。具体来说，如果我从两个样式表中删除了title属性：

<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">

或者，如果我给他们相同的标题：

<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">

我的样式已正确加载。经过一番调查后，我发现Firefox允许用户通过转到View - ＆gt;来选择他们看到的样式。 Page Style。例如，我可以制作两个样式表，一个称为“Boring”，一个称为“Cool”，用户可以在两种样式之间切换。

话虽如此，我仍然不确定title属性的用途是什么？主要是因为Chrome和Safari（我没有检查过Edge或Internet Explorer）似乎没有相同的功能来在Firefox之类的标题样式之间切换，因为在我看来这应该与更多是否与<link>的{{1}}属性包含rel指标。显然，为我的样式表提供一个好的标题不仅仅是一个便利属性。

Answer 1

来自W3C website：

标题属性提供链接的标题。除了一个例外，这纯粹是建议性的。值是文本。 样式的例外情况工作表链接，其中标题属性定义了替代样式表集。

可以在MDN中找到替代样式表集的定义。显然，这是一个仅限Firefox的功能。

如何在样式表链接标记中正确使用title属性

1 个答案: