Differential D14137 Diff 37912 autotests/html/highlight.css.html

Changeset View

Standalone View

View Options

autotests/html/highlight.css.html

1<!DOCTYPE html> 1​<!DOCTYPE html>
2<html><head> 2​<html><head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 3​<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4<title>highlight.css</title> 4​<title>highlight.css</title>
5<meta name="generator" content="KF5::SyntaxHighlighting (CSS)"/> 5​<meta name="generator" content="KF5::SyntaxHighlighting (CSS)"/>
6</head><body style="color:#1f1c1b"><pre> 6​</head><body style="color:#1f1c1b"><pre>
7<span style="color:#898887;">/**</span> 7​<span style="color:#898887;">/**</span>
8<span style="color:#898887;"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span> 8​<span style="color:#898887;"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span>
9<span style="color:#898887;"> */</span> 9​<span style="color:#898887;"> */</span>
10 10​
11<span style="color:#ff5500;">@import</span> url(<span style="color:#bf0303;">&quot;othersheet.css&quot;</span>) <span style="color:#b08000;">screen</span>, <span style="color:#b08000;">tv</span>; 11​<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;othersheet.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span>, tv;
12 12​
13body { 13​body {
14 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">15pt</span>; 14​ <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">pt</span>;
15 <span style="font-weight:bold;">font-family</span>: Verdana, Helvetica, <span style="color:#bf0303;">&quot;Bitstream Vera Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>; 15​ <span style="font-weight:bold;">font-family</span>: Verdana, Helvetica, <span style="color:#bf0303;">&quot;Bitstream Vera Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>;
16 <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">0px</span>; <span style="color:#898887;">/* yet another comment */</span> 16​ <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>; <span style="color:#898887;">/* yet another comment */</span>
17 <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">0px</span>; 17​ <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
18 // this is no comment, it's just broken! 18​ // this is no comment, it's just broken!
19 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0px</span>; 19​ <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
20 <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0px</span>; 20​ <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
21} 21​}
22 22​
23<span style="color:#644a9b;">.something</span> 23​<span style="color:#644a9b;">.something</span>
24{ 24​{
25 <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0px</span>; 25​ <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
26 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">#cdd</span>; 26​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#cdd</span>;
27 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">#AAFE04</span>; 27​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#AAFE04</span>;
28 <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgb</span>(<span style="color:#b08000;">10%</span>,<span style="color:#b08000;">30%</span>,<span style="color:#b08000;">43%</span>); 28​ <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">43</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>;
29 <span style="font-weight:bold;">background</span>: <span style="color:#b08000;">maroon</span>; 29​ <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">maroon</span>;
30} 30​}
31 31​
32a<span style="color:#b08000;font-style:italic;">:hover</span> { 32​a<span style="color:#b08000;font-style:italic;">:hover</span> {
33} 33​}
34 34​
35<span style="color:#006e28;font-weight:bold;">#header</span>, 35​<span style="color:#006e28;font-weight:bold;">#header</span>,
36p<span style="color:#644a9b;">.intro</span><span style="color:#b08000;font-style:italic;">:first-letter</span>, 36​p<span style="color:#644a9b;">.intro</span><span style="color:#b08000;font-style:italic;">:first-letter</span>,
37p<span style="color:#b08000;font-style:italic;">:lang(nl)</span>, 37​p<span style="color:#b08000;font-style:italic;">:lang(nl)</span>,
38img<span style="color:#0095ff;font-weight:bold;">[align=</span><span style="color:#bf0303;">&quot;right&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> 38​img<span style="color:#0095ff;font-weight:bold;">[align</span>=<span style="color:#bf0303;">&quot;right&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>
39{ 39​{
40 <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1px</span> <span style="color:#b08000;">solid</span> Qt::<span style="color:#b08000;">red</span> <span style="color:#0057ae;">!important</span>; 40​ <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> Qt::<span style="color:#aa5500;">red</span> <span style="color:#0057ae;">!important</span>;
41 <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#b08000;">15px</span>; <span style="color:#898887;">/* unknown properties render italic */</span> 41​ <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>; <span style="color:#898887;">/* unknown properties render italic */</span>
42} 42​}
43 43​
44<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 44​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
45 45​
46 <span style="color:#006e28;font-weight:bold;">#header</span> 46​ <span style="color:#006e28;font-weight:bold;">#header</span>
47 { 47​ {
48 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>; 48​ <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
49 } 49​ }
50 50​
51} 51​}
52 52​
53<span style="color:#898887;">/*</span> 53​<span style="color:#898887;">/*</span>
54<span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;">: add more tests, e.g. media</span> 54​<span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;">: add more tests, e.g. media</span>
55<span style="color:#898887;">*/</span> 55​<span style="color:#898887;">*/</span>
56​
57​
58​<span style="color:#644a9b;">.nice-look</span> {
59​ <span style="font-weight:bold;">font-variant-alternates</span>: styleset<span style="color:#644a9b;">(</span>nice-style<span style="color:#644a9b;">)</span>;
60​}
61​
62​ul {
63​ <span style="font-weight:bold;">list-style</span>: thumbs;
64​}
65​
66​<span style="color:#898887;">/* SVG &lt;a&gt; */</span>
67​svg|a {}
68​
69​<span style="color:#898887;">/* XHTML and SVG &lt;a&gt; */</span>
70​*|a {}
71​
72​*{}
73​<span style="color:#644a9b;">.class</span>{}
74​<span style="color:#006e28;font-weight:bold;">#id</span>{}
75​<span style="color:#b08000;font-style:italic;">:hover</span>{}
76​<span style="color:#b08000;font-style:italic;">:lang(fr)</span>{}
77​E{}
78​E F{}
79​E&gt;F{}
80​E &gt; F{}
81​E~F{}
82​E ~ F{}
83​E<span style="color:#b08000;font-style:italic;">:first-child</span>{}
84​E<span style="color:#b08000;font-style:italic;">:visited</span>{}
85​E<span style="color:#b08000;font-style:italic;">::after</span>{}
86​E<span style="color:#b08000;font-style:italic;">:lang(c)</span>{}
87​E<span style="color:#b08000;font-style:italic;">:lang(fr-ca)</span>{}
88​E + F{}
89​E+F{}
90​E<span style="color:#0095ff;font-weight:bold;">[foo]</span>{}
91​E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">warning</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
92​E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
93​E<span style="color:#0095ff;font-weight:bold;">[foo</span>~=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
94​E<span style="color:#0095ff;font-weight:bold;">[foo</span>^=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
95​E<span style="color:#0095ff;font-weight:bold;">[foo</span>$=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
96​E<span style="color:#0095ff;font-weight:bold;">[foo</span>*=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
97​E<span style="color:#0095ff;font-weight:bold;">[lang</span>|=<span style="color:#bf0303;">&quot;en&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
98​DIV<span style="color:#644a9b;">.warning</span>{}
99​DIV <span style="color:#644a9b;">.warning</span>{}
100​E<span style="color:#006e28;font-weight:bold;">#myid</span>{}
101​E <span style="color:#006e28;font-weight:bold;">#myid</span>{}
102​E,E{}
103​E, E{}
104​E ,E{}
105​E , E{}
106​
107​p<span style="color:#b08000;font-style:italic;">:nth-child(2)</span> {
108​ <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>;
109​}
110​
111​<span style="color:#898887;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
112​body <span style="color:#b08000;font-style:italic;">:not(</span>div<span style="color:#b08000;font-style:italic;">):not(</span>span<span style="color:#b08000;font-style:italic;">)</span> {
113​ <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
114​}
115​
116​<span style="color:#898887;">/* Elements that are not `.crazy` or `.fancy` */</span>
117​<span style="color:#898887;">/* Note that this syntax is not well supported yet. */</span>
118​body <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#644a9b;">.crazy</span>, <span style="color:#644a9b;">.fancy</span><span style="color:#b08000;font-style:italic;">)</span> {
119​ <span style="font-weight:bold;">font-family</span>: <span style="color:#b08000;">sans-serif</span>;
120​}
121​
122​<span style="color:#b08000;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
123​<span style="color:#b08000;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
124​<span style="color:#b08000;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
125​<span style="color:#b08000;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
126​<span style="color:#b08000;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
127​<span style="color:#b08000;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
128​<span style="color:#b08000;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
129​
130​<span style="color:#644a9b;">.first</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
131​<span style="color:#644a9b;">.second</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
132​<span style="color:#644a9b;">.third</span> span<span style="color:#b08000;font-style:italic;">:nth-of-type(2n+1)</span> {
133​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">lime</span>;
134​ unknown-property: <span style="color:#aa5500;">lime</span>;
135​}
136​
137​<span style="color:#b08000;font-style:italic;">:root</span>{
138​ <span style="color:#0057ae;">--foo</span>: if<span style="color:#644a9b;">(</span>x &gt; <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this<span style="color:#b08000;">.</span>width = <span style="color:#b08000;">10</span>; <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
139​}
140​
141​<span style="color:#b08000;font-style:italic;">:root</span>,
142​<span style="color:#b08000;font-style:italic;">:root:lang(en)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;external link&quot;</span>;}
143​<span style="color:#b08000;font-style:italic;">:root:lang(de)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;externer Link&quot;</span>;}
144​
145​a<span style="color:#0095ff;font-weight:bold;">[href</span>^=<span style="color:#bf0303;">&quot;http&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span><span style="color:#b08000;font-style:italic;">::after</span> {<span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot; (&quot;</span> <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--external-link</span><span style="color:#644a9b;">)</span> <span style="color:#bf0303;">&quot;)&quot;</span>}
146​
147​one { <span style="color:#0057ae;">--foo</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; }
148​two { <span style="color:#0057ae;">--bar</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--foo</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
149​three { <span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--bar</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
150​<span style="color:#644a9b;">.foo</span> {
151​ <span style="color:#0057ae;">--gap</span>: <span style="color:#b08000;">20</span>;
152​ <span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span>px; <span style="color:#898887;">/*20 px*/</span>
153​ <span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span> * <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/*20px*/</span>
154​}
155​
156​foo {
157​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
158​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%- <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
159​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">+8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
160​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%+ <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
161​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -var<span style="color:#644a9b;">(</span>--a<span style="color:#644a9b;">))</span>; <span style="color:#898887;">/* invalid */</span>
162​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>*<span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
163​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> - <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
164​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> + <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
165​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> +(<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>)<span style="color:#644a9b;">)</span>;
166​ <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -(<span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--a</span><span style="color:#644a9b;">)</span>)<span style="color:#644a9b;">)</span>;
167​}
168​
169​sweet-alert input<span style="color:#b08000;font-style:italic;">:focus::-moz-placeholder</span> {
170​ <span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
171​ <span style="font-weight:bold;">transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
172​ <span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.5</span>;
173​}
174​
175​
176​<span style="color:#ff5500;">@font-feature-values</span> Font One {
177​ <span style="color:#ff5500;">@styleset</span> {
178​ nice-style: <span style="color:#b08000;">12</span>;
179​ }
180​}
181​
182​<span style="color:#ff5500;">@font-feature-values</span> Font Two {
183​ <span style="color:#ff5500;">@styleset</span> {
184​ nice-style: <span style="color:#b08000;">4</span>;
185​ }
186​}
187​
188​<span style="color:#ff5500;">@counter-style</span> thumbs {
189​ system: cyclic;
190​ symbols: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">&quot;</span>;
191​ suffix: <span style="color:#bf0303;">&quot; &quot;</span>;
192​}
193​
194​<span style="color:#ff5500;">@font-face</span> {
195​ <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Open Sans&quot;</span>;
196​ <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>,
197​ <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff&quot;</span><span style="color:#644a9b;">)</span>;
198​}
199​
200​<span style="color:#ff5500;">@page</span> {
201​ <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">cm</span>;
202​}
203​
204​<span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:first</span> {
205​ <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
206​ <span style="color:#898887;">/* comments */</span>
207​ <span style="font-weight:bold;">marks</span>: <span style="color:#b08000;">crop</span> <span style="color:#b08000;">cross</span>;
208​}
209​
210​<span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:unknown</span> {
211​ <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
212​}
213​
214​<span style="color:#ff5500;">@font-face</span> {
215​ unknown: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>;
216​ <span style="color:#898887;">/* comments */</span>
217​ <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Bitstream Vera Serif Bold&quot;</span>;
218​ <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff&quot;</span><span style="color:#644a9b;">)</span>;
219​}
220​
221​<span style="color:#ff5500;">@viewport</span> {
222​ <span style="font-weight:bold;">zoom</span>: <span style="color:#b08000;">0.75</span>;
223​ <span style="color:#898887;">/* comments */</span>
224​ <span style="font-weight:bold;">min-zoom</span>: <span style="color:#b08000;">0.5</span>;
225​ <span style="font-weight:bold;">max-zoom</span>: <span style="color:#b08000;">0.9</span>;
226​}
227​
228​<span style="color:#ff5500;">@viewport</span> {
229​ <span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
230​ <span style="color:#898887;">/* comments */</span>
231​ <span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
232​}
233​
234​<span style="color:#ff5500;">@document</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;https://www.example.com/&quot;</span><span style="color:#644a9b;">)</span> {
235​ h1 {
236​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
237​ }
238​}
239​
240​<span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span>) {
241​ div {
242​ <span style="font-weight:bold;">display</span>: grid;
243​ }
244​}
245​
246​<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>) {
247​ <span style="color:#644a9b;">.sidebar</span> {
248​ <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
249​ }
250​}
251​
252​<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;fineprint.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
253​<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">fineprint.css</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
254​<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'bluish.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">speech</span>;
255​<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'custom.css'</span>;
256​<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;chrome://communicator/skin/&quot;</span><span style="color:#644a9b;">)</span>;
257​<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;common.css&quot;</span> <span style="color:#b08000;">screen</span>;
258​<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'landscape.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">landscape</span>);
259​
260​<span style="color:#ff5500;">@namespace</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/1999/xhtml</span><span style="color:#644a9b;">)</span>;
261​<span style="color:#ff5500;">@namespace</span> svg <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/2000/svg</span><span style="color:#644a9b;">)</span>;
262​
263​<span style="color:#ff5500;">@keyframes</span> important1 {
264​ <span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
265​ <span style="color:#b08000;">50%</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; } <span style="color:#898887;">/* ignored */</span>
266​ <span style="color:#b08000;">to</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
267​}
268​
269​<span style="color:#ff5500;">@keyframes</span> important2 {
270​ <span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>;
271​ <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
272​ <span style="color:#b08000;">to</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; <span style="color:#898887;">/* ignored */</span>
273​ <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
274​}
275​
276​<span style="color:#ff5500;">@keyframes</span> slidein {
277​ <span style="color:#b08000;">from</span> {
278​ <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
279​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>;
280​ }
281​
282​ <span style="color:#b08000;">to</span> {
283​ <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>;
284​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
285​ }
286​}
287​
288​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
289​ a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
290​ <span style="color:#898887;">/* comments */</span>
291​ a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
292​}
56</pre></body></html> 293​</pre></body></html>