Добавление поддержки медиазапросов min-width и max-width в Internet Explorer версий 6, 7 и 8
Полизаполнение, которое я обычно использую для добавления поддержки медиазапросов в устаревшие версии браузера Internet Explorer, рассчитано только на min-width и max-width. Существуют более солидные полизаполнения, добавляющие поддержку широкого диапазона медиазапросов, однако для адаптивных веб-дизайнов удобно использовать написанный Скоттом Джелом (Scott Jehl) сценарий Respond. js, являющийся простым в применении и быстрым решением, которое всегда хорошо служило мне.
Сценарий Respond. js (Https://github.com/scottjehl/Respond) на самом деле можно использовать без Modernizr — нужно просто подключить его к соответствующей странице и, как выражается сам автор, «запустить браузер Internet Explorer и сделать радостное движение сжатыми в кулаки руками».
Итак, перед тем, как интегрировать Respond. js с Modernizer, подключим его. Добавим Respond. js прямо в нашу страницу (сразу после файла Modernizer, который мы уже внедрили) и проверим, позволил ли он добиться нужного нам результата в Internet Explorer. Для этого нужно скачать соответствующий файл, поместить его в подходящую папку и указать ссылку на него в разделе <head>:
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1"
/>
<title>And the winner isn’t…</title>
<link href="css/main. css" rel="stylesheet" />
<script src="js/modernizr. js"></script>
<script src=»js/respond. min. js»></scnpt>
</head>
Теперь если мы загрузим страницу в Internet Explorer 8 и изменим размеры окна браузера, то вновь получим наш действующий адаптивный веб-дизайн (рисунок 9.10).
Страница по-прежнему адаптируется к области просмотра
Отлично, мы добавили полизаполнение, которое обеспечивает поддержку медиазапросов min-width и max-width в Internet Explorer, однако есть одна загвоздка: оно теперь начнет задействоваться в каждом браузере, который будет загружать нашу страницу независимо от того, нуждается он в нем или нет. Для решения возникшей проблемы можно добавить условный комментарий, касающийся Internet Explorer, как показано далее:
<! — if lte IE 8]>
<script src="js/respond. min. js"/></script>
<![endif]—>
Я уверен, что ранее вы уже сталкивались с условными комментариями. Они представляют собой простой способ обеспечить загрузку CSS-u JavaScript-файлов (или даже содержимого), которые будут использоваться только соответствующей версией Internet Explorer. Все прочие браузеры будут считать данный код комментарием и игнорировать его.
В нашем условном комментарии говорится следующее: «Если версия данного браузера ниже или равна (часть lte — less than or equal) Internet Explorer 8 (часть IE 8), то следует задействовать указанный сценарий».
ВСЕ ОБ УСЛОВНЫХ КОММЕНТАРИЯХ.
Если вы захотите узнать больше об условных комментариях, то по следующему URL-адресу найдете полную информацию: http://msdn. microsoft.com/en-us/Nbrary/ms537512%28v=vs.85%29.aspx.
Все это отлично сработает. Однако разве мы хотим засорять свою разметку условными комментариями, созданными специально для Internet Explorer? И как насчет полизаполнений для других браузеров? Именно здесь Modernizr берет ответственность на себя.
Добавить комментарий