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

196 • Глава 5. Повышение эффективности за счет псевдоклассов

С другой стороны, на реальных страницах с большим количеством содержимого
подсветка заголовков может стать важным средством повышения удобства исполь-
зования. Вспомните пример из энциклопедии Wikipedia с сотнями сносок — там
подсветка приносит ощутимую пользу. А иногда раздел, к которому переходит
пользователь, оказывается очень близко к концу страницы — браузер не может
прокрутить содержимое так, чтобы название раздела выводилось наверху окна,
и пользователь теряется. Если на вашей странице внедрение обходного пути для IE
оправдано, используйте JavaScript. Вот несколько сценариев, которые помогут вам:

«Suckerfish :target» авторов Patrick Griffiths и Dan Webb (http://www.htmldog.com/
articles/suckerfish/target);
«Improving the usability of within-page links» автора Bruce Lawson (http://dev.opera.
com/articles/view/improving-the-usabilityof-within-page-l);
«Fragment Highlight» автора David Dorward (http://dorward.me.uk/software/frag).

анимирование изменений только С помощью CSS
Очередным приятным усовершенствованием выделения заголовков стало бы по-
степенное нарастание или снижение яркости фонового цвета. «Движение», опре-
деляемое постепенной сменой цвета, привлекло бы внимание зрителя еще лучше,
чем резкое изменение оформления.
Сделать это можно было бы с помощью JavaScript. Одна из популярных реали-
заций подобного эффекта называется Yellow Fade Technique (Техника затухания
желтого цвета). Ее создатели, 37signals, впервые применили этот метод в известном
веб-приложении Basecamp. Когда пользователь вносит изменение, оно на секунду
подсвечивается желтым фоновым цветом, который затем постепенно бледнеет
и исчезает. Это привлекает дополнительное внимание к отредактированному
элементу и повышает удобство использования: пользователю становится проще
ориентироваться, и он не пропускает важную информацию на странице. Статью
из блога 37signals, рассказывающую о технике Yellow Fade Technique, вы найдете на
странице http://37signals.com/svn/archives/000558.php.
И разумеется, мы можем добиться похожего результата, применив вместо JavaScript
возможности CSS3. Браузеры на базе Webkit, Opera и Firefox 4 поддерживают
переходы; кроме того, Webkit-браузеры также поддерживают эффекты анимации,
создаваемые исключительно с помощью CSS. На нашей странице переходы можно
применить для усиления яркости цвета сразу после перемещения к целевому эле-
менту и постепенного ее снижения после того, как цель снята. Анимация позволяет
повышать и понижать яркость цвета — или по очереди делать и то и другое — после
перемещения к цели. Давайте опробуем оба варианта.

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

www.trk.kg