Использование новых функций CSS может быть проблематичным, если ваш проект все еще требует поддержки старых браузеров. Если вы начнете с прочной базы простых стилей, вы можете использовать прогрессивный подход к усовершенствованию и использовать новые стили, которые будут отображаться только в современных браузерах. Однако существуют сценарии, в которых вам понадобится некоторый запасной вариант для определенного стиля в старых браузерах. Стиль может быть не просто декоративным, поэтому потеря его может означать потерю контекста или понимания. Более старый браузер может использовать более высокий, чем обычно, процент аудитории сайта, что делает стратегию, которая делает сайт менее отшлифованным в этом браузере, слишком видимым.
В этой статье основное внимание уделяется резервной поддержке CSS для более старых версий Internet Explorer, использующих миксины и функции Sass. Старые версии Internet Explorer имеют тенденцию зависать из-за медленного обновления корпоративных и корпоративных настроек. Это функции CSS, для которых мы будем обсуждать решения:
- REM-модули в IE 8
- Медиа-запросы в IE 8
- Размер коробки в IE 7
- Box Shadows в IE 8
- Градиенты в IE 9
- Непрозрачность в 8
Стратегии для использования
Существует несколько различных стратегий обеспечения резервной поддержки неподдерживаемой функции CSS в Internet Explorer:
Двойное правило стиля
В этом сценарии другой формат для CSS может обеспечить запасной вариант. Современный стиль будет отменен через наследование CSS, но только в браузерах, которые его поддерживают. Техника состоит в том, чтобы просто разместить новое правило после более старого. Они предлагают не эквивалентные стили, но лучше, чем полное отсутствие поддержки.
Плюсы: очень прост в обслуживании.
Минусы: добавляет больший размер файла к вашим основным файлам CSS.
IE только стили
Есть несколько способов кормить определенные версии Internet Explorer своими таблицами стилей. В этом случае вы бы отменили основные стили стилями IE, но только в контексте этих браузеров. Это полезно для более сложных процедур отмены.
Плюсы: весь файл игнорируется не браузерами IE.
Минусы: разбивает правила на разные файлы, что может усложнить обслуживание.
IE взломает
Использование ошибок в старых версиях IE для переопределения базовых стилей для всех других браузеров. Обычно это связано с синтаксисом селектора.
Плюсы: может быть очень точным в действии.
Минусы: трудно читать и поддерживать. Добавленный синтаксис вводит ошибки проверки в CSS.
фильтры
В некоторых случаях стиль не поддерживается, но есть эквивалентный или почти эквивалентный собственный «фильтр» IE, который можно применить.
Плюсы: как правило двойного стиля, это просто поддерживать
Минусы: некоторые фильтры оказывают значительное влияние на производительность, поэтому их следует применять разумно и проверять. Добавленный синтаксис вводит ошибки проверки в CSS.
Конкретные особенности браузера, чтобы отметить, от caniuse.com
REM
Internet Explorer 9 и 10 не поддерживают единицы rem при использовании в сокращенном свойстве шрифта (полное объявление игнорируется) или при использовании псевдоэлементов.
IE 9, 10 и 11 не поддерживают единицы rem при использовании в свойстве «line-height» при использовании псевдоэлементов: before и: after .
Медиа-запросы
IE9 неправильно включает ширину полосы прокрутки для медиа-запросов на основе ширины окна.
Размер коробки
IE9 вычтет ширину полосы прокрутки к ширине элемента, когда установлено в положение: абсолютное, переполнение: авто / переполнение-у: прокрутка
IE 8 игнорирует box-sizing: border-box, если используется min / max-width / height.
Существующие решения для подбора
REM w / PX отступление для типографии
Easy-peasy Rem Conversion с Sass от Николь Салливан
Миксин для создания правил двойного стиля только для размера шрифта.
Mixins для Rem Font Sizing от CSS Tricks
Два метода получения решения по правилам двойного стиля для резервных копий PX. Один обслуживает только размер шрифта, другой позволяет вводить в свойство, например, поле.
REM Sass Mixin с запасным вариантом Pixel от Пола Андервуда
Два других метода, но в этом случае версия с одним значением также может быть передана в свойстве.
Использование Ремса с Sass от David Ensinger
Единый мощный миксин, который позволяет заданные свойства и сочетание значений, включая PX,% и auto.
Функция браузера REM to PX с Sass от Себастьяна Аксинте
В этом решении можно избежать веса загрузки файлов из множества правил двойных стилей, объединяя стили в два листа и используя условные комментарии IE для отправки версий PX в IE 8 и ниже.
Откат для медиазапросов.
Sass Breakpoint Mixin встречает IE8 Кендалл Тоттен
Стили, скрытые медиазапросами для размеров «рабочего стола», могут быть продублированы для использования IE8 через класс «old-ie».
OldIE Mixin Джейка Арчибальда
В этом решении две таблицы стилей генерируются из одного источника. На одном из листов выровнены медиазапросы и добавлено произвольное дополнительное содержимое только для IE. Условные комментарии IE используются для подачи старого в IE 8 и менее.
My Media Query Mixin от Стю Робсон
Миксин, который обеспечивает три вещи в одном: сокращенная запись, задающая значения PX, преобразованные в EM, и флаг возврата IE, который будет дублировать стили в селектор класса «lt-ie9»
Размер блока: граница не поддерживается в IE6 / 7
Sass-y запасной размер коробки, если нужно , Стю Робсон
Определите ширину с отступом влево / вправо, и современные (поддерживаемые рамки) и старые стили будут создаваться и передаваться через условные комментарии.
Градиенты
Делая Sass линейные градиенты Mixins ведут себя в IE Ник Пьеско
Этот миксин добавляет поддержку фильтра IE, который поддерживает градиенты.
Вывод
Мы рассмотрели различные проблемы, связанные с современным CSS, поддерживаемым в старых версиях Internet Explorer. С помощью Sass мы видим, что есть помощь в предоставлении поддержки для сборок сайтов с использованием готовых решений напрямую, или мы могли бы учиться на этих шаблонах и создавать свои собственные варианты. Вы создали миксин или функцию, которая поможет исправить недостаток поддержки CSS в старых браузерах? Пожалуйста, поделитесь ими в комментариях.