Обходной путь для переменных CSS в IE?

В настоящее время я разрабатываю веб-приложение в Outsystems, в котором мне нужно настроить CSS, в котором я использую переменные. Мне нужно гарантировать, что приложение работает в кросс-браузерном режиме, в том числе в Internet Explorer. IE не поддерживает переменные CSS, как вы можете видеть на рисунке ниже из этого источника.

Поскольку я должен использовать переменные CSS, есть ли обходной путь для использования переменных в IE?

ОТВЕТЫ

Ответ 1

Да, есть способ, так же, как вы css совместимы: используйте специальный резерв css, который поддерживается браузером.

body {
  --text-color: red;
}

body {
  color: red /* default supported fallback style */
  color: var(--text-color); /* will not be used by any browser that doesn't support it, and will default to the previous fallback */
}

Это решение невероятно избыточно и "почти" побеждает цель css-переменных... НО это необходимо для совместимости браузера. Выполнение этого по существу сделало бы переменные css бесполезными, но я умоляю вас использовать их, потому что это послужит важным напоминанием о том, что эти значения ссылаются на другие места и их необходимо обновлять во всех случаях, иначе вы забудете обновить каждую связанную появление "цвета", а затем у вас непоследовательный стиль, потому что соответствующие значения css не синхронизированы. Переменная будет служить скорее комментарием, а очень важным.

Ответ 2

В случае, если кто-то сталкивается с этим, имеет аналогичную проблему, где я сделал это так.

a {
  background: var(--new-color);
  border-radius: 50%;
}

Я добавил цвет фона перед переменной, поэтому, если он не загружается, он возвращается к гексу.

a {
  background: #3279B8;
  background: var(--new-color);
  border-radius: 50%;
}

Ответ 3

В "нормальном" css еще нет пути, но посмотрите на sass/scss или less.

вот пример scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Ответ 4

body {
  --text-color : red; /* --text-color 정의 */
}    

body {
   color: var(--text-color, red); /* --text-color 정의되지 않으면 red로 대체됨 */
}

body {
   color: var(--text-color, var(--text-color-other, blue));
   /* --text-color, --text-color-other 가 정의되지 않으면 blue로 대체됨 */
}

Ответ 5

Создайте отдельный файл .css для своих переменных. Скопируйте/вставьте содержимое файла variable.css в конец файла main.css. Найдите и замените все имена переменных в файле main.css на шестнадцатеричный код для этих переменных. Например: ctrl-h, чтобы найти var (--myWhiteVariable) и заменить на # 111111.

Примечание: если вы сохраните: root {} в файле main.css и просто закомментируете его, вы можете использовать его для отслеживания этих шестнадцатеричных кодов позже, если вы хотите обновить свои запасные цвета.

Ответ 6

Другой способ сделать это - объявить цвета в файле JS (в моем случае я использую реагирование), а затем просто использовать переменную, которую вы определили в файле JS.

Например:

  • в globals.js
export const COLORS = {
  yellow: '#F4B400',
  yellowLight: '#F4C849',
  purple: '#7237CC',
  purple1: '#A374EB',
}
  • в вашем файле
import { COLORS } from 'globals'

а затем просто используйте COLORS.yellow, COLORS.purple и т.д.

Ответ 7

Существует полифилл, который обеспечивает практически полную поддержку переменных CSS в IE11:
https://github.com/nuxodin/ie11CustomProperties
(я автор)

Скрипт использует тот факт, что IE имеет минимальную поддержку пользовательских свойств, где свойства могут быть определены и считаны с учетом каскада.
.myEl {-ie-test:'aaa'}//only one dash allowed! "-"
затем прочитайте это в javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']

Из README:

Характеристики

  • обрабатывает динамически добавляемый html-контент
  • обрабатывает динамически добавленные, -elements
  • сцепление --bar:var(--foo)
  • запасной вариант var(--color, blue)
  • : focus,: target,: hover
  • JS-интеграция:
    • style.setProperty('--x','y')
    • style.getPropertyValue('--x')
    • getComputedStyle(el).getPropertyValue('--inherited')
  • Встроенные стили: <div ie-style="--color:blue"...
  • каскадные работы
  • наследственные работы
  • до 3k (мин + gzip) и без зависимостей

Демо-версия:

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html

Ответ 8

Я рекомендую установить переменные css в качестве переменных sass, а затем использовать интерполяцию sass для визуализации цвета в ваших элементах.

:root {    
    --text-color: #123456;
}

$text-color: var(--text-color);

body {
    color: #{$text-color};
}

Ответ 9

Если im не так, существует обходной путь, селектор CSS #ID. Что должно работать для IE > 6, я думаю.. Таким образом, вы можете

.one { };
<div class="one">

должен работать как

#one {};
<div id="one">