Понимание адаптивного веб-дизайна: кросс-браузерная совместимость

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

Во время создания веб-сайта — особенно если вы стремитесь сделать его структуру адаптивной — одна из наиболее важных и частых проблем, с которыми приходится сталкиваться веб-дизайнеру, связана с кросс-браузерной совместимостью, то есть совместимостью между различными браузерами.

Что означает «совместимость»? Разработчик веб-сайта должен убедиться, что его дизайн работает должным образом и что его внешний вид безошибочен и функционален на любой платформе, используемой для его просмотра. Это, безусловно, один из самых сложных и разочаровывающих аспектов, которые вы должны учитывать при разработке нового проекта, но важно, чтобы вы ничего не оставляли на волю случая и помнили о кросс-браузерной совместимости на протяжении всего процесса проектирования.

Многие из новых возможностей CSS, представленных в новой версии CSS3, до сих пор широко не поддерживаются всеми основными браузерами. Фактически, некоторые из них не распознаются и поэтому игнорируются полностью, что может создать серьезные проблемы, если ваш дизайн основан на неподдерживаемом CSS. Это не просто разные типы браузеров; разные версии одного и того же браузера могут поддерживать (или не поддерживать) различные методы проектирования, что еще больше усложняет кросс-браузерную совместимость.

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

Понятно, что использование единого изображения (максимально возможной версии) для всех устройств не является целесообразным решением. Подумайте, сколько времени потребует бедный пользователь смартфона-2G для загрузки вашего дизайна. После загрузки ультра-медленных изображений эти изображения с высоким разрешением, вероятно, будут отображаться примерно в четверти от их первоначального размера.

Самая большая проблема заключается в том, что медиа-запросы не работают со старыми браузерами. Следовательно, адаптивная веб-страница со многими правилами CSS3 может быть правильно видна только тем, кто недавно обновил браузеры с сильной поддержкой CSS3. К счастью, есть три решения JavaScript, которые могут помочь нам обслуживать адаптивные веб-сайты для старых браузеров без поддержки CSS3: Respond.js , Modernizr и adaptive.960.js . Давайте посмотрим вместе.

Respond.js

Первое решение также самое простое — я говорю о скрипте под названием response.js, который позволяет старым версиям браузера понимать и выполнять медиазапросы CSS3. Вот все, что нужно, чтобы начать.

<script type="text/javascript" src="js/respond.min.js"></script>

Этот скрипт вызывается на странице (как показано выше) и добавляет поддержку медиазапросов, минимальной ширины, максимальной ширины и всех типов мультимедиа (например, экрана) для старых браузеров. Этот скрипт может помочь вашим инструкциям CSS3 работать правильно, даже для старых браузеров.

Respond.js может показаться слишком простым, чтобы быть идеальным решением, но для многих проектов это отличное решение, потому что код читается из новейшего браузера CSS3 для ПК и всех браузеров, разработанных для смартфонов. Единственная цель скрипта — заставить старые браузеры читать инструкции CSS3 в медиазапросах. Ни больше ни меньше.

Modernizr

Второе решение — использование инструмента под названием Modernizr. Как объяснено на странице документации своего веб-сайта , «Modernizr — это небольшая библиотека JavaScript, которая обнаруживает наличие собственных реализаций для веб-технологий следующего поколения, то есть функций, которые вытекают из спецификаций HTML5 и CSS3».

Многие из этих функций уже реализованы, по крайней мере, в одном крупном браузере (большинство из них в двух или более), и то, что делает Modernizr, — очень просто — сообщает вам, реализована ли в текущем браузере эта функция изначально или нет. Это незаменимый инструмент, который дает вам прекрасный контроль над опытом с помощью функции обнаружения на основе JavaScript.

После первого этапа обнаружения функций Modernizr создает объект JavaScript с результатами и добавляет классы к элементу HTML, чтобы вы могли ориентироваться с помощью CSS. Это великолепное решение, потому что оно позволяет вам написать условный JavaScript и CSS для обработки любой ситуации, независимо от того, поддерживает браузер функцию или нет.

Modernizr поддерживает следующие браузеры: IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome, Mobile Safari, браузер Android WebKit, Opera Mobile и Firefox Mobile.

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Your title</title>
  <script type="text/javascript" src="modernizr-latest.js""></script>
 </head>
 <body>Your content</body>
</html>

 <html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage no-borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
....
</html>

 <script type="text/javascript" src="js/adapt.min.js"></script>

 <script type="text/javascript">
var ADAPT_CONFIG = {
 // Where is your CSS?
 path: 'assets/css/',

 dynamic: true,

 callback: myCallback,

 range: [
   '0px    to 760px  = mobile.css',
   '760px  to 980px  = 720.css',
   '980px  to 1280px = 960.css',
   '1280px to 1600px = 1200.css',
   '1600px to 1920px = 1560.css',
   '1940px to 2540px = 1920.css',
   '2540px           = 2520.css'
 ]
};
</script>

 <link href="assets/master.css" rel="stylesheet" type="text/css" media="screen" />