forked from LeaVerou/prefixfree
/
index.html
executable file
·215 lines (188 loc) · 10.4 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prefix free: Break free from CSS vendor prefix hell!</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="shortcut icon" href="img/favicon.png" />
<script src="prefixfree.min.js"></script>
<style>
body {
transform:none; /* Just to test embedded styles */
}
</style>
</head>
<body>
<hgroup>
<h1>-prefix-free</h1>
<h2>Break free from CSS prefix hell!</h2>
</hgroup>
<a href="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js" class="download" title="Click to download">Only <strong>2KB</strong> gzipped</a>
<a href="https://github.com/LeaVerou/prefixfree" target="_blank" class="github-ribbon"><img src="https://a248.e.akamai.net/assets.github.com/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"></a>
<p id="wtf">
<strong>-prefix-free</strong> lets you use only unprefixed CSS properties everywhere.
It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
</p>
<nav>
Learn more:<ul>
<li><a href="#">Home</a></li>
<li><a href="#test-drive">Test drive</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#plugins">Plugins</a></li>
</ul>
</nav>
<blockquote cite="http://twitter.com/#!/meyerweb/status/124618575263711232">
<p>“[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.”</p>
— <a href="http://twitter.com/#!/meyerweb/status/124618575263711232" target="_blank">Eric Meyer</a>
</blockquote>
<div class="section-container">
<section id="features">
<h1>Features</h1>
<ul class="features">
<li>Processes every stylesheet in <code><link></code> or <code><style></code> elements and adds a vendor prefix where needed</li>
<li>Processes elements with a <code>style</code> attribute and adds a vendor prefix where needed</li>
<li>Takes care of <strong>new</strong> <code><link></code> or <code><style></code> elements, <code>style</code> attribute changes and CSSOM changes (<a href="#dynamic-dom">requires plugin</a>)</li>
<li>Lets <strong>jQuery</strong>’s <code>.css()</code> method get and set unprefixed properties (<a href="#jquery">requires plugin</a>)</li>
</ul>
</section>
<section id="limitations">
<h1>Limitations</h1>
<ul class="drawbacks">
<li>Prefixing code in <code>@import</code>-ed files is not supported</li>
<li>Prefixing <strong>cross-origin</strong> linked stylesheets is not supported</li>
<li>Unprefixed linked stylesheets won’t work <strong>locally</strong> in Chrome and Opera. <a href="#local-xhr">You can change that for yourself</a> though.</li>
<li>Unprefixed <strong>values</strong> in inline styles (in the <code>style</code> attribute) won’t work in IE and Firefox < 3.6. <strong>Properties</strong> as well in Firefox < 3.6.</li>
</ul>
</section>
</div>
<div class="section-container">
<section id="demo">
<h1>Demo?</h1>
<p>Check <a href="css/style.css">this page’s stylesheet</a> ;-)</p>
<p>You can also visit the <a href="#test-drive">Test Drive</a> page, type in any code you want and check out how it would get prefixed for the current browser.</p>
</section>
<section id="howto">
<h1>How to use</h1>
<p>Just include <code>prefixfree.js</code> anywhere in your page. It is recommended to put it right after the stylesheets, to minimize <abbr title="Flash Of UnCSS3-ed Content">FOUC</abbr>
<p>That’s it, you’re done!</p>
</section>
</div>
<section id="browser-support">
<h1>Browser support</h1>
<p>The target browser support is <strong>IE9+</strong>, <strong>Opera 10+</strong>, <strong>Firefox 3.5+</strong>, <strong>Safari 4+</strong> and <strong>Chrome</strong>.</p>
<p>If it doesn’t work in any of those, it’s a bug so please report it. Just before you do, please make sure that it’s not because the browser doesn’t support a CSS3 feature at all, even with a prefix.</p>
<p>In older browsers like IE8, nothing will break, just properties won’t get prefixed. Which wouldn’t be useful anyway as IE8 doesn’t support much CSS3 ;)</p>
</section>
<section id="test-drive" class="page">
<h1>Test drive</h1>
<p>Test the prefixing that -prefix-free would do for this browser, by writing some CSS below:</p>
<textarea id="source">@keyframes rotate {
from { transform: rotate(15deg) }
to { transform: rotate(375deg) }
}
.download {
position: absolute;
top: 1em;
left: -1.5em;
width: 6em;
height: 6em;
padding: 1em 0;
background: #80A060;
background-image: linear-gradient(transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);
color: white;
line-height: 1;
font-size: 140%;
text-align: center;
text-decoration: initial;
text-shadow: .08em .08em .2em rgba(0,0,0,.6);
border-radius: 50%;
box-shadow: .1em .2em .4em -.2em black;
box-sizing: border-box;
transform: rotate(15deg);
animation: rotate;
cursor: zoom-in;
}
:read-write {}</textarea>
<textarea id="prefixed" readonly></textarea>
</section>
<section id="faq" class="page">
<h1>FAQ</h1>
<section>
<h1>What if I actually want to target only a specific prefix?</h1>
<p>Properties/values etc that <strong>already</strong> have a prefix won’t be altered. However, if you use the unprefixed property/value etc after the prefixed properties, you might run into <a href="https://github.com/LeaVerou/prefixfree/issues/16#issuecomment-2428237" target="_blank">issue #16</a>.
For those cases, -prefix-free adds a class on the root element (the <code><html></code> element in HTML) with the same name as the current prefix. So for example, to solve the problem presented in the above issue, you could do:</p>
<pre>.myselector {
transform: rotate(15deg);
}
.-webkit- .myselector {
transform: rotate(15deg) rotateX(0);
}</pre>
<p>It’t not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free.</p>
<p>Please note that in unsupported browsers like IE8, no such class will be added.</p>
</section>
<section id="local-xhr">
<h1>How do I enable local testing?</h1>
<p>Firefox (and IE?) natively support local XHR, so -prefix-free will work fine locally with them.</p>
<p>To enable local XHR for <strong>Chrome</strong>, you need to run it with the flag <code>--allow-file-access-from-files</code>.</p>
<p>To enable local XHR for <strong>Opera</strong>, you have to go to <a href="opera:config#UserPrefs|AllowFileXMLHttpRequest">opera:config#UserPrefs|AllowFileXMLHttpRequest</a>, check that option and Save.</p>
</section>
<section>
<h1>Something like this belongs to the server-side</h1>
<p>A server side script would need to add all prefixes, making the size of the CSS file considerably larger. Also, it should maintain a list of features that need prefixes, or add them all and unnecessarily bloat the stylesheet. -prefix-free automatically detects what needs a prefix and what doesn’t.</p>
<p>Also, a common argument against doing this on the client side, is that it makes the design rely on JavaScript. However, that is completely false: If JS is disabled, only some of the CSS3 won’t show. But if your design <em>relies</em> on CSS3 to be functional, you have bigger problems bro.</p>
<p>You can read some more about this in my recent <a href="http://css-tricks.com/14792-five-questions-with-lea-verou/#lea-question-2">CSS Tricks interview</a></p>
<p>But every solution has its own pros and cons. If you would feel more comfortable with a server-side script, use that and don’t troll me please. Remember: nobody forced you to use -prefix-free. <strong>KTHXBAI ☺</strong></p>
</section>
</section>
<section id="plugins" class="page">
<h1>Plugins</h1>
<p>Extra code on top of -prefix-free that makes it more flexible, integrates it with different APIs etc</p>
<section id="dynamic-dom">
<h1>Dynamic DOM plugin</h1>
<p>Originally a part of -prefix-free, it’s now a separate plugin. It makes -prefix-free take care of:</p>
<ul class="features">
<li><strong>New</strong> <code><link></code> and <code><style></code> added to the document afterwards</li>
<li><strong>New</strong> elements with a <code>style</code> attribute added to the document afterwards</li>
<li><code>style</code> attribute changes through <code>setAttribute()</code> (except in Webkit)</li>
<li>Getting and setting unprefixed properties through the CSSOM, like:
<pre>element.style.transform = 'rotate(10deg)';</pre>
</li>
</ul>
Things to be aware of:
<ul class="drawbacks">
<li>Mutation events have a reputation of being slow, and they are the only way to do stuff when an attribute changes or new elements get added</li>
<li><code>style</code> attribute modifications will not work in Webkit</li>
<li>
<em>Setting</em> unprefixed CSSOM properties, like:
<pre>element.style.transform = 'rotate(5deg)';</pre>
will not work in Chrome (<em>reading</em> will)
</li>
</ul>
<p>Get the Dynamic DOM plugin now:</p>
<ul>
<li><a href="https://raw.github.com/LeaVerou/prefixfree/master/plugins/prefixfree.dynamic-dom.js">prefixfree.dynamic-dom.js</a></li>
<li><a href="https://raw.github.com/LeaVerou/prefixfree/master/plugins/prefixfree.dynamic-dom.min.js">prefixfree.dynamic-dom.min.js</a></li>
</ul>
</section>
<section id="jquery">
<h1>jQuery plugin</h1>
<p>A tiny plugin (I didn’t even bother minifying it as it’s so small) that lets you set/get unprefixed CSS properties through jQuery's <code>.css</code> method.</p>
<p>Get the jQuery plugin now:</p>
<ul>
<li><a href="https://raw.github.com/LeaVerou/prefixfree/master/plugins/prefixfree.jquery.js">prefixfree.jquery.js</a></li>
</ul>
</section>
</section>
<footer>
<a href="http://twitter.com/prefixfree" target="_blank">@prefixfree</a>
✿ <a href="https://github.com/LeaVerou/prefixfree/commits/master.atom" target="_blank">Commits feed</a>
✿ Made by <a href="http://lea.verou.me/">Lea Verou</a> with care
</footer>
<script src="index.js"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="prefixfree" data-related="LeaVerou">Tweet</a>
<script src="http://platform.twitter.com/widgets.js"></script>
<script>var _gaq = [['_setAccount', 'UA-25106441-4'],['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>
</body>
</html>