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

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

@keyframes fade {
0% {background: hsla(203,78%,36%,.2);}
20% {background: hsla(203,78%,36%,.2);}
100% {background: none;}
}

Теперь анимация начинается с отображения по-
Для того чтобы увидеть эту ани- стоянного голубого фона — это продолжается
мацию в действии, откройте файл в течение первых 20% времени, отведенного
target_5.html из папки с файла- на анимационный процесс (0,4 секунды). За-
ми упражнений для этой главы в тем цвет начинает постепенно растворяться до
браузере Safari или Chrome. Этот прозрачного.
документ содержит все измене-
ния, которые мы внесли с начала Обходные пути для не поддерживающих
главы и до настоящего момента. данную возможность браузеров
Анимация с растворением фонового цвета те-
перь отлично работает в Safari и Chrome, но как
насчет всех остальных браузеров? Для того чтобы анимация заработала, нам при-
шлось удалить фоновый цвет целевых элементов h2, поэтому при щелчке на ссылке
оглавления в браузерах не на базе Webkit страница не меняется: заголовки все так
же отображаются на прозрачном фоне, сквозь который видно линованный лист.

Нам нужно сделать так, чтобы браузеры, не поддерживающие анимацию CSS, мог-
ли считывать первое правило h2:target с голубым фоновым цветом, а браузеры,
поддерживающие анимацию CSS, после этого видели и второе правило h2:target,
где задается прозрачный фон. Для этого мы можем применить сценарий Modernizr,
о котором говорилось в главе 1.
Этот сценарий вы также найдете среди файлов упражнений для этой главы. Добавьте
в раздел head страницы следующую ссылку:
<script src="scripts/modernizr-1.6.min.js"></script>
Этот сценарий добавляет к элементу html страницы классы, указывающие, ка-
кие возможности браузер поддерживает и не поддерживает. Например, в Safari и
Chrome Modernizr добавляет к элементу html
класс cssanimations, а все остальные браузеры
В папке с файлами упражнений вы получают класс no-cssanimations. Таким об-
найдете сценарий Modernizr вер- разом, мы можем поменять второй селектор
сии 1.6 — это последняя версия
на момент написания этой главы. h2:target, чтобы он срабатывал только в случае
Однако к тому времени, как вы наличия класса cssanimations:
возьмете в руки эту книгу, могут .cssanimations h2:target{
появиться и более новые версии. padding: 0;
Используйте их; проверьте нали- background: none;
чие на http://www.modernizr.com. -webkit-animation: fade 2s ease-in 1;
animation: fade 2s ease-in 1;
}

www.trk.kg