Разные стили для внутренних и внешних ссылок
Как сделать разные CSS-стили отдельно для внешних ссылок и для внутренних ссылок.На многих сайтах внешние ссылки оформляется иначе, чем внутренние (например, в конце ссылки добавляется пиктограммка). Это повышает удобство сайта, т.к. пользователь еще не наводя мышкой на ссылку (чтобы увидеть подсказку) и не кликая по ней, информирован, что по этой ссылке перейдет на другой сайт. Пример — оформление внешних ссылок на Википедии:
Для реализации этого первое, что приходит в голову — прописать дополнительный класс. Например так:
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:
* 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-8
- Firefox 2-3
- Opera 9.5
- Safari 3.1
Плюсы метода:
- достаточно прост
- оптимизированный expression отработает только один раз при загрузке страницы
- дает возможность оставить более чистый (без лишних классов) код программистам и поисковым роботам
Недостатки:
- не проходит валидацию (использование атрибута target запрещено по стандартам (Strict 1.0 / XHTML 1.1))
Решение 3 — ищем сигнатуру в атрибуте href
Суть решения в том, что внешние ссылки можно отличить от внутренних по характерному началу адреса. Это может быть, например http или https, которые могут не использоваться для внутренних ссылок. Или наоборот, внутренняя ссылка начинается с определенной строки. В этом варианте можно отказаться от невалидного target.
CSS:
a[href^="http"]{
background:url(path-to/outLink.gif) right 2px no-repeat;
padding-right:14px;
}
Как всегда для ie6 особое решение &mdash через expression:
* html a{
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1, this.getAttribute("href").lastIndexOf("http")==0 ? (className += "outLink") : 0 /* добавляем нужный класс */
)
}
* html a.outLink{
background:url(path-to/outLink.gif) right 2px no-repeat;
padding-right:14px;
}Плюсы метода:
- достаточно прост
- оптимизированный expression отработает только один раз при загрузке страницы
- дает возможность оставить более чистый (без лишних классов) код программистам и поисковым роботам
Недостатки:
- возможны затруднения с подбором сигнатуры
- 0 Гид по «Фотошопу» для чиновников (10.09.2013)
- 0 Twitter Bootstrap Carousel Crossfade (09.09.2013)
- 0 Inline-block vs float (22.08.2013)
- 0 DHTMLX: Фильтрация в колонке типа Subgrid, вложенной в Grid (05.08.2013)
- 0 Список li в две колонки (CSS) (13.03.2013)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Выравниваем div внутри другого div по центру (27.11.2017)
- Пробелы между пунктами меню (16.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Выравнивание изображения по центру в Bootstrap (11.12.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Как сделать какую-либо область на сайте кликабельной ссылкой? (11.08.2015)
- Красивое выравнивание характеристик на странице товара с отступами, отмеченными точками (11.07.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
- Добавление сторонних шрифтов от Google на свой сайт (22.01.2015)
- Скролл-эффекты CSS3 и JQuery при прокрутке страницы (13.01.2015)
- Как в iframe показывать только определённую область страницы (04.03.2013)
- TeamSense: username (логин) в регистрации пользователя. Внедрили библиотеку DHTMLX в TeamSense. (11.01.2013)
- Старт видео с определенного времени на Youtube (11.01.2013)
- DHTMLX и Yii: как использовать условия в выборке из базы данных. (02.01.2013)
- DHTMLX: Устанавливаем тип поля dhxCalendarA (всплывающий календарь) для полей типа date (datetime) в компоненте dhtmlxGrid (20.12.2012)
- В Google Maps появились планы помещений (25.11.2012)
- Отзывчивый или Адаптивный веб-дизайн (Responsive Web Design) (05.01.2013)
- Что скрывается за "дизайном" на самом деле? (16.11.2012)
RSS комментариев к этой статье.
4 комментариев
Я сделал так:
a[href^="http"]{стиль внешних ссылок}a[href^="http://loco.ru"]{стиль внутренних ссылок}a
{стиль внутренних ссылок}В Мозилле и последнем Эксплорере работает отлично.
Чудесно. Спасибо! Правда немного пришлось усложнить. Вот как выглядит css стилизация для сайта loco.ru:
a:link, a:visited, a:active, #footer a[href^="http"] {padding: 0;
background: none;
}
a[href^="http"] {
background:url('external-link-orange.png') right 2px no-repeat;
padding-right:14px;
}
a[href^="http://loco.ru"] {
background: none;
color: #801000;
margin: 0 0 0;
padding: 0;
text-decoration: underline;
}
a:link, a:visited, a:active {
color: #801000;
margin: 0 0 0;
text-decoration: underline;
}