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

Готовая страница • 247

Сохраните страницу и откройте ее в браузере, не поддерживающем медиазапросы,
например IE 8. Попробуйте поменять размер окна — вы увидите, что макет кор-
ректируется в соответствии со стилями, которые вы определили в медиазапросах.
Все очень просто!

Единственный недостаток этого метода заключается в дополнительном HTTP-
запросе и лишних 16 Кбайт данных, которые пользователю приходится загружать.
Если это вас беспокоит, то можете добавить условные комментарии, чтобы сценарий
срабатывал только в тех браузерах, где он действительно необходим, — IE версий
с 6 по 8:
<!--[if lte IE 8]>
<script src="scripts/css3-mediaqueries.js"></script>
<![endif]-->

Если вы используете jQuery, можно использовать пару встраиваемых модулей, заставляющих
работать медиазапросы (см. http:// www.protofunc.com/scripts/jquery/mediaqueries и http://
www.csslab.cl/2009/07/22/jquery-browsersizr).

Хотя другие браузеры, такие как Firefox 3.1, теперь перестанут понимать и исполь-
зовать медиазапросы, ваша пользовательская аудитория вряд ли пострадает — мало
кто активно использует эти версии браузеров. Отличные от IE и не поддерживающие
медиазапросы браузеры не будут менять макет, но такой вариант, по моему мнению,
лучше, чем заставлять все браузеры загружать сценарий.

гОтОвая страница

Теперь у страницы нашей вымышленной пекарни есть несколько уникальных ма-
кетов для разных размеров области просмотра. Она хорошо смотрится и работает
как на больших настольных мониторах, так и на маленьких мобильных устройствах
(рис. 6.25).

Готовая страница со всеми созданными нами эффектами называется media-queries_final.
html. Она сохранена в папке с остальными файлами упражнений для этой главы.

www.trk.kg