Краевой браузер игнорирует переменную CSS - PullRequest
Новая
       10

Краевой браузер игнорирует переменную CSS

0 голосов
/ 11 сентября 2018

Как вы можете видеть в этом примере: https://jsfiddle.net/50mqy8p1/1/ Microsoft Edge игнорирует display: var(--display-var, block) после display: none;, поэтому div не виден. Другие браузеры показывают это правильно (IE11 работает на основе отступления над использованием var).

Есть ли ошибка в моем коде? Или вы знаете обходной путь? Гугл мне здесь не помог. 

<!DOCTYPE html>
<html>
  <head>
    <title>Edge Demo</title>
    <style>
      html, body {
        height: 100%;
      }
      .foo {
        --display-var: flex;
        background: #369;
        height: 100%;
        align-items: center;
        justify-content: center;
      }
      .make-invisible { display: none; }
      .make-visible {
        display: block;
        display: var(--display-var, block);
      }
    </style>
  </head>
  <body>
    <div class="foo make-invisible make-visible">I am here!</div>
  </body>
</html>

Как вы можете видеть ниже, это также происходит, если вы используете только один класс и медиа-запрос 

<!DOCTYPE html>
<html>
  <head>
    <title>Edge Demo</title>
    <style>
      .foo {
        --display-var: flex;
        display: none;
      }

      @media (min-width: 320px) {
        .foo {
          display: block;
          display: var(--display-var, block);
        }
      }
    </style>
  </head>
  <body>
    <div class="foo">I am here!</div>
  </body>
</html>

Каков наш вариант использования, который позволяет нам запустить эту проблему: У нас есть CMS, где редактор контента может выбирать, когда что-то должно быть видимым или невидимым. Затем мы генерируем общие классы видимости / невидимости и общий соответствующий небольшой фрагмент CSS, который обрабатывает видимость. Но иногда вы не хотите, чтобы элемент был «блоком», а, например, «flex». С этим трюком CSS-Vars дизайн может решить, каким должен быть элемент, как только он станет видимым, не делая ничего другого.

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Я вижу, что вы использовали разные классы одновременно.

Как правило, нет необходимости использовать несколько классов одновременно.

Это также зависит от того, что каждый браузер работает по-разному, и возможно, что Edge отдает приоритет другим результатам класса в этих выходных данных.

Вы можете попытаться использовать JS, чтобы заменить один класс другим.

Если есть какая-то конкретная цель использования нескольких классов, вы можете сообщить нам об этом.

Мы постараемся предоставить дополнительные предложения на основе этого требования.

0 голосов
/ 11 сентября 2018

Кажется, что атрибут display: none; класса .make-invisible сбивает с толку Edge.

Я думал, что обновление специфичности класса .make-visible до уровня, подобного .foo.make-visible, приведет кустранить проблему, но даже в этом случае проблема сохраняется в Edge.

Самое простое решение IMO - удалить класс .make-invisible из элемента div, потому что я не вижу причины, по которой вам нужноиметь одновременно классы .make-invisible и .make-visible на одном элементе.

Обновление

После рассмотрения вашего обновления я смог придуматьне слишком уродливый взлом.Это не только решает проблему в Edge, но и не влияет на поведение в Chrome или FF.

Что вам нужно будет сделать, это определить класс дважды для каждого свойства в отдельном классе, например: 

    .foo {
      display: block;
    }
    .foo {
      display: var(--display-var, block);
    }

Вот рабочая версия вашего демо: https://jsfiddle.net/sbr29yo6/

...