[Перевод] Адаптивный дизайн и 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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK