Настройка поддержки браузера компаса (синтаксис Compass 1.x)

В версии Compass 0.12.x я определял поддержку старых вещей следующим образом:

@import "compass/support"

$legacy-support-for-ie6: false;
$legacy-support-for-ie7: true;
$legacy-support-for-ie8: true;
$legacy-support-for-mozilla: false;

@if ($legacy-support-for-ie7) {
  // specific declaration if ie7 is supported
}

Мне интересно, как мне определить поддержку браузера после Система Compass 1.x. Может быть, что-то вроде этого:

// Add support for a specific browser
$browser-minimum-versions: (
  'ie': "7",
  'ie': "8"
);

// Reject browsers
$supported-browsers: reject(browser-versions("ie"), "6", "7", "8");

Но он возвращает эту ошибку (работает на Compass 1.0.1):

(Line 206 of /Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/_support.scss: 5.5 is not known browser.)

sass compass compass-sass
person Raphael Larrinaga    schedule 16.09.2014    source источник
comment
Какие версии браузера вы пытаетесь поддерживать?   -  person cimmanon    schedule 06.10.2014
comment
Что касается IE, ›ie7.   -  person Raphael Larrinaga    schedule 07.10.2014

Ответы (1)


arrow_upward
6
arrow_downward

Исключение браузеров осуществляется путем изменения переменной $graceful-usage-threshold. Если Браузер X имеет только 4,99% доли рынка, вы хотите установить его на 5.

$debug-browser-support: true;
$browser-minimum-versions: (
  "ie": "9"
);
$graceful-usage-threshold: 4.46163;

@import "compass";

.foo {
  @include opacity(.5);
  @include border-radius(10px);
}

Выход:

.foo {
  /* Content for ie 8 omitted.
     Minimum support is 9. */
  opacity: 0.5;
  /* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
  /* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
  /* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
  /* Capability border-radius is not prefixed with -webkit because 0.1583% of users are affected which is less than the threshold of 4.46163. */
  border-radius: 10px;
}

Обратите внимание, что это приводит к исключению других браузеров меньшинства, которые вы можете захотеть поддерживать. Вот когда $browser-minimum-versions вступает в игру.

$browser-minimum-versions: (
  "ie": "9",
  "safari": "4"
);

Выход:

.foo {
  /* Content for ie 8 omitted.
     Minimum support is 9. */
  opacity: 0.5;
  /* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
  /* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
  /* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
  /* Capability border-radius is prefixed with -webkit because safari "4" is required. */
  /* Creating new -webkit context. */
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

В работе есть изменения, чтобы упростить исключение старых браузеров. Вы можете следить за ними здесь: https://github.com/Compass/compass/issues/1762

Если вы хотите сделать правила для конкретного браузера, то в дело вступает переменная $critical-usage-threshold:

$debug-browser-support: true;
$browser-minimum-versions: (
  "ie": "9"
);
$critical-usage-threshold: 4.46163;
$graceful-usage-threshold: 4.46163;

@import "compass";

.foo {
  @include for-legacy-browser('ie', '8') {
    color: green;
    // this is based on $critical-usage-threshold by default
    // if $critical-usage-threshold is lower than the version's usage
    // then this content will be generated
  }
  @if support-legacy-browser('ie', '8') {
    color: red;
  }
}
person cimmanon    schedule 07.10.2014
comment
Спасибо. Тогда я предполагаю, что $graceful-usage-threshold – это процент, основанный на таблице использования браузера. - person Raphael Larrinaga; 29.10.2014
comment
Но тогда, что касается второй части моего вопроса. Как добавить объявление для определенного браузера, например @if ($legacy-support-for-ie7) { // specific declaration } - person Raphael Larrinaga; 30.10.2014
comment
@RaphaelLarrinaga Обновлено с примером. - person cimmanon; 30.10.2014