Адаптивный дизайн и IE8

Перевод статьи в The Guardian Mobile-first Responsive Web Design and IE8 о разработке адаптивной версии онлайн-издания, точнее о способе реализации поддержки IE 8. Также советую посмотреть интересный Case Study процесса, это очень познавательно.

Буквально на днях вышла новая, 11-ая версия браузера Internet Explorer в составе Windows 8.1, но 4,5% читателей сайта The Guardian до сих пор используют IE 8. И разработчики новой адаптивной версии сайта не могли пренебрегать предпочтениями этих пользователей.

Основной проблемой была плохая поддержка старыми браузерами необходимых для адаптивного дизайна функций. Необходимо было реализовать поддержку IE 8 без ущерба работе в других, более современных браузерах.

Узкое место IE 8

Вот перечень технологий, которые нельзя было использовать:

• rem
• media queries
• rgba(), hsla()
• :last-child, :nth-child(), :first-of-type, …
• :empty
• :not()
• calc()
• .ttf, .otf, .woff fonts
• multiple backgrounds
• background-size
• vw, vh, vmin, vmax
• :checked, :valid, :invalid, :required
• box-shadow
• transforms (rotate, translate, skew, scale, matrix)
• border-radius
• opacity
• getElementsByClassName
• getComputedStyle
• addEventListener
• geolocation
• canvas
• HTML5 video
• HTML5 audio

Это было большой проблемой, потому что планировалось использовать самые современные технологии и разработать легкий и удобный сайт. Для поддержки IE 8 необходимо дополнительно прописывать некоторый функционал, что приведет к ухудшению общей производительности сайта.

Было решено начать с реализации поддержки Media Queries в Internet Explorer 8, что является очень важной частью для крупных новостных и информационных сайтов.

global.css

Файл стилей для всех браузеров, кроме IE 8 и ниже. Мы используем mq() (SASS) вместо обычных Media Queries:

// global.scss @import "mq"; .element {     // Мобильные устройства     @include mq($from: mobile) {         color: green;     }     // Планшеты     @include mq($from: tablet) {         color: blue;     }     // Десктопы     @include mq($to: desktop) {         color: red;     } } 

Это переходит в следующий код:

// global.css @media all and (min-width: 18.75em) {     .element {         color: green;     } } @media all and (min-width: 37.5em) {     .element {         color: blue;     } } @media all and (max-width: 56.1875em) {     .element {         color: red;     } } 

old-ie.css

Для поддержки старых user agent устанавливаем $mq-responsive на false:

// old-ie.scss     $mq-responsive: false; @import "mq"; .element {     @include mq($from: mobile) {         color: green;     }     @include mq($from: tablet) {         color: blue;     }     @include mq($to: desktop) {         color: red;     } } 

Получается:

// old-ie.css - для версий IE <= 8 .element {     color: green;     color: blue; } 

В результате media query был "растрирован", осуществлена поддержка IE 8. Более ранние версии смогут поддерживать только значение min-width.

Осталось только разделить old-ie.css и global.css по user-agent’ам:

<!--[if (gt IE 8) | (IEMobile)]><!-->     <link href="global.css" rel="stylesheet" /> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]>     <link href="old-ie.css" rel="stylesheet" /> <![endif]--> 

В результате описанный способ обладает несколькими преимуществами:

• Пользователи мобильных устройств не скачивают лишний код, предназначенный для старых браузеров.
• Internet Explorer скачивает не намного больше кода, чем в обычных условиях.
• Когда придет время отменить поддержку IE 8, это можно будет легко реализовать.

Можно вживую пощупать Sass MQ с помощью Sass MQ online.

Ссылка на GitHub