Иконка рядом с внешними ссылками

Оригинал: css-tricks.com/favicons-next-to-external-links/

Перевод: Влад Мержевич

Пару недель назад я открыл код JSFiddle от CSS Wizardry в моём браузере. Я продолжаю думать об этом, потому что до этого получил от кого-то письмо, где по сути спрашивали то же самое, и эта идея застряла у меня в голове. Они хотели вставить иконку рядом со ссылкой и использовать для этого только CSS. К сожалению, я не нашел способа сделать именно так, но с помощью некоторого jQuery мы можем добиться результата довольно легко.

«Я хочу» только технику CSS

Насколько было бы приятно, если бы у нас был простой семантический код вроде этого:

HTML

<a href="http://github.com">GitHub</a>

И тогда вы могли бы вставить фоновое изображение иконки с помощью сервиса вроде getFavicon.

CSS

/* Честно заявляю, это не работает */

a[href^="http"]:before {    
  content: url(http://g.etfv.co/ + attr(href) + );  
}

Может быть код будет не именно таким, но похожим. Дело в том, что вы не можете смешивать синтаксис url() с другими частями CSS.

Сервис Google Favicon

У Google есть свой собственный сервис иконок, который вы можете использовать. К примеру:

http://www.google.com/s2/u/0/favicons?domain=css-tricks.com

Хитрость в том, что нужно только имя хоста, домен верхнего уровня и больше ничего. Я поискал и нашёл простое регулярное выражение для получения их из любого URL. Нам это требуется, потому что ссылки не всегда (даже как правило) ведут на корень сайта.

JavaScript

function getDomain(url) {     
  return url.match(/:\/\/(.[^/]+)/)[1];  
}

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

jQuery

$("a[href^='http']").each(function() {     
   $(this).css({
     background: "url(http://www.google.com/s2/u/0/favicons?domain=" + getDomain(this.href) +
     ") left center no-repeat",          
     "padding-left": "20px"
   });  
});

Затем @Travis напомнил мне, что вы можете просто использовать this.hostname вместо вычурных регулярных выражений. Итак:

jQuery

/* Больше ничего не надо */  

$("a[href^='http']").each(function() {      
  $(this).css({          
     background: "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname +
     ") left center no-repeat", 
     "padding-left": "20px" 
  });  
});

Я не уверен, что все браузеры поддерживают hostname и насколько это лучше чем href точно не знаю.

Метод getFavicon

@seanodotcom показал мне еще один подобный сервис называемый getFavicon. Он основан на Google AppEngine, но это не собственный сервис Google. Я считаю, что он работает немного медлено. Но преимущество в том, что вам не придется иметь дело с именами хостов вообще, вам достаточно указать URL.

И вот что получается:

jQuery

$("a[href^='http']").each(function() {     
   $(this).css({          
     background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat", 
     "padding-left": "20px"      
   });
});

Просмотр демо

Производительность?

Уверен, вы знаете о том, что количество HTTP-запросов страницы оказывает огромное влияние на производительность. Каждое небольшое изображение создаёт новый запрос на странице.

@yuritkanchenko указал мне замечательный сервис иконок, который может автоматически собирать значки для вас в один запрос.

Как пример:

http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com

Боюсь, я не смогу сделать лишние шаги и написать необходимый JavaScript для нахождения всех ссылок, объединения доменов, создания запроса, а затем получения изображения. Но уверен, вы справитесь с этим довольно быстро, если вам это действительно нужно.