Page 160 - Сила CSS3 Освой новейший стандарт

160 • Глава 4. Стилизация изображений и ссылок в зависимости от их типа

background-repeat: no-repeat;
background-position: 0 3px;
-moz-background-size: 1.2em;
-webkit-background-size: 1.2em;
background-size: 1.2em;
}

Я не стала добавлять этот код CSS на страницу, потому что масштабирование значков
делает их расплывчатыми — даже если изображения уменьшаются, а не увеличиваются.
Мне кажется, что масштабирование таких маленьких и четких изображений в браузере —
очень неудачная идея. Однако я все же рекомендую вам запомнить эту технику на случай,
если понадобится масштабировать более подходящие для этого изображения, на которых
небольшая нечеткость не будет заметна.

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

Говорить, а не показывать
Значки — это очень удачный вариант подсказки, моментально дающий понять
пользователям, файл какого типа им предлагается загрузить. Однако если вы же-
лаете полностью исключить возможное недопонимание, в дополнение к значкам
(или вместо них) в конце каждой ссылки можно дописывать генерируемое на лету
расширение файла.
Во-первых, необходимо удостовериться, что эта информация еще не была вручную
добавлена к ссылкам. После этого можно добавить правила, подобные тому, которое
дописывает «(PDF)» в конце каждой ссылки на файл PDF:

a[href$=".pdf"]:after {
content: " (PDF)";
}

Объединение нескольких селекторов атрибутов
Как и селекторы почти любого другого типа, селекторы атрибутов можно группи-
ровать, чтобы еще точнее выбирать в коде необходимые элементы. Например, перед
вами стоит задача выводить значок фотографии рядом со ссылками на изображения
PNG и значок диаграммы рядом со ссылками на изображения PNG, содержащие
некие диаграммы. В зависимости от схемы именования изображений, можно при-
менить подобный селектор:
a[href$=".png"][href*="chart"] {
background-image: url(images/icon_chart.png);
}

www.trk.kg