CSS: меняем стиль для ссылок, открываемых в новом окне
Все мы понимаем, что иногда ссылки удобней открывать в текущем окне, а иногда - в новом. Я лично в большинстве проектов придерживаюсь незамысловатого правила - если ссылка внутренняя (в пределах сайта), то по умолчанию она открывается в текущем окне, а внешние ссылки, ведущие куда-то на другие сайты, по умолчанию открывают новые окна (вкладки).
С точки зрения HTML открыть ссылку в текущем или новом окне элементарно. Если в теге ссылки
<a href="URL-адрес" target="окно">...</a>
атрибут target
не указан или задан в виде target="_self"
, то документ открывается в текущем окне браузера, а если ссылке назначен атрибут вида target="_blank"
, документ открывается в новом окне.
Но тогда возникает вопрос - как пользователь отличит эти 2 вида ссылок, не щелкая по ним или не заглядывая в HTML-код страницы?
Логичней всего, если CSS-оформление двух видов ссылок будет разным, вот вариант, при котором ссылки с
target="_blank"
выделяются жирным шрифтом:
a { font-weight:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "bold" : "normal"); } a[target="_blank"] { font-weight:bold; }
Здесь, как это часто бывает, приходится отдельно учитывать Internet Explorer и остальные браузеры, первое стилевое указание - как раз для IE, а второе - для остальных браузеров.
Аналогично можно поэкспериментировать с каким-либо другим свойством CSS, например, с подчёркиванием text-decoration
:
a { text-decoration:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "underline" : "none"); } a[target="_blank"] { text-decoration:underline; }
В зависимости от иерархии свойств CSS, в конкретном браузере может чего-нибудь и не сработать. Плюс задействовать подчёркивание, когда по умолчанию все ссылки и так подчёркнуты (или не подчёркнуты), я бы не стал.
Альтернативный и кросс-браузерный путь - попробовать отделить внешние ссылки от остальных по их адресам. Предположим, что внешние ссылки всегда указываются как абсолютные (начиная с префикса http://
), а внутренние пишутся как относительные. Чаще всего на нормальных сайтах так и делают.
Это работает и в IE, по крайней мере, с 8-й версии.
A[href^="http://"] { font-weight: bold /* Жирное начертание для абсолютных ссылок */ }
Но здесь мы отклонились от исходной задачи и просто требуем, чтобы URL начинался с http://
,
то есть, выделяем жирным начертанием абсолютные URL, которые не обязательно внешние, а не все ссылки,
открывающиеся в новом окне.
Если не принимать во внимание IE 6 и 7 версий, можно всё сделать проще, через псевдоэлементы before и after, позволяющие указать, что нужно выводить до или после элементов, к которым они добавляются.
Например, через стиль мы можем добавить маленький рисуночек после каждой ссылки, открывающейся в новом окне.
Однако мне кажется, что логичней просто изменить оформление фона ссылки, открываемой в новом окне - ведь добавление какого-либо текста или картинки до или после ссылки может нарушить макет сайта. Чтобы не мучиться, мы поставим желтоватый фоновый цвет всем ссылкам, открываемым в новом окне.
a[target="_blank"] { background-color: #FFFF99; } a { background-color: expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "#FFFF99" : "transparent"); }
По-прежнему сделаны отдельные стилевые указания для Internet Explorer и остальных браузеров.
А можно попробовать прилепить и фоновый рисуночек через свойство background.
Что касается ссылок-рисунков, то наш приём сработает только если таковые имеют прозрачный фон:
Но в большинстве случаев рисункам-ссылкам какое-то особое выделение и не нужно, оно ясно из контекста (например, если маленькие рисунки-preview являются ссылками на большие рисунки, загружаемые в новые окна).
Результат Вы можете видеть прямо в этом блоге, я только что добавил показанные здесь директивы в его стиль. Кстати, если посоветуете более подходящий цвет - буду только рад :)
06.08.2011, 23:51 [15161 просмотр]