18 ноября 2015

Использование PostCSS для кросс-браузерной совместимости

В этом уроке мы будем использовать PostCSS для создания таблиц стилей, разработанных для кросс-браузерной совместимости. Мы научимся: Автоматически добавлять префиксы поставщиков; Добавлять серии запасных вариантов для Internet Explorer версий 8, 9 и 10; Добавлять запасные варианты для свойства will-change.

Настройка проекта

Первое, что вам нужно будет сделать это настроить свой проект, чтобы использовать либо Gulp, либо Grunt, в зависимости от ваших предпочтений. Если у вас пока еще нет собственных предпочтений, я рекомендую использовать Gulp, так как в таком случае вам потребуется меньше кода, чтобы добиться того же результата.

Вы можете ознакомиться с тем, как настраивать проекты для PostCSS в Gulp или Grunt, в наших предыдущих уроках:

Краткое руководство по PostCSS: Настройка Gulp
- Краткое руководство по PostCSS: Настройка Grunt

Установка плагинов

Теперь, когда у вас есть пустой проект Gulp или Grunt + PostCSS, вам нужно установить плагины, которые вы будете использовать в этом уроке.Мы собираемся устанавливать всего несколько плагинов, поэтому, вместо того, чтобы устанавливать их по одному за раз, как мы делали в наших Кратких руководствах по Gulp и Grunt, мы установим их все вместе одной командой.

Вне зависимости от того, используете вы Gulp или Grunt, выполните следующую команду внутри проектной папки, чтобы установить нужные нам плагины:

npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

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

Загрузка плагинов через Gulp

Если вы используете Gulp, добавьте следующие переменные под уже имеющимися в файле:

var autoprefixer = require('autoprefixer');
var color_rgba_fallback = require('postcss-color-rgba-fallback');
var opacity = require('postcss-opacity');
var pseudoelements = require('postcss-pseudoelements');
var vmin = require('postcss-vmin');
var pixrem = require('pixrem');
var will_change = require('postcss-will-change');

Теперь добавьте имя каждой из этих новых переменный в массив processors:

var processors = [
    will_change,
    autoprefixer,
    color_rgba_fallback,
    opacity,
    pseudoelements,
    vmin,
    pixrem
];

Выполните быструю проверку того, что все работает, запустив команду gulp css и проверив, что новый файл style.css появился в папке dest вашего проекта.

Загрузка плагинов через Grunt

Если вы используете Grunt, обновите объект processors, который вложен в объект options, до следующего состояния:

processors: [
  require('postcss-will-change')(),
  require('autoprefixer')(),
  require('postcss-color-rgba-fallback')(),
  require('postcss-opacity')(),
  require('postcss-pseudoelements')(),
  require('postcss-vmin')(),
  require('pixrem')()
]

Выполните быструю тестовую компиляцию, запустив команду grunt postcss и проверив, что ваша проектная папка dest теперь содержит новый файл style.css .

Теперь у вас установлены все плагины, требующиеся для этого урока, и вы готовы перейти к рассмотрению того, как использовать их для улучшения кросс-браузерной совместимости ваших таблиц стилей.

Автоматическое добавление префиксов поставщика

Некоторые средства кросс-браузерной совместимости будут необходимы только для определенных особенных случаев. Автоматическое добавление префиксов поставщика, с другой стороны, это то, что я бы предложил делать для каждого проекта, используя плагин Autoprefixer, разработанный Андреем Ситником.

Довольно сложно отслеживать, каким свойствам нужны какие префиксы поставщиков и в какое время, а используя Autoprefixer вам не придется этого делать. Используйте Autoprefixer в качестве обязательного элемента каждого проекта, и он будет проверять ваш код, прогоняя его через данные с CanIUse.com, и после этого по необходимости добавлять префиксы поставщиков, не заставляя вас задумываться об этом. Давайте проведем небольшой тест, чтобы посмотреть на Autoprefixer в действии. Добавьте следующую анимацию и код флексбокса в свой файл проекта src/style.css :

