Почему атрибут "link" <link> заставляет браузеры игнорировать мои стили?

В следующем HTML-документе (вместе с CSS) не удается отобразить стили в 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;   }

Делать заголовки одинаковыми (например, оба <link ... title="A"> исправляет это, но я не вижу причины, почему это должно. Что делает заголовок здесь, что делает это неправильно?

Источник

4 ответа

Решение

Спецификация HTML 4.0 гласит, что существует три вида таблиц стилей: постоянные, предпочтительные и альтернативные.

  • Таблица стилей является "постоянной", если она связана с rel="stylesheet" и не имеет title приписывать. Все постоянные таблицы стилей используются при рендеринге.
  • Таблица стилей является "предпочтительной", если она связана с rel="stylesheet" и имеет title атрибутов; предпочтительные таблицы стилей с тем же title сгруппированы вместе, но не должно быть более одной группы. Похоже, что браузеры выберут только одну предпочитаемую таблицу стилей для визуализации, поскольку она должна быть только одна.
  • Наконец, таблица стилей является "альтернативной", если она связана с rel="alternate stylesheet" и имеет title, Эти таблицы стилей должны позволять пользователю выбирать таблицы стилей, они сгруппированы по title и отобразиться в селекторе таблиц стилей браузера, если он есть (Просмотр >> Стиль страницы в Firefox). Каждая группа (по названию) является взаимоисключающей.

Положив title Атрибуты в ваших таблицах стилей, вы невольно превращаете их в предпочтительные таблицы стилей, а не в ожидаемую постоянную таблицу стилей. По этой же причине они работают, когда у них у всех одинаковый заголовок.

Источник

В продолжение ответа Нила Уильямса:

Авторы могут указывать несколько взаимоисключающих таблиц стилей, называемых альтернативными таблицами стилей.... Пользовательские агенты должны позволять пользователям выбирать из альтернативных таблиц стилей.

(выделение добавлено)

Также:

Чтобы сделать таблицу стилей предпочтительной, установите для атрибута rel значение "stylesheet" и назовите таблицу стилей с помощью атрибута title.

Это из http://www.w3.org/TR/REC-html40/present/styles.html

Источник

Мне потребовалось около 3 часов, чтобы дойти до конца, так как я добавлял новую таблицу стилей. Я думал, что у меня есть некоторые конфликты между существующими правилами CSS и теми, которые я добавлял. После исчерпания вменяемых опций я попытался удалить тег заголовка из ссылки. Я не слишком много думал об этом, думал, что это какие-то бесполезные метаданные. Что ж, оказалось, что именно это мешало анализу CSS. Оказывается, устаревший комитет стандартов мозгового мышления придумал это. Разве они не могли просто добавить новый более понятный атрибут для их предпочтительной функциональности и всего такого (независимо от того, какого черта он должен это делать) вместо того, чтобы полагаться на наличие или отсутствие атрибута заголовка? Я потерял все это время, которое нужно потратить на то, чтобы сделать что-то продуктивное. Во время поисков я пообещал себе, что приму меры, как только выясню причину этой проблемы. Теперь осталось определиться с мерами.

Источник

Прочитайте это: http://blogs.telerik.com/dimodimov/posts/08-05-15/title_attributes_in_css_link_tags_prevent_styles_from_being_applied.aspx

В течение некоторого времени я знал, что атрибуты заголовка в тегах CSS вызывают проблемы и предотвращают применение некоторых стилей CSS на веб-странице. Сегодня я потратил пару часов на выяснение того, что на самом деле происходит, и это то, что у нас есть.

Если у вас есть несколько тегов на странице, и один из них имеет атрибут title, то теги, следующие за ним, должны либо иметь атрибут title с тем же значением, либо вообще не иметь атрибута title, в противном случае стили в последних CSS-файлах будут не будет применяться на странице.

Эта проблема может быть легко воспроизведена в различных версиях Firefox, Opera и Safari. Единственный браузер, который не проявляет неожиданного поведения, это Internet Explorer.

Действительно странно oO

Источник
Другие вопросы по тегам