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

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

Буквально на днях вышла новая, 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 был "растрирован ^[3]", осуществлена поддержка 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 ^[4].

Ссылка на GitHub ^[5]

Автор: grokru

Источник ^[6]