mirror of
https://github.com/swc-project/swc.git
synced 2024-12-25 14:43:33 +03:00
feat(css/prefixer): Avoid prefixing general functions (#5319)
This commit is contained in:
Alexander Akait
GitHub
parent
5186211472
commit
07732d6a0a
@ -3242,5 +3242,203 @@
|
||||
{
|
||||
"opera": "15"
|
||||
}
|
||||
],
|
||||
|
||||
"-webkit-filter()": [
|
||||
{
|
||||
"ios": "9.0",
|
||||
"safari": "9"
|
||||
},
|
||||
{
|
||||
"ios": "9.3",
|
||||
"safari": "9"
|
||||
}
|
||||
],
|
||||
|
||||
"-webkit-calc()": [
|
||||
{
|
||||
"chrome": "19",
|
||||
"ios": "6.0",
|
||||
"safari": "6"
|
||||
},
|
||||
{
|
||||
"chrome": "25",
|
||||
"ios": "6.1",
|
||||
"safari": "6"
|
||||
}
|
||||
],
|
||||
"-moz-calc": [
|
||||
{
|
||||
"firefox": "4"
|
||||
},
|
||||
{
|
||||
"firefox": "15"
|
||||
}
|
||||
],
|
||||
|
||||
"-webkit-image-set()": [
|
||||
{
|
||||
"android": "4.4",
|
||||
"chrome": "21",
|
||||
"edge": "79",
|
||||
"ios": "6.0",
|
||||
"opera": "15",
|
||||
"safari": "6",
|
||||
"samsung": "4"
|
||||
},
|
||||
{
|
||||
"android": "4.4.4",
|
||||
"ios": "9.3",
|
||||
"safari": "9.1"
|
||||
}
|
||||
],
|
||||
|
||||
"-webkit-cross-fade()": [
|
||||
{
|
||||
"android": "4.4",
|
||||
"chrome": "17",
|
||||
"edge": "79",
|
||||
"ios": "5.0",
|
||||
"op_mob": "64",
|
||||
"opera": "15",
|
||||
"safari": "5.1",
|
||||
"samsung": "4"
|
||||
},
|
||||
{
|
||||
"android": "4.4.4",
|
||||
"ios": "9.3",
|
||||
"safari": "9.1"
|
||||
}
|
||||
],
|
||||
|
||||
"-moz-element()": [
|
||||
{
|
||||
"firefox": "4"
|
||||
},
|
||||
{}
|
||||
],
|
||||
|
||||
"-webkit-linear-gradient()": [
|
||||
{
|
||||
"android": "4.0",
|
||||
"chrome": "10",
|
||||
"safari": "5.1"
|
||||
},
|
||||
{
|
||||
"android": "4.3",
|
||||
"chrome": "25",
|
||||
"safari": "6"
|
||||
}
|
||||
],
|
||||
"-moz-linear-gradient()": [
|
||||
{
|
||||
"firefox": "3.6"
|
||||
},
|
||||
{
|
||||
"firefox": "15"
|
||||
}
|
||||
],
|
||||
"-o-linear-gradient()": [
|
||||
{
|
||||
"opera": "11.1",
|
||||
"op_mob": "11.1"
|
||||
},
|
||||
{
|
||||
"opera": "11.5",
|
||||
"op_mob": "11.5"
|
||||
}
|
||||
],
|
||||
|
||||
"-webkit-repeating-linear-gradient()": [
|
||||
{
|
||||
"android": "4",
|
||||
"chrome": "13",
|
||||
"safari": "5.1",
|
||||
"ios": "5.0"
|
||||
},
|
||||
{
|
||||
"android": "4.3",
|
||||
"chrome": "25",
|
||||
"safari": "6",
|
||||
"ios": "6.1"
|
||||
}
|
||||
],
|
||||
"-moz-repeating-linear-gradient()": [
|
||||
{
|
||||
"firefox": "3.6"
|
||||
},
|
||||
{
|
||||
"firefox": "15"
|
||||
}
|
||||
],
|
||||
"-o-repeating-linear-gradient()": [
|
||||
{
|
||||
"opera": "11.5"
|
||||
},
|
||||
{
|
||||
"opera": "15"
|
||||
}
|
||||
],
|
||||
|
||||
"-webkit-radial-gradient()": [
|
||||
{
|
||||
"android": "4.0",
|
||||
"chrome": "13",
|
||||
"safari": "5.1",
|
||||
"ios": "6.1"
|
||||
},
|
||||
{
|
||||
"android": "4.3",
|
||||
"chrome": "25",
|
||||
"safari": "6.1",
|
||||
"ios": "6.1"
|
||||
}
|
||||
],
|
||||
"-moz-radial-gradient()": [
|
||||
{
|
||||
"firefox": "3.6"
|
||||
},
|
||||
{
|
||||
"firefox": "15"
|
||||
}
|
||||
],
|
||||
"-o-radial-gradient()": [
|
||||
{
|
||||
"opera": "11.6"
|
||||
},
|
||||
{
|
||||
"opera": "15"
|
||||
}
|
||||
],
|
||||
|
||||
"-webkit-repeating-radial-gradient()": [
|
||||
{
|
||||
"android": "4",
|
||||
"chrome": "13",
|
||||
"safari": "5.1",
|
||||
"ios": "5.0"
|
||||
},
|
||||
{
|
||||
"android": "4.3",
|
||||
"chrome": "25",
|
||||
"safari": "6",
|
||||
"ios": "6.1"
|
||||
}
|
||||
],
|
||||
"-moz-repeating-radial-gradient()": [
|
||||
{
|
||||
"firefox": "3.6"
|
||||
},
|
||||
{
|
||||
"firefox": "15"
|
||||
}
|
||||
],
|
||||
"-o-repeating-radial-gradient()": [
|
||||
{
|
||||
"opera": "11.5"
|
||||
},
|
||||
{
|
||||
"opera": "15"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -3,7 +3,10 @@ use std::mem::take;
|
||||
|
||||
use once_cell::sync::Lazy;
|
||||
use preset_env_base::{query::targets_to_versions, version::Version, BrowserData, Versions};
|
||||
use swc_common::{collections::AHashMap, EqIgnoreSpan, DUMMY_SP};
|
||||
use swc_common::{
|
||||
collections::{AHashMap, AHashSet},
|
||||
EqIgnoreSpan, DUMMY_SP,
|
||||
};
|
||||
use swc_css_ast::*;
|
||||
use swc_css_utils::{
|
||||
replace_function_name, replace_ident, replace_pseudo_class_selector_name,
|
||||
@ -565,43 +568,46 @@ impl Prefixer {
|
||||
}
|
||||
|
||||
impl VisitMut for Prefixer {
|
||||
fn visit_mut_stylesheet(&mut self, n: &mut Stylesheet) {
|
||||
let mut new = vec![];
|
||||
fn visit_mut_stylesheet(&mut self, stylesheet: &mut Stylesheet) {
|
||||
let mut new_rules = Vec::with_capacity(stylesheet.rules.len());
|
||||
let original_rules = stylesheet.rules.clone();
|
||||
|
||||
for mut n in take(&mut n.rules) {
|
||||
n.visit_mut_children_with(self);
|
||||
for mut rule in take(&mut stylesheet.rules) {
|
||||
rule.visit_mut_children_with(self);
|
||||
|
||||
for mut added_rule in take(&mut self.added_top_rules) {
|
||||
let need_skip = original_rules
|
||||
.iter()
|
||||
.any(|existing_rule| added_rule.1.eq_ignore_span(existing_rule));
|
||||
|
||||
if need_skip {
|
||||
continue;
|
||||
}
|
||||
|
||||
for mut n in take(&mut self.added_top_rules) {
|
||||
let old_rule_prefix = self.rule_prefix.take();
|
||||
|
||||
self.rule_prefix = Some(n.0);
|
||||
self.rule_prefix = Some(added_rule.0);
|
||||
|
||||
n.1.visit_mut_children_with(self);
|
||||
added_rule.1.visit_mut_children_with(self);
|
||||
|
||||
new.push(n.1);
|
||||
new_rules.push(added_rule.1);
|
||||
|
||||
self.rule_prefix = old_rule_prefix;
|
||||
}
|
||||
|
||||
new.push(n);
|
||||
new_rules.push(rule);
|
||||
}
|
||||
|
||||
// Avoid duplicate prefixed at-rules
|
||||
new.dedup_by(|a, b| match (a, b) {
|
||||
(Rule::AtRule(a), Rule::AtRule(b)) => a.eq_ignore_span(b),
|
||||
_ => false,
|
||||
});
|
||||
|
||||
n.rules = new;
|
||||
stylesheet.rules = new_rules;
|
||||
}
|
||||
|
||||
// TODO handle declarations in `@media`/`@support`
|
||||
fn visit_mut_at_rule(&mut self, n: &mut AtRule) {
|
||||
let original_simple_block = n.block.clone();
|
||||
fn visit_mut_at_rule(&mut self, at_rule: &mut AtRule) {
|
||||
let original_simple_block = at_rule.block.clone();
|
||||
|
||||
n.visit_mut_children_with(self);
|
||||
at_rule.visit_mut_children_with(self);
|
||||
|
||||
match &n.name {
|
||||
match &at_rule.name {
|
||||
AtRuleName::Ident(Ident { value, .. })
|
||||
if value.as_ref().eq_ignore_ascii_case("viewport") =>
|
||||
{
|
||||
@ -615,7 +621,7 @@ impl VisitMut for Prefixer {
|
||||
value: "-ms-viewport".into(),
|
||||
raw: None,
|
||||
}),
|
||||
prelude: n.prelude.clone(),
|
||||
prelude: at_rule.prelude.clone(),
|
||||
block: original_simple_block.clone(),
|
||||
},
|
||||
);
|
||||
@ -631,7 +637,7 @@ impl VisitMut for Prefixer {
|
||||
value: "-o-viewport".into(),
|
||||
raw: None,
|
||||
}),
|
||||
prelude: n.prelude.clone(),
|
||||
prelude: at_rule.prelude.clone(),
|
||||
block: original_simple_block,
|
||||
},
|
||||
);
|
||||
@ -650,7 +656,7 @@ impl VisitMut for Prefixer {
|
||||
value: "-webkit-keyframes".into(),
|
||||
raw: None,
|
||||
}),
|
||||
prelude: n.prelude.clone(),
|
||||
prelude: at_rule.prelude.clone(),
|
||||
block: original_simple_block.clone(),
|
||||
},
|
||||
);
|
||||
@ -666,7 +672,7 @@ impl VisitMut for Prefixer {
|
||||
value: "-moz-keyframes".into(),
|
||||
raw: None,
|
||||
}),
|
||||
prelude: n.prelude.clone(),
|
||||
prelude: at_rule.prelude.clone(),
|
||||
block: original_simple_block.clone(),
|
||||
},
|
||||
);
|
||||
@ -682,7 +688,7 @@ impl VisitMut for Prefixer {
|
||||
value: "-o-keyframes".into(),
|
||||
raw: None,
|
||||
}),
|
||||
prelude: n.prelude.clone(),
|
||||
prelude: at_rule.prelude.clone(),
|
||||
block: original_simple_block,
|
||||
},
|
||||
);
|
||||
@ -695,7 +701,7 @@ impl VisitMut for Prefixer {
|
||||
fn visit_mut_media_query_list(&mut self, media_query_list: &mut MediaQueryList) {
|
||||
media_query_list.visit_mut_children_with(self);
|
||||
|
||||
let mut new = Vec::with_capacity(media_query_list.queries.len());
|
||||
let mut new_queries = Vec::with_capacity(media_query_list.queries.len());
|
||||
|
||||
for n in take(&mut media_query_list.queries) {
|
||||
// TODO avoid duplicates
|
||||
@ -713,8 +719,8 @@ impl VisitMut for Prefixer {
|
||||
"-webkit-max-device-pixel-ratio",
|
||||
);
|
||||
|
||||
if !n.eq_ignore_span(&new_webkit_value) {
|
||||
new.push(new_webkit_value);
|
||||
if n != new_webkit_value {
|
||||
new_queries.push(new_webkit_value);
|
||||
}
|
||||
}
|
||||
|
||||
@ -732,17 +738,17 @@ impl VisitMut for Prefixer {
|
||||
"max--moz-device-pixel-ratio",
|
||||
);
|
||||
|
||||
if !n.eq_ignore_span(&new_moz_value) {
|
||||
new.push(new_moz_value);
|
||||
if n != new_moz_value {
|
||||
new_queries.push(new_moz_value);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO opera support
|
||||
|
||||
new.push(n);
|
||||
new_queries.push(n);
|
||||
}
|
||||
|
||||
media_query_list.queries = new;
|
||||
media_query_list.queries = new_queries;
|
||||
}
|
||||
|
||||
fn visit_mut_qualified_rule(&mut self, n: &mut QualifiedRule) {
|
||||
@ -1139,100 +1145,150 @@ impl VisitMut for Prefixer {
|
||||
let mut webkit_value = n.value.clone();
|
||||
|
||||
if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() {
|
||||
replace_function_name(&mut webkit_value, "filter", "-webkit-filter");
|
||||
replace_image_set_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"image-set",
|
||||
"-webkit-image-set",
|
||||
);
|
||||
replace_function_name(&mut webkit_value, "calc", "-webkit-calc");
|
||||
replace_cross_fade_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"cross-fade",
|
||||
"-webkit-cross-fade",
|
||||
);
|
||||
if should_prefix("-webkit-filter()", self.env, false) {
|
||||
replace_function_name(&mut webkit_value, "filter", "-webkit-filter");
|
||||
}
|
||||
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"linear-gradient",
|
||||
"-webkit-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"repeating-linear-gradient",
|
||||
"-webkit-repeating-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"radial-gradient",
|
||||
"-webkit-radial-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"repeating-radial-gradient",
|
||||
"-webkit-repeating-radial-gradient",
|
||||
);
|
||||
if should_prefix("-webkit-image-set()", self.env, false) {
|
||||
replace_image_set_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"image-set",
|
||||
"-webkit-image-set",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-webkit-calc()", self.env, false) {
|
||||
replace_function_name(&mut webkit_value, "calc", "-webkit-calc");
|
||||
}
|
||||
|
||||
if should_prefix("-webkit-cross-fade()", self.env, false) {
|
||||
replace_cross_fade_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"cross-fade",
|
||||
"-webkit-cross-fade",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-webkit-linear-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"linear-gradient",
|
||||
"-webkit-linear-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-webkit-repeating-linear-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"repeating-linear-gradient",
|
||||
"-webkit-repeating-linear-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-webkit-radial-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"radial-gradient",
|
||||
"-webkit-radial-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-webkit-repeating-radial-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut webkit_value,
|
||||
"repeating-radial-gradient",
|
||||
"-webkit-repeating-radial-gradient",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let mut moz_value = n.value.clone();
|
||||
|
||||
if self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none() {
|
||||
replace_function_name(&mut moz_value, "element", "-moz-element");
|
||||
replace_function_name(&mut moz_value, "calc", "-moz-calc");
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"linear-gradient",
|
||||
"-moz-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"repeating-linear-gradient",
|
||||
"-moz-repeating-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"radial-gradient",
|
||||
"-moz-radial-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"repeating-radial-gradient",
|
||||
"-moz-repeating-linear-gradient",
|
||||
);
|
||||
if should_prefix("-moz-element()", self.env, false) {
|
||||
replace_function_name(&mut moz_value, "element", "-moz-element");
|
||||
}
|
||||
|
||||
if should_prefix("-moz-calc()", self.env, false) {
|
||||
replace_function_name(&mut moz_value, "calc", "-moz-calc");
|
||||
}
|
||||
|
||||
if should_prefix("-moz-linear-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"linear-gradient",
|
||||
"-moz-linear-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-moz-repeating-linear-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"repeating-linear-gradient",
|
||||
"-moz-repeating-linear-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-moz-radial-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"radial-gradient",
|
||||
"-moz-radial-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-moz-repeating-radial-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut moz_value,
|
||||
"repeating-radial-gradient",
|
||||
"-moz-repeating-radial-gradient",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let mut o_value = n.value.clone();
|
||||
|
||||
if self.rule_prefix == Some(Prefix::O) || self.rule_prefix.is_none() {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"linear-gradient",
|
||||
"-o-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"repeating-linear-gradient",
|
||||
"-o-repeating-linear-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"radial-gradient",
|
||||
"-o-radial-gradient",
|
||||
);
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"repeating-radial-gradient",
|
||||
"-o-repeating-radial-gradient",
|
||||
);
|
||||
if should_prefix("-o-repeating-linear-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"linear-gradient",
|
||||
"-o-linear-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-o-repeating-linear-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"repeating-linear-gradient",
|
||||
"-o-repeating-linear-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-o-radial-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"radial-gradient",
|
||||
"-o-radial-gradient",
|
||||
);
|
||||
}
|
||||
|
||||
if should_prefix("-o-repeating-radial-gradient()", self.env, false) {
|
||||
replace_gradient_function_on_legacy_variant(
|
||||
&mut o_value,
|
||||
"repeating-radial-gradient",
|
||||
"-o-repeating-radial-gradient",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let mut ms_value = n.value.clone();
|
||||
|
||||
// TODO lazy
|
||||
let mut declarations = vec![];
|
||||
let declarations = Lazy::new(|| {
|
||||
let simple_block = self.simple_block.as_ref().unwrap();
|
||||
let mut declarations = Vec::with_capacity(simple_block.value.len());
|
||||
|
||||
if let Some(SimpleBlock { value, .. }) = &self.simple_block {
|
||||
for n in value.iter() {
|
||||
for n in simple_block.value.iter() {
|
||||
match n {
|
||||
ComponentValue::DeclarationOrAtRule(DeclarationOrAtRule::Declaration(
|
||||
declaration,
|
||||
@ -1243,30 +1299,21 @@ impl VisitMut for Prefixer {
|
||||
_ => {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO lazy
|
||||
let property_names: Vec<&str> = declarations
|
||||
.iter()
|
||||
.filter(|declaration| {
|
||||
!matches!(
|
||||
declaration,
|
||||
Declaration {
|
||||
name: DeclarationName::DashedIdent(_),
|
||||
..
|
||||
}
|
||||
)
|
||||
})
|
||||
.map(|declaration| match declaration {
|
||||
Declaration {
|
||||
name: DeclarationName::Ident(ident),
|
||||
..
|
||||
} => &*ident.value,
|
||||
_ => {
|
||||
unreachable!();
|
||||
declarations
|
||||
});
|
||||
|
||||
let properties = Lazy::new(|| {
|
||||
let mut properties: AHashSet<&str> = AHashSet::default();
|
||||
|
||||
for declaration in declarations.iter() {
|
||||
if let DeclarationName::Ident(ident) = &declaration.name {
|
||||
properties.insert(&ident.value);
|
||||
}
|
||||
})
|
||||
.collect();
|
||||
}
|
||||
|
||||
properties
|
||||
});
|
||||
|
||||
// TODO avoid insert moz/etc prefixes for `appearance: -webkit-button;`
|
||||
// TODO avoid duplication insert
|
||||
@ -1277,7 +1324,7 @@ impl VisitMut for Prefixer {
|
||||
// don't use `-moz` prefix for properties in `@-webkit-keyframes` at-rule
|
||||
if self.rule_prefix == Some($prefix) || self.rule_prefix.is_none() {
|
||||
// Check we don't have prefixed property
|
||||
if !property_names.contains(&$property) {
|
||||
if !properties.contains(&$property) {
|
||||
let name = DeclarationName::Ident(Ident {
|
||||
span: DUMMY_SP,
|
||||
value: $property.into(),
|
||||
@ -2294,7 +2341,7 @@ impl VisitMut for Prefixer {
|
||||
}
|
||||
|
||||
"writing-mode" if n.value.len() == 1 => {
|
||||
let direction = match declarations.into_iter().rev().find(|declaration| {
|
||||
let direction = match declarations.iter().rev().find(|declaration| {
|
||||
matches!(declaration, Declaration {
|
||||
name: DeclarationName::Ident(Ident { value, .. }),
|
||||
..
|
||||
|
||||
@ -3,10 +3,8 @@ div {
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
div {
|
||||
background: -webkit-filter(url('image.jpg'), blur(2px));
|
||||
background: filter(url('image.jpg'), blur(2px));
|
||||
}
|
||||
div {
|
||||
background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
|
||||
background: url(image.jpg), filter(url('image.jpg'), blur(2px));
|
||||
}
|
||||
|
||||
@ -10,14 +10,11 @@
|
||||
background-image: image-set(url(foo.jpg) 2x);
|
||||
}
|
||||
.class {
|
||||
background: -webkit-filter(url('image.jpg'), blur(2px));
|
||||
background: filter(url('image.jpg'), blur(2px));
|
||||
}
|
||||
.class {
|
||||
background: -webkit-filter(url('image.jpg'), blur(2px));
|
||||
background: filter(url('image.jpg'), blur(2px));
|
||||
}
|
||||
.class {
|
||||
background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
|
||||
background: url(image.jpg), filter(url('image.jpg'), blur(2px));
|
||||
}
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
.class {
|
||||
border-image: -webkit-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
border-image: -moz-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
border-image: -o-linear-gradient(black, white) 20% fill stretch stretch;
|
||||
border-image: linear-gradient(black, white) 20% fill stretch stretch;
|
||||
}
|
||||
|
||||
@ -1,15 +1,9 @@
|
||||
.class {
|
||||
width: -webkit-calc(20px + 40px);
|
||||
width: -moz-calc(20px + 40px);
|
||||
width: calc(20px + 40px);
|
||||
}
|
||||
.class {
|
||||
margin: -webkit-calc(5% + 5px) -webkit-calc(10% + 10px);
|
||||
margin: -moz-calc(5% + 5px) -moz-calc(10% + 10px);
|
||||
margin: calc(5% + 5px) calc(10% + 10px);
|
||||
}
|
||||
div {
|
||||
background-size: -webkit-calc(20px);
|
||||
background-size: -moz-calc(20px);
|
||||
background-size: calc(20px);
|
||||
}
|
||||
|
||||
@ -19,9 +19,7 @@ h3 {
|
||||
background-image: cross-fade(.59 url(foo.png), url(bar.png));
|
||||
}
|
||||
.foo {
|
||||
background-image: -webkit-cross-fade(-webkit-linear-gradient(white, black), -webkit-radial-gradient(circle closest-corner, white, black), 0.59);
|
||||
background-image: cross-fade(.59 -moz-linear-gradient(white, black), -moz-radial-gradient(circle closest-corner, white, black));
|
||||
background-image: cross-fade(.59 -o-linear-gradient(white, black), -o-radial-gradient(circle closest-corner, white, black));
|
||||
background-image: -webkit-cross-fade(linear-gradient(white, black), radial-gradient(circle closest-corner, white, black), 0.59);
|
||||
background-image: cross-fade(.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
|
||||
}
|
||||
.class {
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
@font-face {}
|
||||
@-webkit-keyframes anim {}
|
||||
@font-face {}
|
||||
@keyframes anim {}
|
||||
@font-face {}
|
||||
@font-face {}
|
||||
@-webkit-keyframes anim {
|
||||
0% {
|
||||
color: red
|
||||
}
|
||||
}
|
||||
@font-face {}
|
||||
@keyframes anim {
|
||||
0% {
|
||||
color: red
|
||||
}
|
||||
}
|
||||
@font-face {}
|
||||
@ -0,0 +1,30 @@
|
||||
@font-face{}
|
||||
@-webkit-keyframes anim {}
|
||||
@font-face{}
|
||||
@-moz-keyframes anim {}
|
||||
@-o-keyframes anim {}
|
||||
@keyframes anim {}
|
||||
@font-face{}
|
||||
@font-face{}
|
||||
@-webkit-keyframes anim {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@font-face{}
|
||||
@-moz-keyframes anim {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@-o-keyframes anim {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@keyframes anim {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@font-face{}
|
||||
@ -0,0 +1,18 @@
|
||||
@font-face{}
|
||||
@-webkit-keyframes anim {}
|
||||
@font-face{}
|
||||
@keyframes anim {}
|
||||
@font-face{}
|
||||
@font-face{}
|
||||
@-webkit-keyframes anim {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@font-face{}
|
||||
@keyframes anim {
|
||||
0% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@font-face{}
|
||||
@ -0,0 +1,2 @@
|
||||
@-webkit-keyframes anim {}
|
||||
@keyframes anim {}
|
||||
@ -0,0 +1,4 @@
|
||||
@-webkit-keyframes anim {}
|
||||
@-moz-keyframes anim {}
|
||||
@-o-keyframes anim {}
|
||||
@keyframes anim {}
|
||||
@ -0,0 +1,2 @@
|
||||
@-webkit-keyframes anim {}
|
||||
@keyframes anim {}
|
||||
@ -0,0 +1,2 @@
|
||||
@keyframes anim {}
|
||||
@-webkit-keyframes anim {}
|
||||
@ -0,0 +1,4 @@
|
||||
@-moz-keyframes anim {}
|
||||
@-o-keyframes anim {}
|
||||
@keyframes anim {}
|
||||
@-webkit-keyframes anim {}
|
||||
@ -0,0 +1,2 @@
|
||||
@keyframes anim {}
|
||||
@-webkit-keyframes anim {}
|
||||
@ -91,8 +91,6 @@ a {
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex: -webkit-calc(1em + 1px) 0 0;
|
||||
flex: -moz-calc(1em + 1px) 0 0;
|
||||
flex: calc(1em + 1px) 0 0;
|
||||
}
|
||||
.h {
|
||||
|
||||
@ -18,7 +18,7 @@ strong {
|
||||
}
|
||||
div {
|
||||
background-image: -webkit-radial-gradient(right, white, black), -webkit-repeating-linear-gradient(top left, black, white), -webkit-repeating-radial-gradient(bottom, aqua, red);
|
||||
background-image: -moz-radial-gradient(right, white, black), -moz-repeating-linear-gradient(top left, black, white), -moz-repeating-linear-gradient(bottom, aqua, red);
|
||||
background-image: -moz-radial-gradient(right, white, black), -moz-repeating-linear-gradient(top left, black, white), -moz-repeating-radial-gradient(bottom, aqua, red);
|
||||
background-image: -o-radial-gradient(right, white, black), -o-repeating-linear-gradient(top left, black, white), -o-repeating-radial-gradient(bottom, aqua, red);
|
||||
background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red);
|
||||
}
|
||||
|
||||
@ -1,231 +1,111 @@
|
||||
a {
|
||||
background: -webkit-linear-gradient(99.5deg, white, black), -webkit-linear-gradient(220deg, black, white), -webkit-linear-gradient(45deg, black, white);
|
||||
background: -moz-linear-gradient(99.5deg, white, black), -moz-linear-gradient(220deg, black, white), -moz-linear-gradient(45deg, black, white);
|
||||
background: -o-linear-gradient(99.5deg, white, black), -o-linear-gradient(220deg, black, white), -o-linear-gradient(45deg, black, white);
|
||||
background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
|
||||
}
|
||||
b {
|
||||
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 1), white), -webkit-linear-gradient(white, black);
|
||||
background-image: -moz-linear-gradient(rgba(0, 0, 0, 1), white), -moz-linear-gradient(white, black);
|
||||
background-image: -o-linear-gradient(rgba(0, 0, 0, 1), white), -o-linear-gradient(white, black);
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 1), white), linear-gradient(white, black);
|
||||
}
|
||||
strong {
|
||||
background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
}
|
||||
div {
|
||||
background-image: -webkit-radial-gradient(right, white, black), -webkit-repeating-linear-gradient(top left, black, white), -webkit-repeating-radial-gradient(bottom, aqua, red);
|
||||
background-image: -moz-radial-gradient(right, white, black), -moz-repeating-linear-gradient(top left, black, white), -moz-repeating-linear-gradient(bottom, aqua, red);
|
||||
background-image: -o-radial-gradient(right, white, black), -o-repeating-linear-gradient(top left, black, white), -o-repeating-radial-gradient(bottom, aqua, red);
|
||||
background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red);
|
||||
}
|
||||
.old-radial {
|
||||
background: -webkit-radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
background: -moz-radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
background: -o-radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
background: radial-gradient(0 50%, ellipse farthest-corner, black, white);
|
||||
}
|
||||
.simple1 {
|
||||
background: -webkit-linear-gradient(black, white);
|
||||
background: -moz-linear-gradient(black, white);
|
||||
background: -o-linear-gradient(black, white);
|
||||
background: linear-gradient(black, white);
|
||||
}
|
||||
.simple2 {
|
||||
background: -webkit-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
background: -moz-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
background: -o-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5) 50%, white 100%);
|
||||
}
|
||||
.simple3 {
|
||||
background: -webkit-linear-gradient(right, black 50%, white 100%);
|
||||
background: -moz-linear-gradient(right, black 50%, white 100%);
|
||||
background: -o-linear-gradient(right, black 50%, white 100%);
|
||||
background: linear-gradient(to left, black 50%, white 100%);
|
||||
}
|
||||
.simple4 {
|
||||
background: -webkit-linear-gradient(left bottom, black, white);
|
||||
background: -moz-linear-gradient(left bottom, black, white);
|
||||
background: -o-linear-gradient(left bottom, black, white);
|
||||
background: linear-gradient(to right top, black, white);
|
||||
}
|
||||
.direction {
|
||||
background: -webkit-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
background: -moz-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
background: -o-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
background: linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white);
|
||||
}
|
||||
.silent {
|
||||
background: -webkit-linear-gradient(top left, black, white);
|
||||
}
|
||||
.radial {
|
||||
background: -webkit-radial-gradient(0 50%, farthest-side, white, black);
|
||||
background: -moz-radial-gradient(0 50%, farthest-side, white, black);
|
||||
background: -o-radial-gradient(0 50%, farthest-side, white, black);
|
||||
background: radial-gradient(farthest-side at 0 50%, white, black);
|
||||
}
|
||||
.second {
|
||||
background: red -webkit-linear-gradient(red, blue);
|
||||
background: red -moz-linear-gradient(red, blue);
|
||||
background: red -o-linear-gradient(red, blue);
|
||||
background: red linear-gradient(red, blue);
|
||||
background: url('logo.png'), -webkit-linear-gradient(#fff, #000);
|
||||
background: url('logo.png'), -moz-linear-gradient(#fff, #000);
|
||||
background: url('logo.png'), -o-linear-gradient(#fff, #000);
|
||||
background: url('logo.png'), linear-gradient(#fff, #000);
|
||||
}
|
||||
.px {
|
||||
background: -webkit-linear-gradient(black 0, white 100px);
|
||||
background: -moz-linear-gradient(black 0, white 100px);
|
||||
background: -o-linear-gradient(black 0, white 100px);
|
||||
background: linear-gradient(black 0, white 100px);
|
||||
}
|
||||
.list {
|
||||
list-style-image: -webkit-linear-gradient(white, black);
|
||||
list-style-image: -moz-linear-gradient(white, black);
|
||||
list-style-image: -o-linear-gradient(white, black);
|
||||
list-style-image: linear-gradient(white, black);
|
||||
}
|
||||
.mask {
|
||||
-webkit-mask: -webkit-linear-gradient(white, black);
|
||||
mask: -webkit-linear-gradient(white, black);
|
||||
mask: -moz-linear-gradient(white, black);
|
||||
mask: -o-linear-gradient(white, black);
|
||||
-webkit-mask: linear-gradient(white, black);
|
||||
mask: linear-gradient(white, black);
|
||||
}
|
||||
.newline {
|
||||
background-image: -webkit-linear-gradient(white, black), -webkit-linear-gradient(black, white);
|
||||
background-image: -moz-linear-gradient(white, black), -moz-linear-gradient(black, white);
|
||||
background-image: -o-linear-gradient(white, black), -o-linear-gradient(black, white);
|
||||
background-image: linear-gradient(white, black), linear-gradient(black, white);
|
||||
}
|
||||
.convert {
|
||||
background: -webkit-linear-gradient(bottom, white, black);
|
||||
background: -moz-linear-gradient(bottom, white, black);
|
||||
background: -o-linear-gradient(bottom, white, black);
|
||||
background: linear-gradient(0deg, white, black);
|
||||
background: -webkit-linear-gradient(left, white, black);
|
||||
background: -moz-linear-gradient(left, white, black);
|
||||
background: -o-linear-gradient(left, white, black);
|
||||
background: linear-gradient(90deg, white, black);
|
||||
background: -webkit-linear-gradient(top, white, black);
|
||||
background: -moz-linear-gradient(top, white, black);
|
||||
background: -o-linear-gradient(top, white, black);
|
||||
background: linear-gradient(180deg, white, black);
|
||||
background: -webkit-linear-gradient(right, white, black);
|
||||
background: -moz-linear-gradient(right, white, black);
|
||||
background: -o-linear-gradient(right, white, black);
|
||||
background: linear-gradient(270deg, white, black);
|
||||
}
|
||||
.grad {
|
||||
background: -webkit-linear-gradient(89.1deg, white, black);
|
||||
background: -moz-linear-gradient(89.1deg, white, black);
|
||||
background: -o-linear-gradient(89.1deg, white, black);
|
||||
background: linear-gradient(1grad, white, black);
|
||||
}
|
||||
.rad {
|
||||
background: -webkit-linear-gradient(32.704deg, white, black);
|
||||
background: -moz-linear-gradient(32.704deg, white, black);
|
||||
background: -o-linear-gradient(32.704deg, white, black);
|
||||
background: linear-gradient(1rad, white, black);
|
||||
}
|
||||
.turn {
|
||||
background: -webkit-linear-gradient(342deg, white, black);
|
||||
background: -moz-linear-gradient(342deg, white, black);
|
||||
background: -o-linear-gradient(342deg, white, black);
|
||||
background: linear-gradient(0.3turn, white, black);
|
||||
}
|
||||
.norm {
|
||||
background: -webkit-linear-gradient(right, white, black);
|
||||
background: -moz-linear-gradient(right, white, black);
|
||||
background: -o-linear-gradient(right, white, black);
|
||||
background: linear-gradient(-90deg, white, black);
|
||||
}
|
||||
.mask {
|
||||
-webkit-mask-image: -webkit-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
mask-image: -webkit-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
mask-image: -moz-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
mask-image: -o-radial-gradient(86% 86%, circle, transparent 8px, black 8px);
|
||||
-webkit-mask-image: radial-gradient(circle at 86% 86%, transparent 8px, black 8px);
|
||||
mask-image: radial-gradient(circle at 86% 86%, transparent 8px, black 8px);
|
||||
}
|
||||
.cover {
|
||||
background: -webkit-radial-gradient(center, ellipse cover, white, black);
|
||||
background: -moz-radial-gradient(center, ellipse cover, white, black);
|
||||
background: -o-radial-gradient(center, ellipse cover, white, black);
|
||||
background: radial-gradient(ellipse cover at center, white, black);
|
||||
}
|
||||
.contain {
|
||||
background: -webkit-radial-gradient(center, contain, white, black);
|
||||
background: -moz-radial-gradient(center, contain, white, black);
|
||||
background: -o-radial-gradient(center, contain, white, black);
|
||||
background: radial-gradient(contain at center, white, black);
|
||||
}
|
||||
.no-div {
|
||||
background: -webkit-linear-gradient(black);
|
||||
background: -moz-linear-gradient(black);
|
||||
background: -o-linear-gradient(black);
|
||||
background: linear-gradient(black);
|
||||
}
|
||||
.background-shorthand {
|
||||
background: -webkit-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
background: -moz-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
background: -o-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
background: radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
|
||||
}
|
||||
.background-advanced {
|
||||
background: -webkit-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -webkit-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
background: -moz-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -moz-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
background: -o-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -o-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
|
||||
}
|
||||
.multiradial {
|
||||
-webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
mask-image: -moz-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
mask-image: -o-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
|
||||
-webkit-mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent);
|
||||
mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent);
|
||||
}
|
||||
.broken {
|
||||
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
||||
mask-image: -webkit-radial-gradient(white, black);
|
||||
mask-image: -moz-radial-gradient(white, black);
|
||||
mask-image: -o-radial-gradient(white, black);
|
||||
-webkit-mask-image: radial-gradient(white, black);
|
||||
mask-image: radial-gradient(white, black);
|
||||
}
|
||||
.loop {
|
||||
background-image: url("https://test.com/lol(test.png"), -webkit-radial-gradient(yellow, black, yellow);
|
||||
background-image: url("https://test.com/lol(test.png"), -moz-radial-gradient(yellow, black, yellow);
|
||||
background-image: url("https://test.com/lol(test.png"), -o-radial-gradient(yellow, black, yellow);
|
||||
background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
|
||||
}
|
||||
.more {
|
||||
background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat;
|
||||
background: -webkit-linear-gradient(56.667deg, white, black), -webkit-linear-gradient(220deg, black, white), -webkit-linear-gradient(45deg, black, white);
|
||||
background: -moz-linear-gradient(56.667deg, white, black), -moz-linear-gradient(220deg, black, white), -moz-linear-gradient(45deg, black, white);
|
||||
background: -o-linear-gradient(56.667deg, white, black), -o-linear-gradient(220deg, black, white), -o-linear-gradient(45deg, black, white);
|
||||
background: linear-gradient(33.333deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
|
||||
}
|
||||
.broken {
|
||||
background-image: -webkit-linear-gradient(to, red 50%);
|
||||
background-image: -moz-linear-gradient(to, red 50%);
|
||||
background-image: -o-linear-gradient(to, red 50%);
|
||||
background-image: linear-gradient(to, red 50%);
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
@keyframes anim {
|
||||
from {
|
||||
top: -webkit-calc(10% + 10px);
|
||||
top: -moz-calc(10% + 10px);
|
||||
top: calc(10% + 10px);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
@ -14,8 +12,6 @@
|
||||
display: flex;
|
||||
}
|
||||
to {
|
||||
top: -webkit-calc(10%);
|
||||
top: -moz-calc(10%);
|
||||
top: calc(10%);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
@ -7,10 +7,7 @@
|
||||
mask-image: none;
|
||||
}
|
||||
.class {
|
||||
-webkit-mask-image: -webkit-linear-gradient(#fff);
|
||||
mask-image: -webkit-linear-gradient(#fff);
|
||||
mask-image: -moz-linear-gradient(#fff);
|
||||
mask-image: -o-linear-gradient(#fff);
|
||||
-webkit-mask-image: linear-gradient(#fff);
|
||||
mask-image: linear-gradient(#fff);
|
||||
}
|
||||
.class {
|
||||
|
||||
@ -10,8 +10,6 @@ main {
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
max-width: -webkit-calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
max-width: -moz-calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
max-width: calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
}
|
||||
@media (max-width: __styled-jsx-placeholderpx) {
|
||||
|
||||
@ -120,7 +120,5 @@ div {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
div {
|
||||
transition: -webkit-calc(1s);
|
||||
transition: -moz-calc(1s);
|
||||
transition: calc(1s);
|
||||
}
|
||||
|
||||
@ -82,8 +82,6 @@ p {
|
||||
width: fill-available;
|
||||
}
|
||||
.ok {
|
||||
width: -webkit-calc(100% - var(--jqx-circular-progress-bar-fill-size));
|
||||
width: -moz-calc(100% - var(--jqx-circular-progress-bar-fill-size));
|
||||
width: calc(100% - var(--jqx-circular-progress-bar-fill-size));
|
||||
}
|
||||
.grid {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user