3

私のHTMLページのスタイルシートタグtitleに追加されたときの属性の詳細を誰かが詳しく説明できますか? 今日、いくつかの HTML をいじり、複数のスタイルシートを使用しているときに、自分の s で属性を誤用しているように見えることに気付きました。<link><head><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->に移動して選択できることがわかりましたPage Style。たとえば、「Boring」と「Cool」という 2 つのスタイルシートを作成し、ユーザーは 2 つのスタイルを切り替えることができます。

そうは言っても、title属性の目的が何であるかはまだわかりませんか? 主な理由は、Chrome と Safari (Edge や Internet Explorer は確認していません) には、Firefox のようにタイトル付きのスタイルを切り替える機能がないように思われるためです。<link>のrel属性にはalternateインジケーターが含まれます。スタイルシートに素敵なタイトルを付けるのは、単なる便利な属性ではないことは明らかです。

4

1 に答える 1

3

W3C Web サイトから:

title属性は、リンクのタイトルを示します。1 つの例外を除いて、これは純粋にアドバイスです。値はテキストです。例外は、スタイル シート リンクの場合です。この場合、title属性は代替スタイル シート セットを定義します。

代替スタイル シート セットの定義はMDNにあります。どうやら、これは Firefox のみの機能のようです。

于 2015-12-13T05:05:36.270 に答える