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

в 21:13, , рубрики: css, responsive web design, адаптивный дизайн, веб-дизайн, Веб-разработка
image

Перевод статьи в 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

Автор: grokru

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js