Предыдущий ролик Следующий ролик  

Видео урок: Изменение CSS и JavaScript для Internet Explorer 7 и 8

Создание отзывчивого веб-дизайна

Теперь, чтобы добавить некоторую обратную совместимость с IE 7 и 8, нам нужно внести изменения в наши CSS и JavaScript. Итак, сначала давайте вернемся к нашим файлам для упражнений. Внутри второй папки, внутри этой папки CSS, у нас есть CSS файл для IE 7 и 8. Копируем его и вставляем в папку CSS проекта myWebsite на десктопе. Как только этот файл скопирован, возвращаемся обратно к нашему текстовому редактору. Переходим к файлу index.html. Здесь в предыдущем курсе мы добавили условный оператор для IE, который проверяет, является ли данная версия IE меньше, чем IE 9.

Если это так, то сюда мы привносим Google HTML5Shiv. Прежде чем мы добавим shiv, мы "прикрутим" еще два файла. Во-первых, мы добавим ссылку на нашу CSS. А затем мы добавим ссылку на respond.js. Сначала мы пишем link. Отношения устанавливаем равными stylesheet. Атрибут type равен text/css, href устанавливаем на css/IE_7_and_8.css, закрываем тег.

Потом мы добавляем script, type равен text/JavaScript, source равен js/respond.min.js. Именно в файле ie_7_and_8.CSS мы переопределим некоторые из CSS3, которые мы использовали специально для прозрачности, а также respond.js. Этот файл позволит IE 7 и 8 видеть медиа-запросы. То есть если мы меняем размер окна браузера, отдельные медиа-запросы, указанные здесь, будут вызываться для IE 7 и 8.

Когда эти три ссылки на месте, переходим к проекту myWebsite. Хватаем ie_7_and_8.CSS и открываем его в текстовом редакторе. А теперь в этот файл мы добавим два правила. Первое из них будет нацелено на меню для мобильного устройства. Пишем header, пробел, a.mobile_menu. Здесь мы устанавливаем display на none. Далее мы нацеливаемся на caption в области hero. Итак, решетка, hero, пробел, .panel, пробел, .caption. Мы сбрасываем цвет на 9ea4bd, а затем цвет заднего фона.

Мы установим его на 525673. Мы установили эти цвета, используя ранее RGBA, а это свойство CSS3. Это также позволит нам добавить прозрачность, однако у нас нет совместимости внутри 7 и 8. Итак, мы указываем цвет текста и цвет заднего фона, используя цвета solid. Теперь, без правил CSS2 для IE7 и 8 давайте сохраним и вернемся к нашему файлу design.js. Также нам нужно внести некоторые изменения в наш файл JavaScript. Поднимаемся вверх.

И сперва мы объявляем новую переменную. Пишем "var isIE" и мы устанавливаем ее на false. Чтобы установить ее на true, если мы используем IE 7 или 8, мы вызываем встроенную jQuery функцию, которая называется support. Внутри document.ready нажимаем несколько раз Return. Заходим сюда. Пишем здесь оператор условия. Начинаем с if, открывающая круглая скобка, далее восклицательный знак, знак доллара, .support.leadingWhitespace, с заглавной буквы W.

Далее фигурные скобки. Пишем isIE. Ставим знак равенства и true, а затем закрываем скобку. Опять же, это встроенная jQuery функция с .support, которая дает нам знать, поддерживает ли браузер, который мы запустили, основные функции jQuery. И этот оператор условия будет равен false, если браузер не поддерживает такие возможности, касательно IE 7 и 8. Так что в данном случае наша новая, созданная нами переменная будет установлена на true. Теперь, когда мы знаем, с каким браузером мы работаем, давайте спустимся вниз. Заходим внутрь checkBrowserSize.

Эта функция, window.outerWidth, не поддерживается IE 7 или 8. Мы заходим сюда и объявляем ширину окна, только если мы не находимся в IE. Давайте зайдем сюда и пропишем новый оператор условия. Набираем if, открывающая и закрывающая круглые скобки, открывающая и закрывающая фигурные скобки. Они открыты, добавим сюда также else. Открывающая и закрывающая фигурные скобки. Они открыты. Давайте зайдем сюда и пропишем, что окно равно windowOuterWidth. Вставляем это сюда внутрь оператора else.

И вот что мы сделаем внутри круглых скобок для if: Мы пишем, что if(isIE). Опять же, поскольку мы устанавливаем его равным true или false, мы можем просто сказать if isIE. Если условие равно true, мы выполняем функцию внутри данной области. А сейчас мы снова вставим сюда переменную windowWidth. Мы заходим сюда и удаляем window.outerWidth, что является JavaScript функцией, которую не понимают IE 7 и 8. И мы используем jQuery, чтобы узнать ширину контента в теге body. Начинаем со знака доллара, круглые скобки, кавычки для строкового литерала.

Пишем внутри body. За скобками пишем .width. Еще один набор скобок. А теперь мы добавим сюда 33. Поскольку IE 7 и 8 не поддерживают outerWidth, у нас нет способа узнать, вызываются ли полосы прокрутки. Теперь мы собираемся установить windowWidth на величину размера контента и добавим 33. Итак, для IE 7 и 8 всегда будет предполагаться, что полоса прокрутки есть или же есть дополнительные 33 пикселя, которые нужно учитывать. Теперь давайте спустимся в loadHero.

Внутри loadHero давайте перейдем к маленькому размеру экрана. Здесь мы устанавливаем свойство height на ноль, и только тогда, когда мы не находимся в IE. Для действительного размера, который меньше либо равен пятистам, так, давайте добавим сюда несколько return, внутри этого оператора условия мы добавляем новый оператор условия. Итак, if, круглые и фигурные скобки, они открыты, добавляем else. Еще один набор фигурных скобок. Они открыты. Идем сюда и копируем выражение, которое устанавливает nav height на 0 пикселей.

Копируем его в буфер. Вставляем все это внутрь else. А внутри круглых скобок для if мы пишем isIE. Итак, если это Internet Explorer, значение настройки nav height меняем с 0 пикселей на auto. Итак, у нас есть то выражение, которое устанавливает height на auto, и в совокупности с нашей CSS, которая устанавливает меню навигации для мобильных устройств на none, это означает, что когда мы находимся в IE 7 и 8 на маленьком экране, меню будет показываться все время.

Теперь все на месте, давайте сохраним все файлы, а затем протестируем все это в IE, под WIndows. Сейчас мы работаем под Windows XP, запущен IE7. Во-первых, вы можете заметить, что HTML5 отображен должным образом. Вы видите jQuery анимацию. Вы также можете отметить, что во время анимации отключается прозрачность логотипа. Проигрываю это еще раз. Если это неприемлемо, вы можете удалить или закомментировать анимацию, которую мы добавили для логотипа. Вы также можете отметить, что задний фон теперь сплошной. Мы не можем видеть сквозь него. Прозрачности нет. Это из-за переопределенного стиля, который мы добавили в таблицу стилей для IE.

Если же я уменьшаю размер окна до среднего, вы видите, что всплывает медиа-запрос. Это потому что мы привинтили respond.js к HTML файлу. Итак, здесь мы видим комбинацию Google HTML5Shiv и respond.js, что дает нам обратную совместимость с IE7 и 8. Также эти инструменты дают нам реальный шанс использовать более продвинутые возможности для веб, не подвергая совместимость опасности. И наконец, когда мы переходим к маленькому экрану, вы видите, что навигация остается видимой, а кнопка для мобильного меню не показывается.

Скрипт jQuery, который мы написали, все еще будет работать с открытием и закрытием навигации. Однако комбинация анимации, HTML5Shiv и respond.js может вызвать некоторое мерцание, когда мы берем элемент HTML5 nav и устанавливаем его высоту на ноль. Вместо того чтобы добавлять дополнительный код для получения отзывчивого веб-дизайна в более старых версиях браузеров, я просто оставляю навигацию открытой, если кто-то пользуется старым браузером и смотрит наш веб-сайт на маленьком экране. Итак, мы завершили наш курс по созданию отзывчивого веб-дизайна. На следующем уроке мы поговорим о том, что еще теперь вы можете изучить.