1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447
|
// Map of compass extensions that are loaded. The value will either be
// the version of the extension or `true` if the version is unknown.
$compass-extensions: compass-extensions() !default;
// The list of browsers you want to support.
// Defaults to all.
$supported-browsers: browsers() !default;
// The browser usage threshold for features that gracefully degrade
// Defaults to 1 user in 1,000.
$graceful-usage-threshold: 0.1 !default;
// The browser usage threshold for features that cannot degrade gracefully
// Defaults to 1 user in 10,000.
$critical-usage-threshold: 0.01 !default;
// Set this to true to generate comments that will explain why a prefix was included or omitted.
$debug-browser-support: false !default;
// Minimum browser versions that must be supported.
// The keys of this map are any valid browser according to `browsers()`.
// The values of this map are the min version that is valid for that browser
// according to `browser-versions($browser)`
$browser-minimum-versions: (
'chrome': null,
'firefox': null,
'ie': null,
'safari': null,
'opera': null
) !default;
// @private
$default-capability-options: (
(full-support: true),
(partial-support: true)
);
// When a prefix in in context, but there is no current prefix
// That context is recorded here so other prefixes can be avoided.
$prefix-context: null;
// When a prefix is in a selector or directive scope, this is set to the
// current prefix value. When `null`, either there is no prefix in scope
// or the official prefix is being rendered. The `$prefix-context`
// variable can be used to make that distinction.
$current-prefix: null;
// When in a context that only exists in a particular version
// this variable is set to those versions.
$current-browser-versions: ();
// The legacy support CSS 2.1 Selectors.
// Defaults to the $critical-usage-threshold.
$css-sel2-support-threshold: $critical-usage-threshold !default;
// Check if the browser is in scope given the browser support and current prefix minimums.
@function browser-out-of-scope($browser, $version: null) {
@if not index($supported-browsers, $browser) {
@if $debug-browser-support {
@return "#{$browser} is not listed as a supported browser."
} @else {
@return true;
}
} @else if not ($current-prefix == null or $current-prefix == browser-prefix($browser)) {
@if $debug-browser-support {
@return "#{$browser} #{$version} is incompatible with #{$current-prefix}."
} @else {
@return true;
}
}
$current-range: map-get($current-browser-versions, $browser);
$current-min: if($current-range, nth($current-range, 1), null);
$current-max: if($current-range, nth($current-range, 2), null);
@if not ($version and $current-max) {
// We don't have any versions to compare
@return false;
} @else {
// If the version is less than the current min, it is not supported
$too-old: compare-browser-versions($browser, $version, $current-min) < 0;
$too-new: compare-browser-versions($browser, $version, $current-max) > 0;
@if $too-old or $too-new {
@if $debug-browser-support {
@return "The current scope only works with #{display-browser-range($browser, $current-min, $current-max)}.";
} @else {
@return true;
}
} @else {
@return false;
}
}
}
// Check whether the browser is supported according to the supported browsers,
// declared minimum support and usage thresholds.
@function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: $critical-usage-threshold) {
@if not index($supported-browsers, $browser) {
@return false;
}
// Check agaist usage stats and declared minimums
$min-required-version: map-get($browser-minimum-versions, $browser);
$usage: if($max-version,
omitted-usage($browser, $min-version, $max-version),
omitted-usage($browser, $min-version));
@return $usage > $threshold or
($min-required-version and
compare-browser-versions($browser, $max-version or $min-version, $min-required-version) >= 0);
}
// Include content for a legacy browser
// Version can be a single version string or a list of versions ordered from oldest to newest.
@mixin for-legacy-browser($browser, $min-version, $max-version: $min-version,
$threshold: $critical-usage-threshold,
$ranges: ($browser: $min-version $max-version)) {
@if not browser-out-of-scope($browser, $max-version) and
support-legacy-browser($browser, $min-version, $max-version, $threshold)
{
@if $debug-browser-support {
/* Content for #{display-browser-range($browser, $min-version, $max-version)}.
Min version: #{map-get($browser-minimum-versions, $browser) or unspecified}.
User threshold to keep: #{$threshold}%. If #{display-browser-range($browser, $min-version, $max-version)} are omitted: #{omitted-usage($browser, $min-version, $max-version)}%. */
}
@include with-browser-ranges(intersect-browser-ranges($current-browser-versions, $ranges)) {
@content;
}
} @else if $debug-browser-support and browser-out-of-scope($browser, $max-version) {
/* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
Not allowed in the current scope: #{browser-out-of-scope($browser, $max-version)} */
} @else if $debug-browser-support and not
support-legacy-browser($browser, $min-version, $max-version, $threshold) {
@if omitted-usage($browser, $min-version, $max-version) > $threshold {
/* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
User threshold to keep: #{$threshold}%. If #{display-browser-range($browser, $min-version, $max-version)} and below are omitted: #{omitted-usage($browser, $min-version, $max-version)}%. */
} @else {
/* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
Minimum support is #{map-get($browser-minimum-versions, $browser)}. */
}
}
}
@function display-browser-range($browser, $min-version, $max-version: $min-version) {
@return "#{unquote($browser)} #{unquote($min-version)}#{if($max-version != $min-version, unquote(' -') unquote($max-version), null)}";
}
// Renders the content once if any of the legacy browsers are supported.
// $browsers is a map of browser name to version ranges
@mixin for-legacy-browsers($browsers, $threshold: $critical-usage-threshold) {
$rendered: false;
@each $browser, $range in $browsers {
@if not $rendered {
@include for-legacy-browser($browser, $range..., $threshold: $threshold, $ranges: $browsers) {
$rendered: true;
@content;
}
}
}
}
// If there's a prefix context in scope, this will only output the content if the prefix matches.
// Otherwise, sets the current prefix scope and outputs the content.
@mixin with-prefix($prefix) {
@if $current-prefix or $prefix-context {
@if $current-prefix == $prefix or $prefix-context == $prefix {
@if $debug-browser-support {
@if $prefix {
/* content for #{$prefix} because #{$current-prefix or $prefix-context} is already in scope. */
} @else {
/* unprefixed content. #{$current-prefix or $prefix-context} is already in scope. */
}
}
$old-prefix-context: $prefix-context;
$old-prefix: $current-prefix;
$prefix-context: $prefix-context or $current-prefix !global;
$current-prefix: $prefix !global;
@content;
$prefix-context: $old-prefix-context !global;
$current-prefix: $old-prefix !global;
} @else if $prefix == null {
$old-prefix-context: $prefix-context;
$prefix-context: $prefix-context or $current-prefix !global;
$current-prefix: null !global;
@if $debug-browser-support {
/* Content for official syntax. Prefix context is still #{$prefix-context}. */
}
@content;
$current-prefix: $prefix-context !global;
$prefix-context: $old-prefix-context !global;
} @else if $debug-browser-support {
/* Omitting content for #{$prefix} because #{$current-prefix} is already in scope. */
}
} @else {
@if $debug-browser-support and $prefix {
/* Creating new #{$prefix} context. */
}
$prefix-context: $prefix !global;
$current-prefix: $prefix !global;
@content;
$current-prefix: null !global;
$prefix-context: null !global;
}
}
@function prefixes-for-capability($capability, $threshold, $capability-options: $default-capability-options) {
$result: ();
@each $prefix in browser-prefixes($supported-browsers) {
$result: map-merge($result,
($prefix: use-prefix($prefix, $capability, $threshold, $capability-options)));
}
@return $result;
}
// Yields to the mixin content once for each prefix required.
// The current prefix is set to the $current-prefix global for use by the included content.
// Also yields to the content once with $current-prefix set to null for the official version
// as long as there's not already a prefix in scope.
@mixin with-each-prefix($capability, $threshold, $capability-options: $default-capability-options) {
@each $prefix, $should-use-prefix in prefixes-for-capability($capability, $threshold, $capability-options) {
@if $should-use-prefix {
@if $debug-browser-support and type-of($should-use-prefix) == list {
/* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix} is required. */
} @else if $debug-browser-support and type-of($should-use-prefix) == number {
/* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix}% of users need it which is more than the threshold of #{$threshold}%. */
}
@include with-prefix($prefix) {
@include with-browser-ranges($capability) {
@content;
}
}
} @else if $debug-browser-support {
/* Capability #{$capability} is not prefixed with #{$prefix} because #{prefix-usage($prefix, $capability, $capability-options)}% of users are affected which is less than the threshold of #{$threshold}. */
}
}
@include with-prefix(null) {
@include with-browser-ranges($capability) {
@content;
}
}
}
// Returns true if at least one browser-version pair in $subset-ranges
// is a higher (or same) version than the browser-version pairs in
// $ranges.
@function has-browser-subset($ranges, $subset-ranges) {
$found-mismatch: false;
@each $browser, $subset-range in $subset-ranges {
$range: map-get($ranges, $browser);
@if $range {
$min-1: nth($subset-range, 1);
$max-1: nth($subset-range, 2);
$min-2: nth($range, 1);
$max-2: nth($range, 2);
@if (compare-browser-versions($browser, $min-2, $min-1) <= 0 and
compare-browser-versions($browser, $min-1, $max-2) <= 0) or
(compare-browser-versions($browser, $min-2, $max-1) <= 0 and
compare-browser-versions($browser, $max-1, $max-2) <= 0) or
(compare-browser-versions($browser, $min-1, $min-2) <= 0 and
compare-browser-versions($browser, $max-1, $max-2) >= 0) or
(compare-browser-versions($browser, $min-1, $min-2) >= 0 and
compare-browser-versions($browser, $max-1, $max-2) <= 0) {
@return true;
} @else {
$found-mismatch: true
}
}
}
@return not $found-mismatch;
}
// When the same browser is in both maps, then the minimum will be set
// to the maximum of the two minimum versions, and the maximum will be
// set to the minmum of the two maximum versions.
@function intersect-browser-ranges($ranges, $new-ranges) {
@each $browser, $new-range in $new-ranges {
$old-range: map-get($ranges, $browser);
@if $old-range {
$old-min: nth($old-range, 1);
$old-max: if(length($old-range) == 1, $old-min, nth($old-range, 2));
$new-min: nth($new-range, 1);
$new-max: if(length($new-range) == 1, $new-min, nth($new-range, 2));
$maximin: if(compare-browser-versions($browser, $old-min, $new-min) > 0,
$old-min, $new-min);
$minimax: if(compare-browser-versions($browser, $old-max, $new-max) < 0,
$old-max, $new-max);
$ranges: map-merge($ranges, ($browser: $maximin $minimax));
} @else {
$ranges: map-merge($ranges, ($browser: $new-range));
}
}
@return $ranges;
}
// If passed a map, that will be the new browser ranges.
// Otherwise a range map will be created based on the given capability and prefix
// using the `browser-ranges($capability, $prefix)` function.
//
// If there are current ranges in scope and the new ranges have some overlap
// with the current,
//
// If there is no overlap, then the content will not be rendered.
@mixin with-browser-ranges($capability, $prefix: $current-prefix) {
$new-ranges: null;
@if type-of($capability) == map {
$new-ranges: $capability;
} @else {
$new-ranges: browser-ranges($capability, $prefix);
}
@if has-browser-subset($current-browser-versions, $new-ranges) {
$old-ranges: $current-browser-versions;
$current-browser-versions: intersect-browser-ranges($old-ranges, $new-ranges) !global;
@content;
$current-browser-versions: $old-ranges !global;
} @else if $debug-browser-support {
/* Excluding content because #{inspect($new-ranges)} is not included within
#{inspect($current-browser-versions)} */
}
}
// Returns true if the prefixed usage stats for the capability exceed the threshold
// or if the minimum version for a supported browser would require a prefix for the capability.
@function use-prefix($prefix, $capability, $threshold, $capability-options: $default-capability-options) {
$usage: prefix-usage($prefix, $capability, $capability-options);
@if $usage > $threshold {
@return $usage;
} @else {
@each $browser in browsers($prefix) {
@if index($supported-browsers, $browser) {
$min-version: map-get($browser-minimum-versions, $browser);
@if $min-version {
$actual-prefix: browser-requires-prefix($browser, $min-version, $capability, $capability-options);
@if $actual-prefix and $prefix == $actual-prefix {
@return $browser $min-version;
}
}
}
}
}
@return false;
}
@function prefix-identifier($ident, $prefix: $current-prefix) {
@return unquote("#{$prefix}#{if($prefix, '-', null)}#{$ident}");
}
// Output a property and value using the current prefix.
// It will be unprefixed if $current-prefix is null.
@mixin prefix-prop($property, $value, $prefix: $current-prefix) {
#{prefix-identifier($property, $prefix)}: $value;
}
// Emit a set of properties with the prefix governed by the capability and usage threshold given.
//
// Example:
//
// @include prefixed-properties(css-animation, $animation-support-threshold,
// (animation-name: foo, animation-duration: 2s)
// );
@mixin prefixed-properties($capability, $threshold, $properties, $capability-options: $default-capability-options) {
@include with-each-prefix($capability, $threshold, $capability-options) {
@each $prop, $value in $properties {
@include prefix-prop($prop, $value);
}
}
}
// @private
@function warn-about-old-variables() {
$old-variables-in-use: ();
@each $old-variable-name in
(legacy-support-for-ie, legacy-support-for-ie6, legacy-support-for-ie7,
legacy-support-for-ie8, legacy-support-for-mozilla, legacy-support-for-webkit,
experimental-support-for-mozilla, experimental-support-for-webkit,
experimental-support-for-opera, experimental-support-for-microsoft,
experimental-support-for-khtml, experimental-support-for-svg)
{
@if global-variable-exists($old-variable-name) {
$old-variables-in-use: append($old-variables-in-use,
unquote("$#{$old-variable-name}"), comma);
}
}
@if length($old-variables-in-use) > 0 {
@warn "Compass has changed how browser support is configured. " +
"The following configuration variables " +
"are no longer supported: #{$old-variables-in-use}." +
"Details: http://compass-style.org/help/documentation/tuning-vendor-prefixes/"
}
@return $old-variables-in-use;
}
// @private
@function warn-about-pie-removal() {
@if global-variable-exists(experimental-support-for-pie) {
@warn "Compass no longer supports css3pie.";
}
@return true;
}
// Enable browser support debugging within the content block.
// Or you can enable it for the whole stylesheet by setting `$debug-browser-support` to true.
@mixin with-browser-support-debugging {
$current-status: $debug-browser-support;
$debug-browser-support: true !global;
@content;
$debug-browser-support: $current-status !global;
}
// Set a default value if the given arglist is empty
@function set-arglist-default($arglist, $default) {
$default-index: index($arglist, default);
@if $default-index {
$arglist: set-nth($arglist, $default-index, $default)
}
@return if(length($arglist) > 0, $arglist, $default);
}
// @private
$old-variable-warnings-issued: warn-about-old-variables() !default;
// @private
$pie-removal-warning-issued: warn-about-pie-removal() !default;
// @private
@function warn-about-useless-prefix-arguments($moz: null, $webkit: null, $o: null, $khtml: null, $official: null) {
@if $moz != null or $webkit != null or $o != null or $khtml != null or $official != null {
@warn "Browser prefix arguments to this mixin are no longer used and " +
"will be removed in the next release.";
}
@return true;
}
// coerce a list to be comma delimited or make a new, empty comma delimited list.
@function comma-list($list: ()) {
@return join((), $list, comma);
}
// @private Returns the legacy value for a given box-model
// - Used by background-clip and -origin.
@function legacy-box($box) {
$box: unquote($box);
@if $box == padding-box { $box: padding; }
@if $box == border-box { $box: border; }
@if $box == content-box { $box: content; }
@return $box;
}
|