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

Автор оригинала: Kaelig Deloumeau-Prigent
  • Перевод
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
  • +3
  • 21,7k
  • 7
Поделиться публикацией

Комментарии 7

    +1
    но 4,5% читателей сайта The Guardian до сих пор используют IE 8. И разработчики новой адаптивной версии сайта не могли пренебрегать предпочтениями этих пользователей.

    А какой процент из этих 4,5% читателей используют IE8 на устройствах, на которые в первую очередь нацелен адаптивный дизайн — планшетах и смартфонах? Или здесь реализация ради самой реализации?
      +2
      Судя по списку узких мест, адаптивность здесь для кучи. Верх совершенства, так сказать.
      0
      Не до конца понимаю результат. Мы же пытались реализовать поддержку Media Queries в Internet Explorer 8, а в итоге получили color: blue;, независимо от разрешения, для класса element плюс и ненужная строчка color: green; в old-ie.css
        0
        Может я чего-то не понял, но на сколько мне известно самый первый windows phone имеет IE9, а для windows mobile вообще никакой адаптивности и не нужно! И перечисленных технологии скорее относятся к html и css, нежели к адаптивному дизайну! Wtf?
          +1
          Как я понял, статья не о реализации адаптивности, а о фолбеке media queries на IE<9: sass-mq позволяет с помощью одного флага $mq-responsive: false; собрать все стили из всех @media (min-width: *) и выдать для IE.

          Только не понимаю, зачем в статье в файле old-ie.scss повторяется весь код, если можно сделать так (извиняюсь, если не прав, я не пользователь SCSS):

          old-ie.css
          $mq-responsive: false;
          @import "global";
          
          0
          Если что — адаптивность не означает ТОЛЬКО мобильные устройства. Пользователи могут еще сворачивать окна, на пример.
            +1
            Ох уж эти пользователи…

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое