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

246 • Глава 6. Разные размеры экрана, разный дизайн

ОбхОдные Пути для не ПОддерживающих данную

вОзмОжнОсть браузерОв

Браузеры, не поддерживающие медиазапросы, такие как IE версии 8 и более ранних
и Firefox версии 3.1 и более ранних, попросту отображают обычную страницу с
обычными стилями. Конечно, в очень узких и очень широких областях просмотра
дизайн смотрится хуже, но большинство пользователей все равно вряд ли увидят
вашу страницу в таких экстремальных размерах. Можно даже добавить значения
min-width и max-width, чтобы браузеры не могли так сильно уменьшать и увели-
чивать страницу, и переопределить эти свойства в медиазапросах для браузеров,
которым они не требуются.

Разумеется, это ничуть не улучшит представление страниц на мобильных устрой-
ствах. К счастью, большинство популярных мобильных устройств поддерживают
медиазапросы (см. http://www.quirksmode.org/mobile/browsers.html), а многие
другие поддерживают тип медианосителя handheld, что дает возможность загру-
жать на них отдельную оптимизированную для мобильных устройств таблицу
стилей. В статье «Return of the Mobile Stylesheet» автора Dominique Hazaël-Massieux
(http://www.alistapart.com/articles/return-of-the-mobile-stylesheet) рассказывается
о том, как загружать разные таблицы стилей в мобильные браузеры, ориентируясь
на то, поддерживают они тип медианосителя handheld или же медиазапросы.

Если для вашего проекта подобные обходные
В файлы упражнений я добавила пути не подходят, то используйте JavaScript.
последнюю версию сценария на Лучшим среди существующих я считаю css3-
момент написания этой главы mediaqueries-js автора Wouter van der Graaf
(дата создания сценария — март (http://code.google.com/p/css3-mediaqueries-js).
2010 года), но к тому времени, как Вам нужно только добавить ссылку на этот сце-
вы прочитаете мою книгу, может нарий в код, и он автоматически разберет медиа-
появиться и более новая версия.
Найдите ее на сайте http://code. запросы в вашем CSS и заставит их работать
google.com/p/css3-mediaqueries- в старых браузерах.
js и загрузите. Этот сценарий также входит в набор файлов
упражнений, который вы загрузили для этой
главы, поэтому добавьте к элементу head стра-
ницы такую ссылку:

<script src="scripts/css3-mediaqueries.js"></script>

www.trk.kg