Как настроить таргетинг только на браузеры Chrome CSS - PullRequest
Новая
       28

Как настроить таргетинг только на браузеры Chrome CSS

0 голосов
/ 07 февраля 2019

По какой-то причине Chrome показывает этот диапазон необычно выше, чем FireFox.

В результате я написал следующий код CSS: 

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .selector:not(*:root),
  span.justForChrome {
    display: block;
    margin-top: 23%;
    text-align: right;
  }
}

Ниже приведен HTML-код: 

  <li class="nav-item">
    <a
      class="nav-link"
      data-toggle="tooltip"
      title="Shopping cart"
      id="{{ shoppingCart }}"
      routerLink="/shopping-cart"
      ><span class="justForChrome"
        >Shopping Cart<span id="counter">{{ counter }}</span></span
      ></a
    >
  </li>

Пока это работает в Chrome, теперь FireFox показывает высокий диапазон.Если для инструментов разработчика FireFox я установлю значение margin-top равным 100%, то оно будет идеальным, но на Chrome 100% -ое значение margin-top отправляет диапазон вверх.

Что я могу сделать?Клянусь, это работало несколько недель назад.Я ожидаю, что Firefox даже не найдет правило селектора span.justForChrome в CSS

Заранее спасибо

ОБНОВЛЕНИЕ

В случае, если кто-то ещепроходит через это, я думал, что я покажу, что, наконец, работает.Является ли это фактом, что мне нужно скомпилировать приложение Angular, которое создает новую «связанную» таблицу стилей, или это потому, что я поместил медиазапросы в конец файла scss, я не знаю, но вот медиазапросы, которые я использовал в конце файла scss, который работал: 

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .selector:not(*:root),
  span.justForChrome {
    display: block;
    margin-top: 23%;
    text-align: right;
  }
}
@-moz-document url-prefix() {
  span.justForChrome {
    display: block;
    margin-top: 94px !important;
    text-align: right;
  }
}

В настоящее время сайт все еще находится в стадии бета-тестирования, но вот это:

screen shot of the two browsers live

И слова «Корзина», и номер находятся на «базовой линии» панели навигации.

Как обычно, спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Я протестировал следующий код в Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-разрядная версия) и Chrome версии 72.0.3626.81 (официальная сборка) (64-разрядная версия), и он работает, как и ожидалось, в Chrome. 

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

Обратите внимание, что .chrome - это имя класса, и вы можете изменить его с другими именами классов.

Проверьте следующее JsFiddle или фрагмент: 

.test {color:red;}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}
<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>
0 голосов
/ 07 февраля 2019

Используйте этот медиазапрос только для таргетинга Chrome. 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    //chrome specifc css styles go here
}
...