Вложенные настраиваемые свойства CSS (переменные CSS) с медиа-запросами в IE 11?

Моя установка:

// Set CSS Vars
:root {
  // These variables control everything
  /* set base values */
  --text-base-size: 1.125em;
  /* This is for smaller text (sm and down) */
  --text-scale-ratio-down: 1.15;
  /* This is for larger text (md and up) */
  --text-scale-ratio-up: 1.18;

  // Calculate sizes
  --text-xxs: calc(((1em / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down));
  --text-xs: calc(var(--text-xxs) * var(--text-scale-ratio-down));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio-down));
  --text-md: calc(1em * var(--text-scale-ratio-up));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio-up));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio-up));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio-up));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio-up));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio-up));
}

// Responsive
// Override variables for recalculation on desktops
@include mq(xxl){
    :root {
    /* set base values */
    --text-base-size: 1.313em;
    /* This is for smaller text (sm and down) */
    --text-scale-ratio-down: 1.18;
    /* This is for larger text (md and up) */
    --text-scale-ratio-up: 1.22;
  }
}

body {
  // Set base font size
  font-size: var(--text-base-size);
}

// Set font-size
h1 {
  font-size: var(--text-xxxl);
}

После компиляции с postcss-preset-env это выглядит так, как в IE 11:

h1 {
font-size: 1.93878em;
font-size:var(--text-xxxl);");
}

IE 11 не поддерживает настраиваемые свойства и использует значение 1.93878em. Это значение было статически вычислено postcss-preset-env.

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

Здесь это не работает, потому что IE 11 не распознает обновление переменной CSS в медиа-запросе. Может, это не сработает, потому что переменные CSS вложены?

Как может выглядеть решение для IE 11?


person QJan84    schedule 07.06.2019    source источник
comment
IE их не поддерживает: caniuse.com/#feat=css-variables   -  person Temani Afif    schedule 07.06.2019
comment
Мне это понятно .... поэтому и есть postCSS.   -  person QJan84    schedule 07.06.2019
comment
Можете ли вы опубликовать пример, который может вызвать проблему в Internet Explorer? Мы попробуем протестировать код в IE, чтобы проверить результат. Это может помочь лучше понять проблему.   -  person Deepak-MSFT    schedule 07.06.2019
comment
Не знаю как ... Скорее postCSS пришлось бы писать дополнительный CSS, который учитывает обновление переменных CSS в медиа-запросе.   -  person QJan84    schedule 07.06.2019
comment
Это будет также сложно для нас, потому что мы не сможем правильно понять проблему с помощью только вышеприведенного кода.   -  person Deepak-MSFT    schedule 07.06.2019


Ответы (1)


Вы можете использовать polyfill, мне это помогло, получить CDN в https://github.com/nuxodin/ie11CustomProperties

person Batyodie    schedule 21.06.2020
comment
Добро пожаловать в Stack Overflow. Пожалуйста, прочтите раздел в области помощи о написании хороших ответов. Ответы только по ссылкам уязвимы для тех ссылок, которые умирают, и ответ должен быть полезен, даже если ссылка разрывается. - person Jason Aller; 21.06.2020