Статьи

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

Декабрь 19, 2018

В последнем уроке мы завершили раздел «Быстрый старт» этой серии, и теперь мы готовы перейти к использованию PostCSS для генерации таблиц стилей, используя различные типы плагинов для различных целей.

В этом уроке мы собираемся использовать PostCSS для создания таблицы стилей, предназначенной для кросс-браузерной совместимости. Мы будем:

  • Автоматически добавлять префиксы поставщиков в
  • Добавить серию запасных вариантов для Internet Explorer версий 8, 9 и 10
  • Добавьте запасные варианты для еще не широко поддерживаемого свойства will-change

Давайте начнем!

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

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

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

соответственно.

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

Затем с помощью терминала или командной строки, указывающих на папку, выполните команду npm install .

Установить плагины

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

Мы собираемся установить довольно много плагинов, поэтому вместо того, чтобы устанавливать их по одному, как мы делали в «Руководствах по быстрому старту» для Gulp и Grunt, мы установим их все сразу одной командой.

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

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

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

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

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

1
2
3
4
5
6
7
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 :

1
2
3
4
5
6
7
8
9
var processors = [
       will_change,
       autoprefixer,
       color_rgba_fallback,
       opacity,
       pseudoelements,
       vmin,
       pixrem
   ];

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

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

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

1
2
3
4
5
6
7
8
9
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 в действии. Добавьте следующую анимацию и код flexbox в файл вашего проекта «src / style.css»:

01
02
03
04
05
06
07
08
09
10
11
12
13
@keyframes animationExample {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
 
.animateThis {
    animation: animationExample 2s;
    display: flex;
}

Запустите grunt postcss gulp css или grunt postcss для компиляции вашего файла, и ваш «dest / style.css» теперь должен содержать код с префиксом этого поставщика:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@-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 для анимации и flexbox .

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

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

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

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

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

Попробуйте это, передав настройку browsers через Autoprefixer в вашем Gulpfile или Gruntfile следующим образом:

1
2
3
4
5
// In the Gulpfile ‘processors’ array:
autoprefixer({browsers:’safari >= 9, ie >= 11′}),
 
// In the Gruntfile ‘processors’ array:
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 , которое запускает создание слоя композитора, который будет обрабатываться графическим процессором.

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

1
2
3
.thisWillChange {
    will-change: transform;
}

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

1
2
3
4
.thisWillChange {
    backface-visibility: hidden;
    will-change: transform;
}

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

1
2
3
4
5
6
/* Fallback with vendor prefixes */
.thisWillChange {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
}

Ссылки по теме

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

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

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

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

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

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

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

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

1
2
3
4
.rgbaFallback {
    background: #000000;
    background: rgba(0,0,0,0.5);
}

Ссылки по теме

Создать opacity

IE8 не может обработать свойство opacity , поэтому плагин postcss-opacity от Vincent De Oliveira добавляет специальный фильтр IE для достижения того же эффекта.

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

1
2
3
.opacityFallback {
    opacity: 0.5;
}

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

1
2
3
4
.opacityFallback {
    opacity: 0.5;
    -ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=50)»;
}

Ссылки по теме

Преобразовать :: в : на псевдоэлементах

При создании .element::before таких как .element::before рекомендуется использовать двойное двоеточие :: . Это поможет отличить их от .element:hover таких как .element:hover которые должны использовать одну двоеточие :

Тем не менее, IE8 не поддерживает двойное двоеточие :: для создания псевдоэлементов, он поддерживает только один двоеточие : Используя плагин postcss-pseudoelements от Sven Tschui, вы можете кодировать в соответствии с лучшими практиками и автоматически изменять обозначения.

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

1
2
3
.pseudo-element::before {
    content: »;
}

Скомпилируйте ваш файл, и вы увидите, что он уменьшен до единственного : notation:

1
2
3
.pseudo-element:before {
    content: »;
}

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

Ссылки по теме

Добавить vm vmin для vmin

В IE9 относительная единица измерения vmin просмотра vmin не поддерживается, но вместо этого используется эквивалентная единица измерения vm . Если вы предпочитаете IE9, плагин postcss-vmin от Vincent De Oliveira добавит единицы измерения vm в качестве запасного варианта.

Добавьте этот код в ваш файл «src / style.css»:

1
2
3
.vmFallback {
    width: 50vmin;
}

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

1
2
3
4
.vmFallback {
    width: 50vm;
    width: 50vmin;
}

Ссылки по теме

Добавить px Fallback для rem Units

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

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

1
2
3
4
5
6
7
8
9
.remFallback {
    height: 10rem;
    font: 2rem Arial;
}
 
.remFallback::before {
    content: »;
    line-height: 1rem;
}

Перекомпилируйте, и вы должны увидеть все соответствующие добавленные отступы px :

01
02
03
04
05
06
07
08
09
10
11
12
.remFallback {
    height: 160px;
    height: 10rem;
    font: 32px Arial;
    font: 2rem Arial;
}
 
.remFallback:before {
    content: »;
    line-height: 16px;
    line-height: 1rem;
}

Ссылки по теме

Давайте подведем итоги

Подводя итог тому, что мы рассмотрели выше:

  • Autoprefixer является обязательным инструментом для каждого проекта
  • Autoprefixer может быть настроен для добавления префиксов поставщиков на основе любых браузеров, которые вам нужно поддерживать
  • Если вы используете анимацию в своем проекте, рассмотрите возможность использования плагина postcss-will-change
  • Если поддерживается IE8, рассмотрите возможность использования плагинов postcss-color-rgba-fallback , postcss-opacity , postcss-pseudoelements и postcss-vmin .
  • Если поддерживается IE8, IE9, IE10, рассмотрите возможность использования плагина node-pixrem

В следующем уроке

Далее в нашей серии статей PostCSS Deep Dive вы узнаете, как использовать плагины для минимизации и оптимизации вашего CSS. Мы рассмотрим @import файлов @import , объединение @import , удаление пробелов и еще несколько методов, чтобы сделать ваши таблицы стилей максимально упорядоченными. Увидимся там!

40
Share: