О фоне ссылок, всяких разных.

swetlana · February 11, 2011

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

Вот образец.

Суть в чём: у ссылки в различных состояниях (:link, :hover, :active, :visited) должен быть разный фон.

Казалось бы, чего проще? Фоном картинку, содержащую три варианта, а для псевдоклассов меняем background-position.

В общем случае всё работает как ожидалось, но:

В Safari и Chrome игнорируется background для :visited. Используется тот же, что и для :link или вообще без псевдоклассов;
В Firefox под Windows 7 фон для :visited работает, но при нажатии на ранее посещённые ссылки не обрабатываются никакие стили для :active. Как будто вообще сам факт нажатия на ранее посещённую ссылку игнорируется.

Результаты гугления: в вебките это, оказывается, не баг, а фича — типа из соображений безопасности такое сделано (хотя мне не понять эти сооражения). Про ФФ в Вин7 вообще упоминаний не удалось найти.

Вопрос: как? Что делать, если вдруг такое будет надо?

sigma77 · February 11, 2011

Свет,

А если расположить стили по принципу:

:link

:visited:

:hover

:active

psywalker · February 11, 2011

a { color: red;}
a:visited  { color: green;}
a:hover { color: blue;}
a:active { color: yellow;}
</style>


<ul>
		<li><a href="#1">туда</a></li>
		<li><a href="#2">сюда</a></li>
		<li><a href="#3">ещё куда-то</a></li>
	</ul>

swetlana · February 11, 2011

А если в таком порядке, то к бунтующим присоединяется ещё и ФФ в маке, начинает вести себя так же, как в вин7.

Макс, с цветами всё в порядке

Речь о фоне.

Ещё одно наблюдение.

Если писать в стиле безобразно-вольного html:

<!DOCTYPE html>
<title>Осторожно! Меню взрывается!</title>
<meta charset=utf-8>
<link rel="stylesheet" href="style.css">
<nav>
	<ul>
		<li><a href="there.html">туда</a>
		<li><a href="here.html">сюда</a>
		<li><a href="somewhere.html">ещё куда-то</a>
	</ul>
</nav>

имеем вышеописанное поведение.

Если же привести синтаксис в соответствие с правилами xml:

<!DOCTYPE html>
<html>
<head>
<title>Осторожно! Меню взрывается!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
	<ul>
		<li><a href="there.html">туда</a></li>
		<li><a href="here.html">сюда</a></li>
		<li><a href="somewhere.html">ещё куда-то</a></li>
	</ul>
</nav>
</body>
</html>

то ФФ начинает себя вести приличнее.

sigma77 · February 11, 2011

Ок.

Для ФФ можно попробовать :visited:active ...

psywalker · February 11, 2011

Макс, с цветами всё в порядке
Речь о фоне.

Я знаю. Это я просто пример накидал.

А вообще ща будем думать

Кстати заметил, что при таком доктайпе фф ведёт себя правильно вроде

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

swetlana · February 11, 2011

А вообще очень занятно.

У ФФ на этом примере в разных ОС (смотрю на Маке, Дебиане, ВинХР, Вин7) разное поведение.

psywalker · February 11, 2011

А вообще очень занятно.
У ФФ на этом примере в разных ОС (смотрю на Маке, Дебиане, ВинХР, Вин7) разное поведение.

И ИЕ вроде тоже через маленькие тупки, но ведёт себя правильно. Но вот хром что то тупит.

swetlana · February 11, 2011

Эксперименты показывают, что ФФ приструнить можно (хотя его поведение и странно).

А вот что нашлось про сафари с хромом:

http://support.apple.com/kb/HT4196

WebKit
Available for: Mac OS X v10.4.11, Mac OS X Server v10.4.11, Mac OS X v10.5.8, Mac OS X Server v10.5.8, Mac OS X v10.6.2 or later, Mac OS X Server v10.6.2 or later, Windows 7, Vista, XP SP2 or later
Impact: A maliciously crafted website may be able to determine which sites a user has visited
Description: A design issue exists in WebKit's handling of the CSS :visited pseudo-class. A maliciously crafted website may be able to determine which sites a user has visited. This update limits the ability of web pages to style pages based on whether links are visited.

и впрямь забота о безопасности…

Но странная.

SelenIT · February 11, 2011

Win 7 — и в FF3.6.13, и в FF4.0b11 :active для посещенных ссылок работает (картинка взрыва), независимо от доктайпа и стиля кодинга. Для просто посещенных фон не меняется только в 4.0 (потому что, да, паника, на Хабре по этому поводу тоже возмущались), в 3.6 меняется.

