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

Сегодня я решил разобраться в новых возможностях, которые нам принёс выпуск третьей версии стилей CSS, и применить их к оформлению сайтов. Так вот, новые селекторы CSS3 представили возможность выделять внешние ссылки через CSS. Но, к сожалению, работает такое выделение только в браузерах, поддерживающих возможности CSS3, к которым не относится IE (по крайней мере, в восьмой версии не работает проделанное).

В этом посту я разберу парочку примеров выделения внешних ссылок при помощи CSS, которое можно применить не только к готовому движку (например, к WordPress), но и к самописным сайтам и своим страничкам независимо от платформы.

Выделение внешних ссылок добавкой элементов

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

a[href^="http://"]:not([href*="sitestroyblog.ru"]):after {
 content: " " url(external.png);
}

Данный код добавляется в файл стилей или в блок <style> шапки. Вместо sitestroyblog.ru вписываете ссылку на свой сайт без http://. Пробел в кавычках добавлен для того, чтобы отделить текст от изображения. Так по-моему лучше это выглядит. 😉 Ну и ссылку на изображение также надо заменить на свою. А в итоге в тексте это будет выглядеть так:
Внешняя ссылка

Или можно добавить некий текст после внешней ссылки. Например:

a[href^="http://"]:not([href*="sitestroyblog.ru"]):after {
 content: " [внешняя ссылка]";
}

Результат: Анкор [внешняя ссылка]

Выделение внешних ссылок без добавок

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

a[href^="http://"]:not([href*="sitestroyblog.ru"]) {
 text-decoration: none;
 border-bottom: dashed 1px;
}

В результате получите следующее: Внешняя ссылка

Замечания и примечания

1. Как и было указано выше, данные стили (коды) не работают в IE8. Поэтому, к сожалению, для пользователей IE8 надо придумывать что-то новенькое. Или ждать пока они перейдут на другие браузеры.

2. Вышеуказанные коды применяются только для адресов, начинающихся с http://. А как же быть, если ссылка ведет на какой-либо FTP-сервер? Необходимо просто слегка подкорректировать вышеуказанные коды и получить следующее:

a[href^="ftp://"]:not([href*="sitestroyblog.ru"]) {
 ...
}

Или, если вы хотите выделить и http, и ftp ссылки одинаково, можно использовать следующий шаблон:

a[href^="http://"]:not([href*="sitestroyblog.ru"]), a[href^="ftp://"]:not([href*="sitestroyblog.ru"]) {
 ...
}

3. Также коды, которые я написал выше, работают для всех ссылок блога. Если вы хотите использовать вид ссылок лишь в каком-либо одном фрагменте сайта, то необходимо указать ID или класс элемента, где нужно выделить внешние ссылки. Например, если в элементе с классом postview нужно выделить внешние ссылки, то используется следующий шаблон:

.postview a[href^="http://"]:not([href*="sitestroyblog.ru"]) {
 ...
}

А если указан ID элемента postview, вместо .postview необходимо вписать #postview.

И ещё советую посетить раздел CSS HTML-книги, где вы сможете найти много полезных свойств CSS и описания к ним, а также примеры по их применению. А я, пожалуй, завершу этот пост. 😉 У кого остались вопросы, задавайте их в комментариях. До новых встреч.

Остальным предлагаю хорошо отметить свои значительные даты, заказать лимузин и развлечься от души. Праздники пройдут на славу!