Не сломается ли мой js-скрипт, установив css --variables в старых браузерах? - PullRequest
Новая
       7

Не сломается ли мой js-скрипт, установив css --variables в старых браузерах?

0 голосов
/ 21 ноября 2018

Я хочу начать использовать css --variables.Для устаревших браузеров резервный вариант css - сначала объявить устаревшее правило, и это нормально.Но тогда я буду манипулировать ими через JavaScript.Так что, он сломает скрипт и выдаст несколько ошибок в старых браузерах?Я спрашиваю, потому что в настоящее время я не могу проверить на наследство, поэтому я не могу видеть сам.

Я имею в виду, если я сделаю что-то вроде этого: 

elem.style.setProperty('--tx', `10px`);

Что произойдет вустаревшие браузеры?Просто ничего (--tx молча не обновится и программа запустится) или, выдаст ошибку и сломает скрипт?

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Для меня ответ на мой вопрос - нет, это не сломает JavaScript.Тем не менее, вам нужно обратиться к CSS-коду для браузеров, которые не поддерживают --variables.В частности, и, к сожалению, очевидно, Microsoft Edge поддерживает их, но в некоторых обстоятельствах не может правильно их обработать.Это делает его несколько более ошибочным, чем IE11, который просто игнорирует их.

Рассмотрим этот код: 

  @for $i from 1 through 20{
    // first for legacy browsers
    &[data-current="#{$i}"]{ transform: translateX(-100% * ($i - 1)); }
    // then for modern ones
    &[data-current="#{$i}"]{ transform: translate(calc(-100% * (#{$i} - 1) + var(--distance))); }
  }

и это: 

hm.on('pan', function(e){ // (hammer.js)
  slide_strip.style.setProperty('--distance', e.deltaX + 'px');
});

Протестировано в браузере Android 4.4.2, IE11, Edge.Android 4.4.2 и IE11 не поддерживают --variables.Edge поддерживает их, но не внутри calc (), переданного для преобразования.

Поведения:

  • Android 4.4.2 и IE11: js просто не будет установлен --distance, не выдавая никакой ошибки, и они будут использовать первое правило css (из-за текущих обновлений данных после события свайпа> не показанного здесь для простоты).Так что все это будет работать как запасной вариант.

  • Edge: js не выдаст никакой ошибки.Браузер прочитает второе правило CSS, но не сможет его обработать, и в результате будет зафиксировано движение.Так что тут должна быть какая-то адресация.Лично я бы использовал такой инструмент, как Bowser , чтобы определить тип браузера, добавить связанный класс в body и сопоставить с ним различные правила CSS.

О программеВ спецификации W3C я хотел бы указать, что:

SYNTAX_ERR: Повышается, если указанное значение имеет синтаксическую ошибку и не может быть обработано.

В этом случае мыГоворя о стоимости, а не собственности.Кроме того, значение не имеет синтаксической ошибки.

NO_MODIFICATION_ALLOWED_ERR: Повышается, если это объявление доступно только для чтения или свойство доступно только для чтения.

Свойство не доступно только для чтения,или, это не может быть сказано (если браузер не поддерживает i, это не делает сейчас об этом).Я думаю ..

0 голосов
/ 21 ноября 2018

Согласно спецификации , setProperty() может выдать DOMException при следующих условиях:

SYNTAX_ERR:Возникает, если указанное значение имеет синтаксическую ошибку и не может быть обработано.

NO_MODIFICATION_ALLOWED_ERR: Повышается, если это объявление доступно только для чтения или свойство доступно только для чтения.

Если вы хотите быть в безопасности, перенеситевызов в try...catch или условие, основанное на Modernizr.customproperties, чтобы гарантировать, что вызов либо перехватывается, если он вызывает исключение в устаревших браузерах, либо вызывается только еслиБраузер поддерживает это.

Я также предлагаю вам не использовать литералы шаблона или переносить его на ES5 с помощью Babel.

...