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
|
.parent {
color: green;
}
@document url-prefix() {
.parent .child {
color: red;
}
}
@supports (sandwitch: butter) {
.inside .top {
property: value;
}
}
@supports (sandwitch: bread) {
.in1 .in2 {
property: value;
}
}
@supports (sandwitch: ham) {
.inside .top {
property: value;
}
}
@supports (font-family: weirdFont) {
@font-face {
font-family: something;
src: made-up-url;
}
}
@font-face {
@supports not (-webkit-font-smoothing: subpixel-antialiased) {
font-family: something;
src: made-up-url;
}
}
@supports (property: value) {
@media (max-size: 2px) {
@supports (whatever: something) {
.outOfMedia {
property: value;
}
}
}
}
@supports (property: value) {
@media (max-size: 2px) {
@supports (whatever: something) {
.onTop {
property: value;
}
}
}
}
@media print {
html {
in-html: visible;
}
@supports (upper: test) {
html {
in-supports: first;
}
html div {
in-div: visible;
}
@supports not (-webkit-font-smoothing: subpixel-antialiased) {
html div {
in-supports: second;
}
@media screen {
html div {
font-weight: 400;
}
html div nested {
property: value;
}
}
}
}
}
@media print and (max-size: 2px) {
.in1 {
stay: here;
}
@supports not (-webkit-font-smoothing: subpixel-antialiased) {
@supports (whatever: something) {
.in2 .in1 {
property: value;
}
}
}
}
html {
font-weight: 300;
-webkit-font-smoothing: subpixel-antialiased;
}
@supports not (-webkit-font-smoothing: subpixel-antialiased) {
html {
font-weight: 400;
}
html nested {
property: value;
}
}
.onTop {
animation: "textscale";
font-family: something;
}
@font-face {
font-family: something;
src: made-up-url;
}
@keyframes "textscale" {
0% {
font-size: 1em;
}
100% {
font-size: 2em;
}
}
|
