Решение кросс-браузерных проблем с адаптивностью

В последней главе мы поговорим о следующем:

В чем состоит принципиальная разница между прогрессивным улучшением и плавным сокращением возможностей;

Как обеспечить поддержку адаптивных веб-дизайнов в устаревших версиях браузера Internet Explorer;

Как использовать Modernizr для условной загрузки CSS-файлов и полизаполнений JavaScript;

Как преобразовать длинные списки навигационных ссылок в раскрывающиеся меню в небольших по размеру областях просмотра;

Как обеспечить изображения для устройств с экранами высокого разрешения (Retina).

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

Количество мобильных пользователей растет взрывными темпами. Соответственно, сайты просматриваются в разных (по размеру и ориентации) областях просмотра с применением разных по скорости каналов подключения. В обозримом будущем при дизайне и создании сайтов нам придется начинать с основного содержимого, а затем поступательно «наслаивать» функции и улучшения. Кроме того, принимая во внимание разницу в скорости каналов подключения пользователей, нужно учесть, что кодовая база должна быть как можно более компактной и гибкой.

Продуманно подходя к дизайну нашего сайта, мы максимально использовали методологию адаптивного дизайна, разработанную Итаном Маркоттом. Мы применили CSS3-медиазапросы (рассмотренные в главе 2) для создания контрольных точек в дизайне, по достижении которых макет эффектно адаптируется к соответствующей области просмотра. Далее мы задействовали «резиновые» изображения и мультимедиа наряду с «резиновыми» сетками (в главе 3), которые используются для обеспечения плавных переходов между контрольными точками медиазапросов. В результате у нас получился дизайн, который будет хорошо смотреться не только в распространенных сегодня, но и в будущих областях просмотра.

Чтобы сохранить компактность кодовой базы, в главе 4 мы переключили нашу разметку на использование HTML5. Эта версия обеспечивает эффект экономии, более семантически значимый код и делает возможными такие вещи, как, например, просмотр сайтов в автономном режиме. Двигаясь далее, мы обеспечили большую доступность нашего сайта с помощью WAI-ARIA, позаботившись о наличии дополнительных средств для пользователей экранных дикторов и вспомогательных технологий.

В главах 5 и 6 мы оценили невероятную мощь и гибкость CSS3, изучая новые цветовые режимы RGBA и HSLA, а также выяснили, как можно обеспечить такие «украшательства» в дизайне, как тени, отбрасываемые блочными элементами и текстом, фоновые градиенты и т. д., используя для этого не изображения, а лишь CSS3. Кроме того, мощные CSS-селекторы позволили нам выбирать все необходимое из объектной модели документа (DOM) с эффективностью, ранее возможной только благодаря JavaScript. Однако CSS3 позволяет нам не только адаптировать дизайны и значительно снизить требования к скорости канала подключения пользователя при просмотре наших сайтов. Эта версия также привносит функциональность, которой никогда ранее нельзя было насладиться без привлечения Flash или JavaScript — возможность пользовательского шрифтового оформления (см. главу 5) и создания красивых плавных переходов (см. главу 7) между разными визуальными состояниями. Всматриваясь в будущее, мы также мельком взглянули на такие замысловатые вещи, как 3D-трансформации CSS3.

И наконец, в главе 8 мы поговорили о решении рутинной задачи по созданию форм, посмаковали возможность легко справиться с тяжелой работой, связанной с валидацией форм, а также обсудили способы создания элементов интерфейса форм с помощью HTML5-разметки. Важно и то, что мы добавили резервный JavaScript-вариант, чтобы обеспечивать качественное взаимодействие в тех ситуациях, когда используются такие устаревшие браузеры, как Internet Explorer версий 6, 7 и 8.

По ходу этой книги, применяя HTML и CSS3, мы создали довольно простой адаптивный сайт под названием And the winner isn’t. Вы можете посетить его в Интернете, введя в своем браузере адрес http://www.andthewinnerisnt.com.

На рисунке 9.1 показано, как на текущий момент выглядит первая страница нашего сайта на экране iPhone.

На рисунке 9.2 демонстрируется, как первая страница нашего сайта выглядит на экране iPad.

А На рисунке 9.3 показано, как она выглядит в браузере Android (эмуляторе).

На рисунке 9.4 можно увидеть, как первая страница нашего сайта выглядит в современном настольном браузере (Google Chrome 16).

Главная страница сайта And the winner isn’t… на экране iPhone

Главная страница сайта And the winner isn’t. на экране iPad

Главная страница сайта And the winner isn’t, в браузере Android

Главная страница сайта And the winner isn’t. в браузере Google Chrome 16

Главная страница сайта And the winner isn’t… в браузере Internet Explorer 8

О, какой ужас! Дайте мне служебный револьвер.

И наконец, на рисунке 9.5 показано, как она в настоящий момент выглядит в браузере Internet Explorer 8.

Вид первой страницы нашего сайта в браузере Internet Explorer 8, которому непонятны такие элементы, как <aside>, <header>, <nav> и <footer>, сразу же приводит нас к основной идее этой главы — решению кросс-браузерных проблем с адаптивностью.