Иконки типов файлов возле каждой ссылки на чистом CSS

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

Это все очень просто можно сделать при помощи CSS, даже не потребуются скрипты.

Каждый файл у нас — это ссылка.
Итак:

myArch.zip

Теперь прописываем общий стиль в CSS:

a{
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(icon.png) no-repeat;
}

То есть мы задали смещение для текста ссылки на 18 пикс влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, то есть если пользователь добавит файл, не описанный нами.

Теперь приступим к описанию типов файлов:

a[href $='.pdf'] {
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(pdf.png) no-repeat;
}
a[href $='.zip'] {
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(zip.png) no-repeat;
}

И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).

Пример отображения архива, в html написано только:

psycho.zip

Практически также как и эти иконки у ссылок выводятся и фавиконки в выдаче поисковика. Фавикон — это очень важная часть сайта, без которой его будет сложнее запомнить и как-то выделить. Посмотрите статью про онлайн генераторы Favicon, очень полезно.

161