[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Разные стили для внутренних и внешних ссылок)
Дата: Суббота, 06.04.2013, 12:00 | Сообщение # 1
Администраторы - Admin™
  • Сообщений: 4
  • Репутация: 81
На многих сайтах внешние ссылки оформляется иначе, чем внутренние (например, в конце ссылки добавляется пиктограммка). Это повышает удобство сайта, т.к. пользователь еще не наводя мышкой на ссылку (чтобы увидеть подсказку) и не кликая по ней, информирован, что по этой ссылке перейдет на другой сайт. Пример — оформление внешних ссылок на Википедии:



Для реализации этого первое, что приходит в голову — прописать дополнительный класс. Например так:
CSS:
Код
.outLink{
background:url(path-to/outLink.gif) right 2px no-repeat;
padding-right:14px;
}

HTML:
Код
<a href="#" title="внешняя ссылка" target="_blank" class="outLink">Ссылка</a>

Но введение дополнительного класса в данном случае не лучший вариант. Представь себе пользователя, который работает только с админ панелью CMS и знать не знает ни про какие HTML теги. И вот ему придется ради оформления внешних ссылок, лезть в код, и ставить класс вручную — как минимум не удобно.
ЗадачаСделать оформление внешних ссылок не напрягая пользователя.

Решение 1 — программное решение
Программист, делает добавление нужных классов в дружелюбном для пользователя стиле в используемой CMS (например, пользователь выделяет нужную ссылку и выбирает какой класс ей добавить).

Решение 2 — привязываем оформление к атрибуту target="_blank"
CSS:
Код
a[target="_blank"]{
background:url(path-to/outLink.gif) right 2px no-repeat;
padding-right:14px;
}

HTML
Код
<a href="#" title="внешняя ссылка" target="_blank" >Ссылка</a>

Остался еще один нюанс - наш горячо любимый ie6! Для него прописываем в CSS:
CSS
Код
* html a{
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
target == "_blank" ? (className += "outLink") : 0 /* добавляем нужный класс */
)
}
* html a.outLink{
background:url(path-to/outLink.gif) right 2px no-repeat;
padding-right:14px;
}

Проверено в:
IE 6-8Firefox 2-3Opera 9.5Safari 3.1Плюсы метода:
достаточно простоптимизированный expression отработает только один раз при загрузке страницыдает возможность оставить более чистый (без лишних классов) код программистам и поисковым роботам
Недостатки:
не проходит валидацию (использование атрибута target запрещено по стандартам (Strict 1.0 / XHTML 1.1))


  • Страница 1 из 1
  • 1
Поиск:

Администрация проекта не несет какую-либо ответственность за
публикуемые пользователями материалы. Хостинг от uCoz.
Главный администратор сайта - Tolik.
Дизайн от life_man, верстка от sp1nn15.