diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1# Empty stylesheets
2
3/* Just a comment */
4
5==>
6
7StyleSheet(Comment)
8
9# Import statements
10
11@import url("fineprint.css") print;
12@import url("bluish.css") speech;
13@import 'custom.css';
14@import url("chrome://communicator/skin/");
15@import "common.css" screen;
16@import "reset.css" layer(framework.component);
17@import "components.css" layer screen;
18
19==>
20
21StyleSheet(
22 ImportStatement(import,CallLiteral(CallTag,StringLiteral),KeywordQuery),
23 ImportStatement(import,CallLiteral(CallTag,StringLiteral),KeywordQuery),
24 ImportStatement(import,StringLiteral),
25 ImportStatement(import,CallLiteral(CallTag,StringLiteral)),
26 ImportStatement(import,StringLiteral,KeywordQuery),
27 ImportStatement(import,StringLiteral,Layer(layer,LayerName,LayerName)),
28 ImportStatement(import,StringLiteral,Layer(layer),KeywordQuery))
29
30# Namespace statements
31
32/* Default namespace */
33@namespace url(XML-namespace-URL);
34@namespace "XML-namespace-URL";
35@namespace url(http://www.w3.org/1999/xhtml);
36@namespace svg url(http://www.w3.org/2000/svg);
37
38/* Prefixed namespace */
39@namespace prefix url(XML-namespace-URL);
40@namespace prefix "XML-namespace-URL";
41
42==>
43
44StyleSheet(
45 Comment,
46 NamespaceStatement(namespace,CallLiteral(CallTag,ParenthesizedContent)),
47 NamespaceStatement(namespace,StringLiteral),
48 NamespaceStatement(namespace,CallLiteral(CallTag,ParenthesizedContent)),
49 NamespaceStatement(namespace,NamespaceName,CallLiteral(CallTag,ParenthesizedContent)),
50 Comment,
51 NamespaceStatement(namespace,NamespaceName,CallLiteral(CallTag,ParenthesizedContent)),
52 NamespaceStatement(namespace,NamespaceName,StringLiteral))
53
54# Keyframes statements
55
56@keyframes important1 {
57 from { margin-top: 50px; }
58 50%, 60% { margin-top: 150px !important; } /* ignored */
59 to { margin-top: 100px; }
60}
61
62==>
63
64StyleSheet(KeyframesStatement(keyframes,KeyframeName,KeyframeList(
65 KeyframeSelector(KeyframeRangeName),Block(Declaration(PropertyName,NumberLiteral(Unit))),
66 KeyframeSelector(NumberLiteral(Unit)),KeyframeSelector(NumberLiteral(Unit)),Block(
67 Declaration(PropertyName,NumberLiteral(Unit),Important)),
68 Comment,
69 KeyframeSelector(KeyframeRangeName),Block(Declaration(PropertyName,NumberLiteral(Unit))))))
70
71# Keyframes statements with range
72
73@keyframes anim-1 {
74 entry 0% { margin-top: 50px; }
75 entry 100% { margin-top: 50px; }
76 exit 0% { margin-top: 50px; }
77 exit 100% { margin-top: 50px; }
78}
79
80==>
81
82StyleSheet(KeyframesStatement(keyframes,KeyframeName,KeyframeList(
83 KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),Block(Declaration(PropertyName,NumberLiteral(Unit))),
84 KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),Block(Declaration(PropertyName,NumberLiteral(Unit))),
85 KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),Block(Declaration(PropertyName,NumberLiteral(Unit))),
86 KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),Block(Declaration(PropertyName,NumberLiteral(Unit))))))
87
88# Keyframes statements with range and multiple keyframe selectors
89
90@keyframes fade-in-out-animation {
91 entry 0%, exit 100% { opacity: 0 }
92 entry 100%, exit 0% { opacity: 1 }
93}
94
95==>
96
97StyleSheet(KeyframesStatement(keyframes,KeyframeName,KeyframeList(
98 KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),Block(
99 Declaration(PropertyName,NumberLiteral)),
100 KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),KeyframeSelector(KeyframeRangeName,NumberLiteral(Unit)),Block(
101 Declaration(PropertyName,NumberLiteral)))))
102
103# Media statements
104
105@media screen and (min-width: 30em) and (orientation: landscape) {}
106@media (min-height: 680px), screen and (orientation: portrait) {}
107@media not all and (monochrome) {}
108@media only screen {}
109@media (10em <= width < 30em) {}
110
111==>
112
113StyleSheet(
114 MediaStatement(media,BinaryQuery(BinaryQuery(KeywordQuery,LogicOp,FeatureQuery(FeatureName,NumberLiteral(Unit))),LogicOp,
115 FeatureQuery(FeatureName,ValueName)),Block),
116 MediaStatement(media,FeatureQuery(FeatureName,NumberLiteral(Unit)),BinaryQuery(KeywordQuery,LogicOp,FeatureQuery(FeatureName,ValueName)),Block),
117 MediaStatement(media,UnaryQuery(UnaryQueryOp,BinaryQuery(KeywordQuery,LogicOp,ParenthesizedQuery(KeywordQuery))),Block),
118 MediaStatement(media,UnaryQuery(UnaryQueryOp,KeywordQuery),Block),
119 MediaStatement(media,ComparisonQuery(NumberLiteral(Unit),CompareOp,FeatureName,CompareOp,NumberLiteral(Unit)),Block))
120
121# Supports statements
122
123@supports (animation-name: test) {
124 div { animation-name: test; }
125}
126@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
127@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
128@supports not selector(:matches(a, b)) {}
129
130==>
131
132StyleSheet(
133 SupportsStatement(supports,FeatureQuery(FeatureName,ValueName),Block(RuleSet(TagSelector(TagName),Block(Declaration(PropertyName,ValueName))))),
134 SupportsStatement(supports,BinaryQuery(FeatureQuery(FeatureName,ValueName),LogicOp,FeatureQuery(FeatureName,ValueName)),Block),
135 SupportsStatement(supports,UnaryQuery(UnaryQueryOp,ParenthesizedQuery(
136 BinaryQuery(FeatureQuery(FeatureName,ValueName),LogicOp,FeatureQuery(FeatureName,ValueName)))),Block),
137 SupportsStatement(supports,UnaryQuery(UnaryQueryOp,SelectorQuery(selector,ParenthesizedSelector(PseudoClassSelector(PseudoClassName,ArgList(TagSelector(TagName),TagSelector(TagName)))))),Block))
138
139# Charset statements
140
141@charset "utf-8";
142
143==>
144
145StyleSheet(CharsetStatement(charset,StringLiteral))
146
147# Other at-statements
148
149@font-face {
150 font-family: "Open Sans";
151 src: url("/a") format("woff2"), url("/b/c") format("woff");
152}
153
154==>
155
156StyleSheet(AtRule(AtKeyword,Block(
157 Declaration(PropertyName,StringLiteral),
158 Declaration(PropertyName,CallLiteral(CallTag,StringLiteral),CallExpression(Callee,ArgList(StringLiteral)),
159 CallLiteral(CallTag,StringLiteral),CallExpression(Callee,ArgList(StringLiteral))))))
160
161# Unterminated Comment
162
163p {}
164/*
165div {}
166
167==>
168
169StyleSheet(RuleSet(TagSelector(TagName),Block),Comment)
170
171# Escaped identifiers
172
173#foo\ bar {
174 --weird\\var: 5px;
175 width: var(--weird\\var);
176 c\6f lor: b\6c ue;
177}
178==>
179
180StyleSheet(RuleSet(IdSelector(IdName),Block(
181 Declaration(VariableName,NumberLiteral(Unit)),
182 Declaration(PropertyName,CallExpression(Callee,ArgList(VariableName))),
183 Declaration(PropertyName, ValueName))))
184
185# Scope
186
187@scope { .x {} }
188@scope (div) {}
189@scope (.a) to (.b) {}
190
191==>
192
193StyleSheet(
194 ScopeStatement(scope,Block(RuleSet(ClassSelector(ClassName),Block))),
195 ScopeStatement(scope,ParenthesizedSelector(TagSelector(TagName)),Block),
196 ScopeStatement(scope,ParenthesizedSelector(ClassSelector(ClassName)),to,ParenthesizedSelector(ClassSelector(ClassName)),Block))
197
198# If Expressions
199
200p {
201 background-color: if(
202 style(--color: white): black;
203 supports(foo: bar): red;
204 else: pink
205 );
206}
207
208==>
209
210StyleSheet(RuleSet(TagSelector(TagName),Block(
211 Declaration(PropertyName,IfExpression(if,ArgList(
212 IfBranch(CallQuery(QueryCallee,ArgList(FeatureName,ValueName)),ValueName),
213 IfBranch(CallQuery(QueryCallee,ArgList(FeatureName,ValueName)),ValueName),
214 IfBranch(KeywordQuery,ValueName)))))))
215
216# Nested Pseudo-Class
217
218div {
219 dialog:hover {
220 color: red;
221 }
222}
223
224==>
225
226StyleSheet(RuleSet(TagSelector(TagName),Block(RuleSet(PseudoClassSelector(TagSelector(TagName),PseudoClassName),Block(
227 Declaration(PropertyName,ValueName))))))