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

Динамическая подсветка разделов страницы • 209

Сохраните страницу и проверьте ее в разных
браузерах — на базе Webkit и каких-нибудь Завершенная страница со всеми
других. В браузере на базе Webkit вы увидите этими эффектами, которую вы мо-
анимационный эффект растворения фонового жете открыть в разных браузерах,
цвета заголовка, выбранного в качестве цели. называется target_final.html. Она
сохранена в папке с остальными
В браузерах, поддерживающих переходы, отобра- файлами упражнений для этой
жаться будет только переход с усилением яркости главы.
фонового цвета целевого раздела. В браузерах, не
поддерживающих ни переходы, ни анимацию,
но поддерживающих :target (таких как IE 9 и
Firefox 3.6 и более ранние) сразу же после выбора определенного заголовка целью под
ним будет появляться голубая подсветка. И наконец, в браузерах, не поддерживаю-
щих ничего из вышеперечисленного (таких как IE 8 и более ранние), при щелчке на
ссылке в оглавлении с заголовками разделов ничего особенного происходить не будет.
Разумеется, ссылки в оглавлении все так же будут работать — страница будет
прокручиваться до выбранного раздела, как это обычно и бывает. Таким образом,
пользователи устаревших браузеров не заметят, что в этой статье чего-то не хватает.
Если вы считаете, что эффект с плавным изменением фонового цвета целевого за-
головка необходим во всех существующих браузерах, то попробуйте один из этих
обходных путей:

используйте анимированное изображение в формате GIF. Да, эта техника немного
устарела, но возраст не делает ее менее полезной. Помните, что она работает только
в браузерах, поддерживающих селектор :target. Вам нужно всего лишь добавить
изображение GIF, представляющее смену цвета, в качестве фонового изображения
к правилу h2:target. Подробное изложение этого метода приведено в статье «Star
on :target» автора Brian Suda на странице http://thinkvitamin.com/dev/stay-on-target;

используйте сценарий. Он будет работать вне зависимости от того, поддерживает
браузер селектор :target или нет (конечно, на компьютере пользователя должно
быть включено использование JavaScript, а сценарий должен быть написан имен-
но для того браузера, в котором работает пользователь). Подобные сценарии не
относятся к тематике данной книги, но на страницах http://www.marcofolio.net/
css/css3_animations_and_their_jquery_equivalents.html и http://weston.ruter.net/
projects/jquery-css-transitions вы найдете несколько сценариев, заставляющих ра-
ботать всевозможные переходы и анимацию. Также поищите в Google каркас для
создания анимации в JavaScript, выполнив поиск по запросу «javascript animation
framework». Наконец, если вас интересует техника с растворением цвета, выполните
в Google запрос «yellow fade technique», и вы обнаружите целый набор сценариев —
как автономных, так и связанных с определенным каркасом. Выбирайте любой.
В любом случае, не забывайте прятать дополнительный код CSS и сценарии от
браузеров, не понимающих и не поддерживающих их; применяйте для этого либо
условные комментарии IE, либо сценарий Modernizr.

www.trk.kg