Исправление css при добавлении к ссылкам favicon

После того, как в очередном сообщении favicon закрыли часть ссылок, поправил данную проблему, добавив background-size:16px; в следующую строчку шаблона:

thisUrl.setAttribute('style', 'padding-left:20px;text-indent:0px;background-position:left center;background-repeat:no-repeat;background-size:16px;background-image:url('+urlHref+');');

Описание скрипта и исходный код можно посмотреть в сообщении Добавление favicon для ссылок с использованием javacript.

Добавление favicon для ссылок с использованием javacript

При описании стиля для дружественных ссылок возник вопрос по автоматическому добавлению соответствующего favicon. Совместными усилиями с r1mson и aam β-развитием этой темы стал javacript добавляющий к ссылкам favicon с сайта на который они ссылаются.

Скрипт размещается в шаблоне HTML перед закрывающим тегом </body>:
<script type='text/javascript'>
//<![CDATA[
  var allUrls = document.evaluate(
    '//div[contains(@class,"favicon")]//a[count(img)=0]',
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

  for (i = 0; i < allUrls.snapshotLength; i++) {
    var thisUrl = allUrls.snapshotItem(i);
    var urlHref = thisUrl.getAttribute('href');
    if (urlHref) {
      urlHref = urlHref.replace(/^(.*:\/\/[^\/]*).*/, '$1/favicon.ico');
      thisUrl.setAttribute('style', 'padding-left:20px;text-indent:0px;background-position:left center;background-repeat:no-repeat;background-size:16px;background-image:url('+urlHref+');');
    }
  }
//]]>
</script>

<!-- Добавить перед этим тегом -->
</body>
Скрипт будет действовать на ссылки, которые находятся внутри элементов со стилем favicon.
Для более точного указания области действия необходимо поставить флажок 'Расширить шаблоны виджета'. После этого найти нужные виджеты и добавить стиль favicon.
Для содержимого статьи:
<div class='post-body entry-content favicon'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Для общих новостей:
<b:widget id='HTML1' locked='false' title='Общие записи' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content favicon'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

После этого проверяем. Если Ваши ссылки ведут на сайты с favicon, то выглядеть они будут примерно так:


Известные ошибки:
* если у сайта нет favicon.ico, то перед ссылкой будет 20 пикселей пустого места.

Особенности:
* для ссылок содержащих картинки, favicon добавляться не будет,
* кавычки, если есть, должны входить в состав ссылки.

Как заменить favicon в blogger

Сегодня поменял favicon для своего блога. Как это сделать нашёл в seorussian.blogspot.com.

Если коротко, то в шаблоне HTML после заголовка необходимо указать:

<link href='http://favicon.ru/favicon.ico' rel='shortcut icon'/>

Дружественные ссылки

Для выделения ссылок на другие блоги aam предложил использовать специальные классы. Описание класса для blogger.com представлено ниже. Для создания класса для livejournal.com и др. необходимо заменить ссылку на favicon.ico

<style type='text/css'><!--
a.blogspot{
font-weight:bold;
padding-left:20px;
text-indent:0px;
background-position:left center;
background-repeat:no-repeat;
background-image:url(http://www.blogger.com/favicon.ico);"
}
--></style>

Описание класса необходимо разместить в шаблоне блога. Для этого идём в панель инструментов / макет / Изменить HTML и добавляем описание класса сразу после:

<title><data:blog.pagetitle/></title>

Для использования стиля в ссылку необходимо добавить class="blogspot", например:

<a class="blogspot" href="http://aam-blog.ru/">aam</a>

Как посмотреть кэш Firefox

Сегодня коллегой был задан вопрос: "как посмотреть кэш Firefox".
Ответ на него нашёлся быстро. Для просмотра кэша на диске в адресной строке браузера нужно ввести:

about:cache?device=disk

В ОЗУ:

about:cache?device=memory

Несколько удивило, что фоновое изображение размером 82кБ (jpeg), в памяти занимало 7,3МБ. Кроме него было ещё несколько растягиваемых изображений по 5-15КБ, занимавших в памяти 0,5-1,7МБ.

О печати

Немного о подготовке версии для печати.
Удивило, что автор пытается «забелить» фон - обычно при печати браузеры его игнорируют.