Иконки для ссылок по типу файлов

Случайно наткнулся на этот прием в одном из шаблонов для cms joomla, может и вам пригодится так как он вполне универсален.
Частенько на наших сайтах встречаются ссылки на какие-либо файлы.
Чаще всего это бывают документы doc или pdf. Примерно с той же частотой мы задумываемся над тем, что было бы неплохо и даже логично рядом с cсылкой поместить иконку соответствующую типа файла (расширению).

Сделать это проще простого:
Например, для тех же .doc и .pdf — файлов инструкции в css будут выглядеть так:

a[href$=".pdf"] {
	padding: 0 0 0 20px;
	background: transparent url(/images/pdf.jpg) no-repeat left top;
}
 
a[href$=".doc"] {
	padding: 0 0 0 20px;
	background: transparent url(/images/doc.jpg) no-repeat left top;
}

Рекомендую использовать картинки иконок размером 16×16 px.

Причем заметьте что параметр задан как 'top', тем самым мы указываем старику ИЕ (InternetExplorer)
то что в случае многострочной ссылки ее бэкграунд следует ровнять по верхнему краю. Остальные бродилки сделают это автоматом.

Вероятно такая конструкция работает по принципу поиска в атрибуте href подстроки с расширением и, следовательно, можно много чего придумать полезного помимо иконок.
Это предположение подтверждает размещение штрихового подчеркивания под javascript-ссылками сделанное с помощью css-правила: a[href$="javascript:;"] {border-bottom:1px dashed;text-decoration:none !important;}

1 Комментарий

  • 09.11.2010 Я:

    Спасибо, очень просто и быстро. Я уж думал мудрить с php.


Добавление комментария:

 css.php