Как вариант, можно еще с :focus поиграть (вместе с :active, перед ним), для надежности...

swetlana · February 11, 2011

И действительно, в ФФ4 тоже фон посещённым ссылкам не поставить.

Видимо это тенденция, и надо запомнить, что теперь так нельзя.

SelenIT · February 11, 2011

Светлана, а всё-таки, как воспроизвести разное поведение в зависимости от закрытых/незакрытых тегов? У меня так и не вышло...

psywalker · February 11, 2011

SelenIT

Дружище, а если не трудно, объясни плиз механизм действия. Вот например я вставил в адресную строку адрес какого нибудь злобного сайта. Как он определяет по visited, по каким сайтам я до этого лазил ?

swetlana · February 11, 2011

SelenIT, а так у меня в посте 4 приведены два варианта кода.

Один — вольнорасхлябанный html, в котором даже тэги html, head, body отсутствуют и незакрыто всё, что можно не закрывать.

ФФ3.6 в Вин7 при таком коде не кажет :active для уже посещённых. Если поменять порядок свойств в css, то ФФ3.6 в маке тоже начинает вести себя так же.

А если код написать по правилам xhtml, то работает как ожидается.

Можно прямо на два приведённых варианта кода ориентироваться.

SelenIT · February 11, 2011

Как он определяет по visited, по каким сайтам я до этого лазил ?

Тупо проверяет огромный список доменов (~100k шт.). Подставляет поочередно в href ссылки и считывает стиль (тут вроде чуть подробнее).

Один — вольнорасхлябанный html, в котором даже тэги html, head, body отсутствуют и незакрыто всё, что можно не закрывать.
ФФ3.6 в Вин7 при таком коде не кажет :active для уже посещённых.

"Отрежьте мне язык, но я должен это увидеть! ©" По ссылке http://swetlanabayer.ru/blog/examples/bomb/ именно этот вариант? Почему же у меня FF3.6.13 в Win7 в нем всё показывает, зараза он этакая?..

psywalker · February 11, 2011

Тупо проверяет огромный список доменов (~100k шт.). Подставляет поочередно в href ссылки и считывает стиль (тут вроде чуть подробнее).

Ага, спасибо дружище.

swetlana · February 11, 2011

"Отрежьте мне язык, но я должен это увидеть! ©" По ссылке http://swetlanabayer.ru/blog/examples/bomb/ именно этот вариант? Почему же у меня FF3.6.13 в Win7 в нем всё показывает, зараза он этакая?..

именно этот вариант.

почему… не знаю.

SelenIT · February 12, 2011

Мистика какая-то. Это противоречит всему, что я когда-либо знал о HTML и о браузерах. Я уж было подумал про html5.enable в конфиге — нет, ни без него, ни с ним добиться описанного поведения не получается... Извиняюсь за глупый вопрос, но оно точно стабильно воспроизводится? И нельзя ли уточнить версию FF?

Аналогичный вопрос другим участникам/читателям темы, кто может проверить ссылку в FF/Win7 — наблюдается ли у вас описанная странность, и если да — какова точная версия FF?

Vlad · February 12, 2011

Fx3.6.13, Win7 работают корректно псевдоклассы. Опера 11 такое же поведение.

swetlana · February 12, 2011

… какова точная версия FF?

3.6.10.

Если на что-то влияет, то точная версия ОС 7600.

Может, если обновиться, то и не будет странности. Но я боюсь её трогать.

В Опере вполне ожидаемое поведение.

Хотя, как выяснилось, есть вероятность, что все браузеры урежут возможности по оформлению :visited

SelenIT · February 12, 2011

Специально скачал и поставил 3.6.10... что я делаю не так?

swetlana · February 12, 2011

SelenIT, не знаю. Честно.

SelenIT · February 12, 2011

Всё равно не укладывается в голове, что поведение ссылок может кардинально меняться от наличия/отсутствия по соседству с ними текстовой ноды с пробелом (единственное, что меняется в DOM от явного закрытия </li>). Светлана, а расширение файла точно не менялось на .xhtml?..

swetlana · February 12, 2011

Расширение не менялось, менялось лишь само содержимое.

SelenIT · February 12, 2011

Мда, на отличия XML-режима не спишешь, остаются лишь пробелы в DOM... и луна в первой четверти

swetlana · February 12, 2011

Вообще мне более интересным из этой темы видится грядущее изменение в поведении :visited.

Sign In

О фоне ссылок, всяких разных.

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information