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

Разбор ситуации: центр изучения безопасности на дорогах • 31

Рис. 1.4. Вкладки на основе изображений (слева) выглядят почти идентично
вкладкам на основе CSS3 (справа)

Благодаря свойству border-radius мне удалось избавиться от изображений скру-
гленных углов вверху и внизу поля Project Areas, внизу содержащегося внутри него
списка и в заголовке Latest News. Что касается текста заголовков HSRC Project Areas
и Latest News, вместо того чтобы продолжать использовать изображения, я при-
менила к реальному тексту правило @font-face. Выбранный шрифт не идентичен
тому, что использовался на изображениях, так как лицензия старого шрифта не
поддерживает встраивание @font-face. Тем не менее новый шрифт очень похож
на него, так что большинство посетителей даже не заметит разницы. Для нижнего
обрамления текста HSRC Project Areas, включающего три рамки, я использовала
свойство box-shadow, которое способно создавать впечатление наличия нескольких
рамок без использования фактического изображения.
Разумеется, этим список возможных усовершенствований не ограничивается, и на
веб-странице, которую я взяла для примера, можно было бы внедрить еще очень
много функций CSS3. Я продемонстрировала лишь самые быстрые и простые изме-
нения, которые не приводят к проблемам при отображении страницы в устаревших
и не поддерживающих CSS3 браузерах. Размер файла с кодом CSS немного увели-
чился за счет внедренных новых возможностей, однако изменение действительно
незначительно, так как новый код большей частью заменяет длинные объявления
background. Код HTML остался неизменным, за исключением некоторых ссылок
в теге head.
Таблица 1.3 демонстрирует производительность новой страницы. Несмотря на
то что правило @font-face добавило два новых HTTP-запроса, общее число за-
просов, тем не менее, значительно сократилось благодаря тому, что я избавилась
от девяти изображений. Я также убрала сценарий JavaScript, который использо-
вался в IE 6 для поддержки изображений PNG с прозрачностью в альфа-канале.
Необходимости в этом сценарии больше нет, так как у нас не осталось подобных
изображений PNG.

Таблица 1.3. Показатели загрузки страницы с функциональностью CSS3

Firefox 3.6 IE 8 IE 6

HTTP-запросы 22 23 24
Время загрузки страницы (в секундах) 1,1 1 1,5
Уменьшение времени загрузки 15% 13% 25%

www.trk.kg