16ab31f67b206471c56095ba0ef21cff681595fc
[WebKit-https.git] / Websites / webkit.org / specs / MediaQueriesExtensions.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html lang="en">
4   <head>
5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6     <title>
7       Extensions to CSS3 Media Queries
8     </title>
9     <link href="CSSVisualEffects/base.css" rel="stylesheet" type="text/css">
10     <style type="text/css">
11
12     @media print {
13
14     /* the following doesn't work for now,
15     instead we rely on a patched version of html2ps which has this built-in */
16     .dlink { display: none }
17
18     /* the following doesn't work for now,
19     instead we rely on a patched version of html2ps which has this built-in */
20     div.navbar {
21     display: none;
22     }
23
24     html { margin: 0 !important }
25     body { font-family: serif }
26     th, td { font-family: inherit }
27     a { color: inherit !important }
28     div.example:before { font-family: serif !important }
29     pre.example:before { font-family: serif !important }
30     a:link, a:visited { text-decoration: none !important }
31     a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
32     }
33     @page {
34     margin: 1.5cm 1.1cm;
35     }
36
37     /* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
38
39     body {counter-reset: exampleno figure}
40
41     h2, h3, h5, h6 { margin-top: 2em }
42     h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
43     div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
44     div.example { page-break-inside: avoid }
45     dt { page-break-after: avoid }
46
47     span.id {float: right; font-weight: bold}
48
49     /* p, p.note + p, p.testlink + p, p.note, p.issue { */
50     p, p.testlink + p, p.issue, p.mtb {
51     /* text-indent: 2em; */
52     margin-bottom: 0.6em;
53     margin-top: 0.6em
54     }
55     p + p, p + div.sidefigure + p {
56     /* text-indent: 2em; */
57     margin-top: 0
58     }
59     dd p {
60     margin-top: 0
61     }
62
63     h1 + h2 {
64     margin-top: 0;
65     }
66
67     pre {
68     text-align: left; /* fixes justification in Mac IE 5 */
69     text-indent: 0;   /* fixes indent in Mac Netscape 6 */
70     margin-top: 1em;
71     margin-bottom: 1em;
72     font-size: 90% /*smaller*/;
73     }
74     /*
75     var {
76     font-style: normal;
77     }
78     */
79     img {
80     border-style: none;
81     color: white;
82     }
83     .toc {
84     text-indent: 0;
85     }
86
87
88     @media all { /* NS < 6 doesn't like borders around inline elements... */
89
90     body {
91     line-height: 1.3;
92     }
93
94     a:link, a:visited {
95     /*        color: inherit;*/
96     }
97     a.logo:link, a.logo:visited {
98     padding: 0;
99     border-style: none;
100     }
101
102     /* Hmm, this seems to confuse many browsers... */
103     dt { margin-left: 0; margin-top: 1em; color: #030; font-weight: bold;}
104     dd { margin-left: 2em }
105     dl, ul, ol { margin-left: 1em; padding-left: 0 }
106     li { margin-left: 2em; padding-left: 0 }
107
108     }
109     ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
110     ul.indexlist li { margin-left: 0; list-style: none }
111     ul.indexlist li li { margin-left: 1em }
112
113     div.example:before {
114     content: "Example";
115     content: "Example " counter(exampleno, upper-roman);
116     font: bold small sans-serif;
117     /*float: left;*/
118     position: absolute;
119     top: -0.6em;
120     left: -2.5em;
121     width: 7.5em;
122     text-align: center;
123     line-height: 1em;
124     color: #FFF8DD;
125     background: #600;
126     padding: 0.1em;
127     border: thin solid #999;
128     /*margin: -1.3em 0 0.3em -2.5em;*/
129     }
130     div.example {
131     counter-increment: exampleno;
132     }
133     pre.example:before {
134     content: "Example";
135     content: "Example " counter(exampleno, upper-roman);
136     font: bold small sans-serif;
137     /*float: left;*/
138     position: absolute;
139     top: -0.6em;
140     left: -2.5em;
141     width: 7.5em;
142     text-align: center;
143     line-height: 1em;
144     color: #FFF8DD;
145     background: #600;
146     padding: 0.1em;
147     border: thin solid #999;
148     /*margin: -1.3em 0 0.3em -2.5em;*/
149     }
150     pre.example {
151     counter-increment: exampleno;
152     }
153     div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
154     div.illegal-xml, pre.example, pre.illegal-example, pre.html,
155     pre.illegal-html, pre.xml, pre.illegal-xml {
156     background: #FFF8DD;
157     padding: 0.5em;
158     margin: 1em 0;
159     border: thin solid #999;
160     position: relative;
161     }
162     pre.example, pre.illegal-example, pre.html,
163     pre.illegal-html, pre.xml, pre.illegal-xml {
164     padding-top: 1.5em;
165     }
166     div.example { color: #600 }
167     pre.example { color: #600 }
168     pre.illegal-example { color: red }
169     div.illegal-example { color: red }
170     div.illegal-example p { color: black }
171
172     div.html { color: #600 }
173     pre.html { color: #600 }
174     pre.illegal-html { color: red }
175     div.illegal-html { color: red }
176     div.illegal-html p { color: black }
177     pre.deprecated-html { color: red }
178     div.deprecated-html { color: red }
179     div.deprecated-html p { color: black }
180
181     div.xml { color: #600 }
182     pre.xml { color: #600 }
183     pre.illegal-xml { color: red }
184     div.illegal-xml { color: red }
185     div.illegal-xml p { color: black }
186
187     code { font-size: 90% }
188     .css { color: #800 }    /* inline CSS code (SPAN/CODE) */
189     code.css { font-family: inherit; font-size: 100% }
190     code.html { color: #600 } /* inline HTML */
191     code.xml { color: #600 }  /* inline XML */
192     .property { }     /* name of a CSS property (SPAN) */
193     .prop-name { color: #2A2AA5; font-weight: bold; font-size: 90%} /* name of a CSS property (SPAN) */
194     .prop-value { font-weight: bold; font-size: 90%} /* CSS property value (SPAN) */
195     .descriptor { }     /* name of a CSS descriptor (SPAN) */
196     .issue { color: #c00 }    /* editorial remark, open issue */
197     .type { font-style: italic }  /* A <type> value for a property */
198
199     dfn { font-weight: bolder; /*font-size: 1em*/ }
200
201     /* Class note is a non-normative note. May be inline or a P or DIV */
202     .note {
203       /* font-weight: bold; */
204       background-color: #cfc;
205       margin-top: 2em;
206       padding: 1em;
207       border: 1px solid #6a6;
208       border-left: 8px solid #6a6;
209     }
210     p.note, div.note {
211     /* margin: 1em 2em; */
212     }
213     p.note:before, span.note:before { content: "\25B6" " " }
214     div.note > p:first-child:before { content: "\25B6" " " }
215
216     .normref { color: red } 
217     .informref { color: green } 
218
219
220     /* ToC not indented, but font style shows hierarchy */
221     ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
222     ul.toc ul {margin: 0; padding: 0; font-weight: normal}
223     ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
224     ul.toc ul ul ul {margin: 0}
225     ul.toc li {margin: 0.6em 0; padding: 0}
226     ul.toc li li {margin: 0}
227     /*
228     ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
229     ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
230     */
231
232     @media all { /* NS4 doesn't align the floats properly :-( */
233
234     /* Section numbers in a column of their own */
235     ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
236     ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
237     /*ul.toc span.secno {text-align: right}*/
238     ul.toc li {clear: both}
239     ul.toc {margin-left: 5em}
240     /* If we had 'tab', floats would not be needed here:
241     ul.toc span.secno {tab: 5em right; margin-right: 1em}
242     ul.toc li {text-indent: 5em hanging}
243     The second line in case items wrap
244     */
245     }
246
247     ul.index {
248     list-style: disc;   /* Mac NS has problem with 'none' */
249     list-style: none;
250     }
251
252     s, del {text-decoration: line-through; color: red}
253     u, ins {text-decoration: underline; background: #bfa}
254
255     div.figure, div.sidefigure {
256     text-align: center;
257     margin: 2.5em 0;
258     }
259     div.sidefigure {
260     float: right;
261     width: 50%;
262     margin: 0 0 0.5em 0.5em
263     }
264     div.figure img, div.sidefigure img {
265     display: block;
266     margin: auto;
267     max-width: 100%
268     }
269     p.caption, caption {
270     text-align: center;
271     font-style: italic;
272     font-size: 90%;
273     margin: 1.5em 2em;
274     text-indent: 0;
275     }
276     p.caption:before {
277     content: "Figure " counter(figure) ". ";
278     font-weight: bold;
279     }
280     p.caption {
281     counter-increment: figure;
282     }
283
284     /* DL list is indented, but figure inside it is not */
285     dd { margin-left: 2em }
286     dd div.figure { margin-left: -2em }
287
288     sup {
289     vertical-align: super;
290     font-size: 80%
291     }
292
293     /* "Equations" (not real MathML, but simple HTML) are put in a
294     blockquote and may have an equation number. We make sure the
295     blockquote has enough margin on the right and then put the equation
296     number there. */
297
298     blockquote {
299     margin: 0.5em 4em 0.5em 2em;
300     text-indent: 0;
301     }
302     .eqno {
303     text-align: right;
304     float: right;
305     width: 3em;
306     margin: 0 -4em 0 0;
307     font-weight: bold;
308     /* background: silver; color: black; padding: 0.1em */
309     }
310
311     table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
312     table.equiv-table th, table.equiv-table td { padding: 0.3em }
313     table.equiv-table th { text-align: left }
314     /* table.equiv-table th:first-child { text-align: right } */
315     table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
316     table.equiv-table { border-bottom: hidden }
317     table.equiv-table { empty-cells: show }
318     table.equiv-table caption { margin: 0.5em 0 0 0 }
319
320     /* Style for table of properties */
321     table.proptable {
322     font-size: small;
323     border-collapse: collapse;
324     border-spacing: 0;
325     text-align: left;
326     margin: 1em 0;
327     }
328
329     @media print {      /* Use the wide margin in print */
330     table.proptable {margin: 1em 0 1em -8.5em}
331     }
332
333     table.proptable td, table.proptable th {
334     padding: 0.4em;
335     border-style: solid none none dotted;
336     border-width: thin;
337     border-color: red;
338     }
339     table.proptable th:first-child, table.proptable td:first-child {
340     border-left-style: none;
341     }
342
343
344     /* Style for table that defines a property or a descriptor */
345     table.propdef, table.propdef-extra, table.descdef {
346     border-spacing: 0;
347     border-collapse: collapse;
348     width: 100%;
349     table-layout: fixed;
350     background: #DEF;
351     margin-top: 1.2em;
352     margin-bottom: 1.2em
353     }
354     table.propdef td, table.propdef-extra td, table.descdef td {
355     padding: 0 0.3em;
356     vertical-align: baseline;
357     }
358     /*
359     table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
360     font-weight: bold;
361     font-style: normal
362     }
363     */
364     table.propdef td:first-child,
365     table.propdef-extra td:first-child,
366     table.descdef td:first-child {
367     font-style: italic;
368     width: 8.1em
369     }
370     table.propdef td[colspan]:first-child,
371     table.propdef-extra td[colspan]:first-child,
372     table.descdef td[colspan]:first-child {
373     font-style: inherit
374     }
375     table.propdef tr:first-child,
376     table.propdef-extra tr:first-child,
377     table.descdef tr:first-child {
378     background: #005A9C;
379     color: white
380     }
381     /* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
382
383     /* This would replace :first-child for Opera, but it confuses WinIE :-( */
384     /*
385     table.propdef td { width: 8em }
386     table.propdef td + td { width: auto }
387     table.propdef tr { background: #005A9C; color: white }
388     table.propdef tr + tr { background: transparent; color: black }
389     */
390
391     /* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
392     or, if they do, they don't put them in uppercase. But the following
393     class is provided in case a spec wants to use RFC 2119 terms in
394     uppercase in the source. */
395
396     em.rfc2119 {
397     text-transform: lowercase;
398     font-variant: small-caps;
399     font-style: normal
400     }
401
402     /* In Profile specs, a table of required features: */
403
404     table.features th {
405     background: #00589f;
406     color: #fff;
407     text-align: left;
408     padding: 0.2em 0.2em 0.2em 0.5em;
409     }
410     table.features td {
411     vertical-align: top;
412     border-bottom: 1px solid #ccc;
413     padding: 0.3em 0.3em 0.3em 0.7em;
414     }
415
416     body { line-height: 1.4; }
417
418     .issue, .todo {
419     //display: none;
420     margin: 1em;
421     border: 2px solid;
422     padding: 1em;
423     }
424     span.issue, span.todo {
425     border-width: 1px;
426     margin: 0; padding: 0;
427     }
428     .issue { border-color: red; }
429     .todo  { border-color: yellow; }
430     .issue:before, .todo:before {
431     content: attr(class) ": ";
432     text-transform: uppercase;
433     font-weight: bold;
434     }
435     .issue { background: rgb(255,224,224); color: black; }
436     .todo { background: rgb(255,255,192); color: black; }
437
438     .syntax {
439     padding: 1em;
440     margin: 1em 0;
441     border: 1px black solid;
442     background: rgb(224,224,255);
443     color: black;
444     }
445     .idl-code { 
446     margin: 0;
447     font-family: monospace;
448     border: 1px solid black;
449     color: black; 
450     background-color: #dfdfdf;
451     }
452
453     table {
454       border-collapse: collapse;
455     }
456
457     th {
458       background-color: #dfdfdf;
459     }
460     
461     td, th {
462       text-align: left;
463       padding: 0.2em 1em;
464       border: 1px solid black;
465     }
466     
467     </style>
468   </head>
469   <body>
470     <h1>
471       Extensions to CSS 3 Media Queries
472     </h1>
473     <h2>
474       29 April 2010
475     </h2>
476     <dl>
477       <dt>
478         Authors:
479       </dt>
480       <dd>
481         Dean Jackson (<a href="mailto:dino@apple.com">dino@apple.com</a>), <a href="http://www.apple.com/">Apple</a>
482       </dd>
483     </dl>
484     <hr>
485
486     <!-- ======================================================================================================= -->
487
488     <div class="note">
489       NOTE: This document is a work-in-progress proposal. It should not be
490       considered complete, nor does it represent the position of Apple or
491       the WebKit project.
492     </div>
493
494     <h2>
495       1 Introduction
496     </h2>
497
498     <p>
499       This document introduces extensions to the <a
500       href="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 Media Queries</a>
501       specification. It allows for media queries that can test for CSS Transformations, 
502       Animations and Transitions.
503     </p>
504
505     <!-- ======================================================================================================= -->
506
507     <h2>
508       2 The <code>transform-2d</code> media feature
509     </h2>
510     
511     <div class=media-feature>
512       <span class=label>Value:</span> &lt;integer&gt;<br>
513       <span class=label>Applies to:</span> visual media types<br>
514       <span class=label>Accepts min/max prefixes:</span> no<br>
515     </div>
516
517     <p>
518       The &lsquo;<code>transform-2d</code>&rsquo; media feature describes the
519       availability of <a
520       href="http://www.webkit.org/specs/CSSVisualEffects/CSSTransforms.html">
521       CSS Transforms</a> for two-dimensions. This includes the <span
522       class="prop-name">transform</span> property, the transformation
523       functions <code>matrix</code>, <code>translate</code>,
524       <code>translateX</code>, <code>translateY</code>, <code>scale</code>,
525       <code>scaleX</code>, <code>scaleY</code>, <code>rotate</code>,
526       <code>skew</code>, <code>skewX</code> and <code>skewY</code>, and the
527       <span class="prop-name">transform-origin</span> property with X and Y
528       values.
529     </p>
530
531     <p>
532       The User Agent will return a value of 1 if the feature is supported,
533       and a value of 0 otherwise.
534     </p>
535
536     <div class=example>
537       <pre>
538 &lt;link rel="stylesheet" media="screen and (transform-2d)" /&gt;</span>
539       </pre>
540
541        <p>
542          In the example above, the style sheet will apply only to screens that
543          support two-dimensional transforms.
544       </p>
545     </div>
546
547     <h2>
548       3 The <code>transform-3d</code> media feature
549     </h2>
550
551     <div class=media-feature>
552       <span class=label>Value:</span> &lt;integer&gt;<br>
553       <span class=label>Applies to:</span> visual media types<br>
554       <span class=label>Accepts min/max prefixes:</span> no<br>
555     </div>
556
557     <p>
558       The &lsquo;<code>transform-3d</code>&rsquo; media feature describes the
559       availability of <a
560       href="http://www.webkit.org/specs/CSSVisualEffects/CSSTransforms3D.html">
561       CSS Transforms</a> for three-dimensions. This includes the <span
562       class="prop-name">transform</span> property, all transformation
563       functions, the <span class="prop-name">transform-origin</span> property
564       with X, Y and Z values, the <span
565       class="prop-name">transform-style</span> property, the <span
566       class="prop-name">transform-perspective</span> property, the <span
567       class="prop-name">transform-perspective-origin</span> property and the
568       <span class="prop-name">transform-backface-visibility</span> property.
569     </p>
570
571     <p>
572       The User Agent will return a value of 1 if the feature is supported,
573       and a value of 0 otherwise. Since 3D transformations are a 
574       superset of 2D transformations, if &lsquo;<code>transform-3d</code>&rsquo;
575       evaluates to true, &lsquo;<code>transform-2d</code>&rsquo; must also evaluate
576       to true.
577     </p>
578
579     <div class=example>
580       <pre>
581 &lt;link rel="stylesheet" media="screen and (transform-3d)" /&gt;</span>
582       </pre>
583
584        <p>
585          In the example above, the style sheet will apply only to screens that
586          support three-dimensional transforms.
587       </p>
588     </div>
589
590     <h2>
591       4 The <code>transition</code> media feature
592     </h2>
593
594     <div class=media-feature>
595       <span class=label>Value:</span> &lt;integer&gt;<br>
596       <span class=label>Applies to:</span> visual media types<br>
597       <span class=label>Accepts min/max prefixes:</span> no<br>
598     </div>
599
600     <p>
601       The &lsquo;<code>transition</code>&rsquo; media feature describes the
602       availability of <a
603       href="http://www.webkit.org/specs/CSSVisualEffects/CSSTransitions.html">
604       CSS Transitions</a>. This includes the
605       <span class="prop-name">transition-property</span> property,
606       the <span class="prop-name">transition-duration</span> property,
607       the <span class="prop-name">transition-timing-function</span> property,
608       and the <span class="prop-name">transition-delay</span> property.
609     </p>
610
611     <p>
612       The User Agent will return a value of 1 if the feature is supported,
613       and a value of 0 otherwise.
614     </p>
615
616     <div class=example>
617       <pre>
618 &lt;link rel="stylesheet" media="screen and (transition)" /&gt;</span>
619       </pre>
620
621        <p>
622          In the example above, the style sheet will apply only to screens that
623          support CSS Transitions.
624       </p>
625     </div>
626
627     <h2>
628       5 The <code>animation</code> media feature
629     </h2>
630
631     <div class=media-feature>
632       <span class=label>Value:</span> &lt;integer&gt;<br>
633       <span class=label>Applies to:</span> visual media types<br>
634       <span class=label>Accepts min/max prefixes:</span> no<br>
635     </div>
636
637     <p>
638       The &lsquo;<code>animation</code>&rsquo; media feature describes the
639       availability of <a
640       href="http://www.webkit.org/specs/CSSVisualEffects/CSSAnimations.html">
641       CSS Animations</a>. This includes the
642       <span class="prop-name">animation-name</span> property,
643       the <span class="prop-name">animation-duration</span> property,
644       the <span class="prop-name">animation-timing-function</span> property,
645       the <span class="prop-name">animation-delay</span> property,
646       the <span class="prop-name">animation-iteration-count</span> property,
647       the <span class="prop-name">animation-play-state</span> property,
648       the <span class="prop-name">animation-direction</span> property
649       and the <code>@keyframes</code> at-rule.
650     </p>
651
652     <p>
653       The User Agent will return a value of 1 if the feature is supported,
654       and a value of 0 otherwise.
655     </p>
656
657     <div class=example>
658       <pre>
659 &lt;link rel="stylesheet" media="screen and (animation)" /&gt;</span>
660       </pre>
661
662        <p>
663          In the example above, the style sheet will apply only to screens that
664          support CSS Animations.
665       </p>
666     </div>
667
668     <h2>
669       6 DOM Interface
670     </h2>
671
672     <div class="note">
673       This section previously contained a definition for a DOM method that
674       would evaluate media query strings. This has been removed from the
675       proposal. Developers should instead use the <code>MediaQueryList</code>
676       interface defined in the <a href="http://dev.w3.org/csswg/cssom-view/">CSS View</a> specification.
677     </div>
678
679     
680   </body>
681 </html>