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

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

• добавление визуальных индикаторов к элементам, для которых установлен атрибут
title (с использованием [title]);
• удаление маркеров из списков внутри навигационных блоков div (например, с по-
мощью div[id^=nav] для выбора <div id="nav-primary"> и <div id="nav-secondary">);
• стилизация адресов электронной почты (с помощью a[href^=mailto]; см. http://css-tricks.
com/better-email-links-featuring-css-attribute-selectors);
• стилизация ссылок, ведущих на внешние сайты (с использованием a[href^=http] или
a[rel=external]), защищенных ссылок (с помощью a[href^=https]), ведущих на опре-
деленный веб-сайт (например, a[href*="paypal.com"]), открывающихся в новом окне
(с использованием a[target="_blank"]) или указывающих на вашу домашнюю страницу
(с помощью a[href="http://myurl.com"] или a[href="/index.html"]);
• проверка пустых ссылок перед запуском сайта (см. http://fuelyourcoding.com/
unconventional-css3-link-checking);
• отображение ключа или ссылки доступа (с помощью a:after { content: ‘[‘ attr(accesskey) ‘]’ });
• отображение источника цитирования для blockquote (с использованием block-
quote[cite]:after { content: ‘ - ‘ attr(cite) } );

• разнообразная стилизация блоков blockquote в зависимости от значения атрибута cite;
• отображение альтернативного текста изображения в качестве подписи к нему (с ис-
пользованием img[alt]:after { content: attr(alt) });
• создание пользовательских таблиц стилей, скрывающих объявления на веб-страницах
(см. http://24ways.org/2005/the-attribute-selector-for-fun-and-no-ad-profit);
• запись правил таким образом, чтобы их не смог прочитать браузер IE 6.

Таблица 4.3. Поддержка селекторов атрибутов в браузерах
IE Firefox Opera Safari Chrome
Да, начиная с версии 7* Да Да Да Да

* IE 7 и более поздние версии поддерживают все селекторы атрибутов, но зачастую
с ошибками. Очень внимательно отнеситесь к тестированию.

применение Селекторов атриБутов для выБора элементов по типу
Если между кодом HTML для эскизов и для фотографий есть какие-то значимые
различия, мы можем воспользоваться ими и снова применить селекторы атрибутов.
В нашем случае различие заключается в том, что эскиз карты сохранен в папке под
названием thumbnails, а фотографии — в папке photos. Имя папки входит в путь,
являющийся значением атрибута src, поэтому, ориентируясь на значение этого

www.trk.kg