配置指南针浏览器支持(Compass 1.x语法) [英] Configure compass browser support (Compass 1.x syntax)
问题描述
在Compass的0.12.x版本中,我以这种方式定义了对旧版本的支持:
With 0.12.x version of Compass, I was defining support for oldies that way:
@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系统。
也许是这样的:
I'm wonder how I should define browser support following Compass 1.x system. Maybe something like that:
// 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上运行):
But it returns that error (running on 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.)
推荐答案
不包含浏览器通过修改 $ graceful-usage-threshold
变量。如果浏览器X仅拥有4.99%的市场份额,则要将其设置为 5
。
Excluding browsers is done by modifying the $graceful-usage-threshold
variable. If Browser X only has 4.99% of the market share, you want to set it to 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
发挥作用的地方。
Note that this causes other minority browsers to be excluded that you may want to support. That's when the $browser-minimum-versions
comes into play.
$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
There are changes in the works to make it easier to exclude old browsers. You can follow them here: https://github.com/Compass/compass/issues/1762
如果要为特定浏览器制定规则,则 $ critical-usage-threshold
变量发挥作用:
If you want to make rules for a specific browser, then the $critical-usage-threshold
variable comes into play:
$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;
}
}
这篇关于配置指南针浏览器支持(Compass 1.x语法)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!