forked from adobe-webplatform/css-regions-polyfill
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (131 loc) · 7.25 KB
/
index.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!--
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions JavaScript Polyfill</title>
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<h1>CSSRegions.js</h1>
<a href="http://html.adobe.com" class="logo">Adobe</a>
<p>
CSSRegions.js is an experimental polyfill that uses JavaScript to bring CSS Regions functionality to browsers that don't support the feature.
</p>
<div id="download">
<!-- Download master branch as zip file -->
<a href="https://github.com/adobe-webplatform/css-regions-polyfill/archive/master.zip" class="button" title="Download the CSSRegions.js polyfill">Download</a>
<span>iOS 4+, Android 4+, Firefox, Chrome, Safari 5+, Opera.</span>
<span>See <a href="#support">feature support</a>.</span>
</div>
</header>
<article>
<section id="usage">
<h2>Usage</h2>
<p>Download and link the <code>cssregions.js</code> script in your page.</p>
<pre>
<body>
...
<script src="cssregions.js"></script>
</body>
</pre>
<p>Use <code>-adobe-</code> prefixed <a href="http://www.w3.org/TR/css3-regions/">CSS Regions</a> syntax in your stylesheet.</p>
<pre>
#content{
-adobe-flow-into: myFlow;
}
.region{
-adobe-flow-from: myflow;
}
</pre>
<p>There's no setup necessary. Just load the polyfill script and it will automatically parse and apply the CSS Regions syntax it finds in the page's stylesheets. If the browser supports CSS Regions, the polyfill will not be run and it will defer functionality to the native implementation.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<ul>
<li><a href="examples/index.html">Newspaper article layout using CSS Regions</a></li>
</ul>
<p><a href="playground/index.html">Examples using CSS Regions proposal plus JavaScript for browsers without support (CSS Regions polyfill)</a></p>
</section>
<section id="support">
<h2>Browser support</h2>
<ul>
<li>iOS 4+</li>
<li>Android 4+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari 5+</li>
<li>Opera</li>
</ul>
</section>
<section id="limitations">
<h2>Limitations</h2>
<p>The CSSRegions.js polyfill is <strong>an experimental script</strong> that demonstrates basic CSS Regions features. It uses JavaScript to simulate the functionality as defined by the <a href="http://www.w3.org/TR/css3-regions/">CSS Regions W3C proposal</a>. Because it's using JavaScript, the polyfill performs slower than a native browser implementation of CSS Regions.</p>
<p class="warn">It is not recommended to use the CSSRegions.js polyfill in a production environment as a substitute for native browser support.</p>
<p>The polyfill works only with <code>-adobe-</code> prefixed CSS syntax and CSSOM properties.</p>
<h3>Prefixed CSS syntax</h3>
<ul>
<li>Use <code>-adobe-flow-into: IDENT</code> to collect content into a named flow</li>
<li>Use <code>-adobe-flow-from: IDENT</code> to render content from a named flow</li>
</ul>
<h3>Prefixed CSSOM properties and events</h3>
<ul>
<li>The <code>document.getNamedFlows()</code> method becomes <code>document.adobeGetNamedFlows()</code></li>
<li>The <code>regionlayoutupdate</code> event becomes <code>adoberegionlayoutupdate</code></li>
<li>The <code>regionOverset</code> property becomes <code>adobeRegionOverset</code></li>
</ul>
<h3>Known issues</h3>
<p>This experimental script has a few known limitations:</p>
<ul>
<li><strong>Media Queries</strong> - the polyfill does not automatically react to changes determined by media queries;</li>
<li><strong>DOM Manipulation</strong> - the polyfill does not automatically react to changes in the document structure; <a href="#workaround-layout">See workaround</a></li>
<li><strong>Events</strong> - the polyfill breaks down DOM nodes to distribute them into regions. This may affect event handlers registerd on those nodes;</li>
<li><strong>Region Styling</strong> - there is currently no support for <a href="http://www.w3.org/TR/css3-regions/#region-styling">@region</a> styling blocks;</li>
</ul>
<h3>Workarounds</h3>
<p id="workaround-layout">The polyfill may be forced to re-layout the content by calling <code>CSSRegions.doLayout()</code> in a script, after making changes to the stylesheets or elements in the document.</p>
<pre>
<script>
// Add elements to the document
// then
CSSRegions.doLayout()
</script>
</pre>
</section>
<section id="documentation">
<h2>Documentation</h2>
<ul>
<li><a href="http://docs.webplatform.org/wiki/apis/css-regions" target="_blank">CSS Regions API reference</a></li>
<li><a href="http://docs.webplatform.org/wiki/css/tutorials/css-regions" target="_blank">CSS Regions Tutorial</a></li>
</ul>
</section>
<section id="contributing">
<h2>Contributing</h2>
<p>The soure code for the CSSRegions.js polyfill is <a href="https://github.com/adobe-webplatform/css-regions-polyfill">available on GitHub</a>. Code contributions are welcome, but please read the <a href="https://github.com/adobe-webplatform/css-regions-polyfill/blob/master/CONTRIBUTING">contribution guidelines</a> before starting work.</p>
</section>
<section id="license">
<h2>License</h2>
<p>Apache License 2.0</p>
</section>
<section>
<h2>Feedback</h2>
<p>We're looking forward to hear your thougts and suggestions. You can tweet us at <a href="https://twitter.com/AdobeWebPlatfrm">@AdobeWebPlatfrm</a> or open an <a href="https://github.com/adobe-webplatform/css-regions-polyfill/issues?state=open">issue on GitHub</a> if you spot a bug.</p>
</section>
</article>
<script src="http://use.edgefonts.net/league-gothic.js"></script>
<script src="http://use.edgefonts.net/source-sans-pro.js"></script>
<script src="http://use.edgefonts.net/source-code-pro.js"></script>
</body>
</html>