@keyframes animationExample {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
.animateThis {
    animation: animationExample 2s;
    display: flex;
}

Запустите gulp css или grunt postcss, чтобы скомпилировать файл, после чего ваш dest/style.css будет содержать такой код префиксов поставщика:

@-webkit-keyframes animationExample {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
@keyframes animationExample {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
.animateThis {
    -webkit-animation: animationExample 2s;
            animation: animationExample 2s;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Как видите, префиксы поставщика добавились автоматически, согласно данным с CanIUse.com по анимации и флексбоксам.

Указание уровней поддержки браузеров

В Autoprefixer используется Browserlist для определения того, какую версию браузера он будет поддерживать. Согласно стандартным настройкам, он при необходимости добавит префиксы поставщика для:

более 1%: браузеров, используемых более 1% людей по всему миру
- 2 последних версий: двух последних версий каждого браузера, отслеживаемого сервисом CanIUse.com
- Firefox ESR: последней версии Firefox
- Opera 12.1: Opera версии 12.1

Пример, который мы сделали выше, был скомпилирован под стандартными настройками Autoprefixer. Это означает, что была включена поддержка IE10 и Safari 8, поэтому были автоматически добавлены префиксы -ms- и -webkit-, требующиеся для animation и flexbox.

При этом в IE11 и Safari 9 эти префиксы не нужны, поэтому, если вы настроили конфигурации своего списка браузеров на поддержку только IE11+ и Safari 9+, эти префиксы добавляться не будут.

Попробуйте прогнать настройку browsers через Autoprefixer в файле Gulp или Grunt следующим образом:

// В массиве 'processors' Gulp-файла:
autoprefixer({browsers:'safari >= 9, ie >= 11'}),
// В массиве 'processors' Grunt-файла:
require('autoprefixer')({ browsers: ['safari >= 9, ie >= 11'] }),

Теперь, если вы заново скомпилируете свой CSS, вы не увидите никаких различий между оригинальным и скомпилированным кодом. Все потому, что, так как Safari 8 или IE10 не требуют поддержки, соответствующие им префиксы не добавляются.

Добавление запасного варианта для свойства \"will-change\"

Свойство will-change используется для того, чтобы заранее уведомить браузер о том, что определенные элементы дизайна будут анимированы. Это позволяет браузеру оптимизировать процесс отрисовки и предотвратить задержки и мерцание изображение. Однако на данный момент это свойство не поддерживается такими браузерами, как IE / Edge, Safari и Opera Mini.

Плагин postcss-will-change, также созданный Андреем Ситником, добавляет запасной вариант, который помогает этим браузерам лучше отрисовывать изображения, даже если это получается не так эффективно, как если бы они поддерживали will-change. Это делается за счет добавления свойства backface-visibility, которое приводит к созданию компоновочного слоя, который будет обрабатываться GPU.

Например, попробуйте добавить такой код в свой файл src/style.css :

.thisWillChange {
    will-change: transform;
}

Скомпилируйте свою таблицу стилей, и вы увидите, что в файле dest/style.css появится запасной вариант:

.thisWillChange {
    backface-visibility: hidden;
    will-change: transform;
}

Примечание: этот плагин нужно загрузить в Gulp/Grunt-файл до Autoprefixer. Это позволит плагину Autoprefixer добавить префиксы поставщика в свойство backface-visibility следующим образом:

/* Запасной вариант с префиксами поставщика */
.thisWillChange {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
}

Добавление запасных вариантов для старых проблем IE

Благодаря улучшенным версиям от Microsoft и основных групп, идущих по пути отказа от поддержки старых версий IE, мы все ближе подходим к тому, чтобы не учитывать запасные варианты и обходные решения для проблемных старых версий браузеров. Сама компания Microsoft откажется от поддержки IE8 в 2016 году. Недавно вышел Bootstrap 4 alpha, который также отказался от поддержки IE8. Google перестал поддерживать IE8 в 2012 году, а IE9 в 2013 году.

С учетом всего вышесказанного, под конец каждого проекта его оценивают в индивидуальном порядке, и если ваша целевая аудитория часто использует старые версии браузеров, у вас может не быть другого выбора, кроме как сделать все возможное для их поддержки. Если вы попали в такую ситуацию, следующие плагины помогут вам сделать этот процесс менее болезненным.

Создание цветовых запасных вариантов rgba()

IE8 не поддерживает цвета rgba(), поэтому плагин postcss-color-rgba-fallback от Гийома Демеси добавляет в качестве запасного варианта плоские шестнадцатеричные цвета.Например, добавьте такой код в свой файл src/style.css :

.rgbaFallback {
    background: rgba(0,0,0,0.5);
}

Скомпилируйте его, и вы увидите запасной вариант шестнадцатеричного кода, добавленный в ваш файл \"dest/style.css":

.rgbaFallback {
    background: #000000;
    background: rgba(0,0,0,0.5);
}

Создание запасных вариантов opacity

IE8 не может обрабатывать свойство opacity, поэтому плагин postcss-opacity, разработанный Винсентом Де Оливейра, добавляет специальный фильтр IE, позволяющий добиться того же эффекта.

Добавьте следующий код в свою исходную таблицу стилей:

.opacityFallback {
    opacity: 0.5;
}

После компиляции вы увидите, что добавился соответствующий запасной вариант -ms-filter:

.opacityFallback {
    opacity: 0.5;
    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
}

Конвертация :: в : для псевдо-элементов

Лучшей практикой на сегодняшний день считается генерирование псевдо-элементов, таких как .element::before, в которых используется двойное двоеточие ::. Это помогает отличать их от псевдо-классов, таких как .element:hover, в которых должно использоваться одинарное двоеточие :.Однако IE8 не поддерживает двойное двоеточие :: для создания псевдо-элементов, он поддерживает только одинарное :. Используя плагин postcss-pseudoelements, созданный Свеном Чуи, вы можете писать код в соответствии с лучшими практиками, и автоматически менять двоеточие. Добавьте следующий код с двойным :::

.pseudo-element::before {
    content: '';
}

Скомпилируйте свой файл, и вы увидите, что двойные двоеточия в нем сократились до одинарных (:):

.pseudo-element:before {
    content: '';
}

Написание кода в соответствии с лучшими практиками и использование этого плагина позволят вам, когда IE8 полностью уйдет на покой, повторно обработать свой CSS без плагина и получить нужный синтаксис.

Добавление запасного варианта vm для vmin

В IE9 относительная единица измерения окна просмотра vmin не поддерживается, но вместо нее используется аналогичная единица vm. Если вам нужно приспосабливаться под IE9, плагин postcss-vmin от Винсента Де Оливейра добавить единицы vm в качестве запасного варианта.Добавьте следующий код в свой файл src/style.css :

.vmFallback {
    width: 50vmin;
}

Повторно скомпилируйте его, и в получившемся коде должен добавиться запасной вариант с единицей vm:

.vmFallback {
    width: 50vm;
    width: 50vmin;
}

Добавление запасного варианта px для единиц rem

IE8 не поддерживает единицы измерения rem, а в IE9 и IE10 они не поддерживаются в декларации сокращений psuedo-elements и font. Благодаря плагину node-pixrem от Винсента Де Оливейра и Роба Вежбовски, вы можете получить запасные варианты, основанные на px, которые добавятся автоматически везде, где вы использовали единицы rem.