it-swarm.com.ru

Условное правило CSS для Firefox Quantum

У нас есть проблемы с таргетингом на Firefox Quantum, когда речь заходит о CSS. Мы знаем, что следующее:

@-moz-document url-prefix() { 
    .my-style{
    }
}

... будет нацелен на все браузеры Firefox, но мы просто хотим нацелить Firefox Quantum, поскольку существуют некоторые различия между Firefox Quantum и более ранними версиями Firefox, когда речь заходит об интерпретации CSS. Кто-нибудь знает как это сделать?

5
itoctopus

Изучая заметки о выпуске Fx Quantum 57, в частности заметки Quantum CSS , перечислен ряд различий между Gecko и Stylo, и на ум приходит несколько взломов.

Вот один из них:

Вы можете использовать @supports с выражением calc(0s) в сочетании с @-moz-document для проверки на Stylo - Gecko не поддерживает значения <time> в выражениях calc(), но Stylo делает:

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

Вот подтверждение концепции:

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

Обратите внимание, что Fx Quantum 59 и 60 не разрешают использовать @-moz-document в общедоступных документах, но версия 61 восстанавливает функциональность для взлома @-moz-document url-prefix(), что позволяет ему работать должным образом. Версия 60 является выпуском ESR, однако, если вам нужно настроить таргетинг на эту версию, вам нужно изменить правило @-moz-document на медиазапрос:

@media (-moz-device-pixel-ratio) {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

Ориентация только на устаревшие версии Firefox немного сложна - если вас интересуют только версии, которые поддерживают @supports, то есть Fx 22 и выше, @supports not (animation: calc(0s)) - это все, что вам нужно:

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

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

11
BoltClock

Нет. Надежного способа сделать это. Некоторые могут предложить строку с пользовательским агентом, но это тоже оказалось ненадежным

Я предлагаю вам использовать функции запросов или обнаружения через JavaScript или @supports в CSS.

0
Rob