mirror of
https://github.com/swc-project/swc.git
synced 2024-11-28 02:29:04 +03:00
fix(css/prefixer): Reduce duplicates (#5537)
This commit is contained in:
Alexander Akait
GitHub
parent
a9aadbe800
commit
0985c1546b
@ -482,9 +482,9 @@ impl VisitMut for MediaFeatureResolutionReplacerOnLegacyVariant<'_> {
|
||||
n.visit_mut_children_with(self);
|
||||
|
||||
if let MediaFeatureValue::Dimension(Dimension::Resolution(Resolution {
|
||||
span: resolution_span,
|
||||
value: resolution_value,
|
||||
unit: resolution_unit,
|
||||
..
|
||||
})) = &n.value
|
||||
{
|
||||
let MediaFeatureName::Ident(Ident {
|
||||
@ -506,14 +506,10 @@ impl VisitMut for MediaFeatureResolutionReplacerOnLegacyVariant<'_> {
|
||||
_ => resolution_value.value,
|
||||
};
|
||||
|
||||
n.value = MediaFeatureValue::Ratio(Ratio {
|
||||
span: *resolution_span,
|
||||
left: Number {
|
||||
n.value = MediaFeatureValue::Number(Number {
|
||||
span: resolution_value.span,
|
||||
value: left,
|
||||
raw: None,
|
||||
},
|
||||
right: None,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -572,13 +568,12 @@ impl Prefixer {
|
||||
impl VisitMut for Prefixer {
|
||||
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 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
|
||||
let need_skip = new_rules
|
||||
.iter()
|
||||
.any(|existing_rule| added_rule.1.eq_ignore_span(existing_rule));
|
||||
|
||||
@ -603,7 +598,6 @@ impl VisitMut for Prefixer {
|
||||
stylesheet.rules = new_rules;
|
||||
}
|
||||
|
||||
// TODO `@import` test
|
||||
// TODO `selector()` supports
|
||||
fn visit_mut_at_rule(&mut self, at_rule: &mut AtRule) {
|
||||
let original_simple_block = at_rule.block.clone();
|
||||
@ -611,16 +605,16 @@ impl VisitMut for Prefixer {
|
||||
at_rule.visit_mut_children_with(self);
|
||||
|
||||
match &at_rule.name {
|
||||
AtRuleName::Ident(Ident { value, .. })
|
||||
AtRuleName::Ident(Ident { span, value, .. })
|
||||
if value.as_ref().eq_ignore_ascii_case("viewport") =>
|
||||
{
|
||||
if should_prefix("@-o-viewport", self.env, false) {
|
||||
self.add_at_rule(
|
||||
Prefix::Ms,
|
||||
&AtRule {
|
||||
span: DUMMY_SP,
|
||||
span: at_rule.span,
|
||||
name: AtRuleName::Ident(Ident {
|
||||
span: DUMMY_SP,
|
||||
span: *span,
|
||||
value: "-ms-viewport".into(),
|
||||
raw: None,
|
||||
}),
|
||||
@ -634,9 +628,9 @@ impl VisitMut for Prefixer {
|
||||
self.add_at_rule(
|
||||
Prefix::O,
|
||||
&AtRule {
|
||||
span: DUMMY_SP,
|
||||
span: at_rule.span,
|
||||
name: AtRuleName::Ident(Ident {
|
||||
span: DUMMY_SP,
|
||||
span: *span,
|
||||
value: "-o-viewport".into(),
|
||||
raw: None,
|
||||
}),
|
||||
@ -646,16 +640,16 @@ impl VisitMut for Prefixer {
|
||||
);
|
||||
}
|
||||
}
|
||||
AtRuleName::Ident(Ident { value, .. })
|
||||
AtRuleName::Ident(Ident { span, value, .. })
|
||||
if value.as_ref().eq_ignore_ascii_case("keyframes") =>
|
||||
{
|
||||
if should_prefix("@-webkit-keyframes", self.env, false) {
|
||||
self.add_at_rule(
|
||||
Prefix::Webkit,
|
||||
&AtRule {
|
||||
span: DUMMY_SP,
|
||||
span: at_rule.span,
|
||||
name: AtRuleName::Ident(Ident {
|
||||
span: DUMMY_SP,
|
||||
span: *span,
|
||||
value: "-webkit-keyframes".into(),
|
||||
raw: None,
|
||||
}),
|
||||
@ -669,9 +663,9 @@ impl VisitMut for Prefixer {
|
||||
self.add_at_rule(
|
||||
Prefix::Moz,
|
||||
&AtRule {
|
||||
span: DUMMY_SP,
|
||||
span: at_rule.span,
|
||||
name: AtRuleName::Ident(Ident {
|
||||
span: DUMMY_SP,
|
||||
span: *span,
|
||||
value: "-moz-keyframes".into(),
|
||||
raw: None,
|
||||
}),
|
||||
@ -685,7 +679,7 @@ impl VisitMut for Prefixer {
|
||||
self.add_at_rule(
|
||||
Prefix::O,
|
||||
&AtRule {
|
||||
span: DUMMY_SP,
|
||||
span: at_rule.span,
|
||||
name: AtRuleName::Ident(Ident {
|
||||
span: DUMMY_SP,
|
||||
value: "-o-keyframes".into(),
|
||||
@ -701,6 +695,41 @@ impl VisitMut for Prefixer {
|
||||
}
|
||||
}
|
||||
|
||||
fn visit_mut_import_prelude(&mut self, import_prelude: &mut ImportPrelude) {
|
||||
import_prelude.visit_mut_children_with(self);
|
||||
|
||||
if !self.added_declarations.is_empty() {
|
||||
if let Some(ImportPreludeSupportsType::Declaration(declaration)) =
|
||||
import_prelude.supports.take()
|
||||
{
|
||||
let span = declaration.span;
|
||||
let mut conditions = Vec::with_capacity(1 + self.added_declarations.len());
|
||||
|
||||
conditions.push(SupportsConditionType::SupportsInParens(
|
||||
SupportsInParens::Feature(SupportsFeature::Declaration(declaration)),
|
||||
));
|
||||
|
||||
for n in take(&mut self.added_declarations) {
|
||||
let supports_condition_type = SupportsConditionType::Or(SupportsOr {
|
||||
span: DUMMY_SP,
|
||||
keyword: Ident {
|
||||
span: DUMMY_SP,
|
||||
value: js_word!("or"),
|
||||
raw: None,
|
||||
},
|
||||
condition: SupportsInParens::Feature(SupportsFeature::Declaration(n)),
|
||||
});
|
||||
|
||||
conditions.push(supports_condition_type);
|
||||
}
|
||||
|
||||
import_prelude.supports = Some(ImportPreludeSupportsType::SupportsCondition(
|
||||
SupportsCondition { span, conditions },
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn visit_mut_supports_condition(&mut self, supports_condition: &mut SupportsCondition) {
|
||||
let old_supports_condition = self.supports_condition.take();
|
||||
|
||||
@ -765,54 +794,59 @@ 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_queries = Vec::with_capacity(media_query_list.queries.len());
|
||||
let mut new_queries = vec![];
|
||||
|
||||
for n in take(&mut media_query_list.queries) {
|
||||
// TODO avoid duplicates
|
||||
for n in &media_query_list.queries {
|
||||
if should_prefix("-webkit-min-device-pixel-ratio", self.env, false) {
|
||||
let mut new_webkit_value = n.clone();
|
||||
let mut new_media_query = n.clone();
|
||||
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_webkit_value,
|
||||
&mut new_media_query,
|
||||
"min-resolution",
|
||||
"-webkit-min-device-pixel-ratio",
|
||||
);
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_webkit_value,
|
||||
&mut new_media_query,
|
||||
"max-resolution",
|
||||
"-webkit-max-device-pixel-ratio",
|
||||
);
|
||||
|
||||
if n != new_webkit_value {
|
||||
new_queries.push(new_webkit_value);
|
||||
let need_skip = media_query_list.queries.iter().any(|existing_media_query| {
|
||||
new_media_query.eq_ignore_span(existing_media_query)
|
||||
});
|
||||
|
||||
if !need_skip {
|
||||
new_queries.push(new_media_query);
|
||||
}
|
||||
}
|
||||
|
||||
if should_prefix("min--moz-device-pixel-ratio", self.env, false) {
|
||||
let mut new_moz_value = n.clone();
|
||||
let mut new_media_query = n.clone();
|
||||
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_moz_value,
|
||||
&mut new_media_query,
|
||||
"min-resolution",
|
||||
"min--moz-device-pixel-ratio",
|
||||
);
|
||||
replace_media_feature_resolution_on_legacy_variant(
|
||||
&mut new_moz_value,
|
||||
&mut new_media_query,
|
||||
"max-resolution",
|
||||
"max--moz-device-pixel-ratio",
|
||||
);
|
||||
|
||||
if n != new_moz_value {
|
||||
new_queries.push(new_moz_value);
|
||||
let need_skip = media_query_list.queries.iter().any(|existing_media_query| {
|
||||
new_media_query.eq_ignore_span(existing_media_query)
|
||||
});
|
||||
|
||||
if !need_skip {
|
||||
new_queries.push(new_media_query);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO opera support
|
||||
|
||||
new_queries.push(n);
|
||||
}
|
||||
|
||||
media_query_list.queries = new_queries;
|
||||
media_query_list.queries.extend(new_queries);
|
||||
}
|
||||
|
||||
fn visit_mut_qualified_rule(&mut self, n: &mut QualifiedRule) {
|
||||
|
||||
@ -4,9 +4,6 @@ input:-webkit-autofill {
|
||||
input:autofill {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
input:AUTOFILL {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
|
||||
@ -4,9 +4,6 @@ input:-webkit-autofill {
|
||||
input:autofill {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
input:AUTOFILL {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@-webkit-keyframes anim {}
|
||||
@-moz-keyframes anim {}
|
||||
@-o-keyframes anim {}
|
||||
@keyframes anim {}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@import url('styles.css') screen and (min-resolution: 2dppx);
|
||||
@import url("styles.css") supports(display: flex) screen and (max-width: 400px);
|
||||
@import url("styles.css") supports(not (display: flex)) screen and (max-width: 400px);
|
||||
@import url('styles.css') supports(display: flex) screen and (min-resolution: 2dppx);
|
||||
|
||||
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
|
||||
.class {
|
||||
color: red;
|
||||
@ -88,3 +93,7 @@
|
||||
@media only screen and (min-resolution: 124.8dpi) { }
|
||||
|
||||
@media (min-resolution: 113.38dpcm) { }
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
|
||||
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
|
||||
@ -1,39 +1,43 @@
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
@import url('styles.css') screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
|
||||
@import url("styles.css") supports((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) screen and (max-width: 400px);
|
||||
@import url("styles.css") supports(not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) screen and (max-width: 400px);
|
||||
@import url('styles.css') supports((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
|
||||
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
|
||||
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
|
||||
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2x) {
|
||||
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
|
||||
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {
|
||||
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {
|
||||
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
@ -59,26 +63,28 @@
|
||||
.image {
|
||||
background-image: url(image@1x.png);
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
|
||||
.image {
|
||||
background-image: url(image@2x.png);
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 0.34), (min--moz-device-pixel-ratio: 0.34), (min-resolution: 33dpi) {
|
||||
@media (min-resolution: 33dpi), (-webkit-min-device-pixel-ratio: 0.34), (min--moz-device-pixel-ratio: 0.34) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0), (min-resolution: 0dpi) {
|
||||
@media (min-resolution: 0dpi), (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2x) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {}
|
||||
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
|
||||
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5), (min--moz-device-pixel-ratio: 2.5) {}
|
||||
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {}
|
||||
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
|
||||
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25) {}
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
|
||||
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3) {}
|
||||
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {}
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
|
||||
|
||||
@ -1,39 +1,43 @@
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
@import url('styles.css') screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
|
||||
@import url("styles.css") supports(display: flex) screen and (max-width: 400px);
|
||||
@import url("styles.css") supports(not (display: flex)) screen and (max-width: 400px);
|
||||
@import url('styles.css') supports(display: flex) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
|
||||
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
|
||||
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
|
||||
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) {
|
||||
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
|
||||
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {
|
||||
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {
|
||||
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
@ -47,26 +51,28 @@
|
||||
.image {
|
||||
background-image: url(image@1x.png);
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
|
||||
.image {
|
||||
background-image: url(image@2x.png);
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 0.34), (min-resolution: 33dpi) {
|
||||
@media (min-resolution: 33dpi), (-webkit-min-device-pixel-ratio: 0.34) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 0), (min-resolution: 0dpi) {
|
||||
@media (min-resolution: 0dpi), (-webkit-min-device-pixel-ratio: 0) {
|
||||
.class {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 113.38dpcm) {}
|
||||
@media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {}
|
||||
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {}
|
||||
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}
|
||||
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {}
|
||||
@media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25) {}
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {}
|
||||
@media only screen and (min-resolution: 124.8dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3) {}
|
||||
@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3) {}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
|
||||
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
|
||||
|
||||
@ -10,9 +10,6 @@
|
||||
::selection {
|
||||
color: red;
|
||||
}
|
||||
::-moz-selection {
|
||||
color: red;
|
||||
}
|
||||
::SeLeCtIoN {
|
||||
color: red;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user