Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added viewport units plugin, CSS variables plugin

  • Loading branch information...
commit 28491b24df74d5d45977e72b36a540408076ce2a 1 parent 6ad9214
@LeaVerou authored
View
25 index.html
@@ -195,6 +195,31 @@
<li><a href="https://raw.github.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.jquery.js">prefixfree.jquery.js</a></li>
</ul>
</section>
+
+ <section id="viewport-units">
+ <h1>Viewport-relative units</h1>
+ <p>A static polyfill for the new vw, vh, vmin, vmax units. Static means it won’t update when the window is resized, but only on load.</p>
+ <ul>
+ <li><a href="https://raw.github.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.viewport-units.js">prefixfree.viewport-units.js</a></li>
+ </ul>
+ </section>
+
+ <section id="viewport-units">
+ <h1>CSS Variables</h1>
+ <p>Enables rudimentary CSS variable support.</p>
+ <ul class="features">
+ <li>If a prefixed implementation is available, it will add the necessary prefixes and use that</li>
+ <li>It supports overwriting the variable value</li>
+ </ul>
+ Limitations:
+ <ul class="drawbacks">
+ <li>Doesn’t support scoping. Every variable is in the global scope and every subsequent declaration of the same variable overwrites the previous ones, regardless of scoping</li>
+ <li>It’s not dynamic. Variables are replaced once, and then they function as normal CSS values</li>
+ </ul>
+ <ul>
+ <li><a href="https://raw.github.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.viewport-units.js">prefixfree.viewport-units.js</a></li>
+ </ul>
+ </section>
</section>
<footer>
View
57 plugins/prefixfree.vars.js
@@ -0,0 +1,57 @@
+/**
+ * -prefix-free plugin for rudimentary CSS variables support
+ * @author Lea Verou
+ */
+
+(function() {
+
+if(!window.StyleFix || !window.PrefixFree) {
+ return;
+}
+
+// Feature test
+var prefix = PrefixFree.prefix, dummy = document.createElement('_').style;
+
+dummy.cssText = 'var-foo: red; background: var(foo);';
+
+if (dummy.background) { // Unprefixed support
+ return;
+}
+
+dummy.cssText = prefix + 'var-foo: red; background: ' + prefix + 'var(foo);';
+
+if (dummy.background) { // Prefixed support
+
+ StyleFix.register(function(css) {
+ // var- properties
+ css = css.replace(/(^|\{|\s|;)var-([\w-]+)\s*:/gi, '$1' + prefix + 'var-$2:');
+
+ // var() function
+ return css.replace(/(\s|:|,)var\s*\(/gi, '$1' + prefix + 'var(');
+ });
+
+ return;
+}
+
+// If we’re here, there’s no support.
+// But fear not young padawan, cause it’s time foooor… —wait for it— polyfilling!
+
+var vars = {};
+
+StyleFix.register(function(css) {
+ // We need to handle get and set at the same time, to allow overwriting of the same variable later on
+ return css.replace(/(?:^|\{|\s|;)var-(?:[\w-]+)\s*:\s*[^;}]+|(\s|:|,)var\s*\(([\w-]+)\)/gi, function($0, before, id) {
+ var declaration = $0.match(/(^|\{|\s|;)var-([\w-]+)\s*:\s*([^;}]+)/i);
+
+ if (declaration) {
+ vars[declaration[2]] = declaration[3];
+ }
+ else {
+ // Usage
+ return before + (vars[id] || 'initial');
+ }
+ });
+});
+
+
+})();
View
42 plugins/prefixfree.viewport-units.js
@@ -0,0 +1,42 @@
+/**
+ * Polyfill for the vw, vh, vm units
+ * Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/
+ * @author Lea Verou
+ */
+
+(function() {
+
+if(!window.StyleFix) {
+ return;
+}
+
+// Feature test
+var dummy = document.createElement('_').style,
+ units = ['vw', 'vh', 'vmin', 'vmax'].filter(function(unit) {
+ dummy.width = '';
+ dummy.width = '10' + unit;
+ return !dummy.width;
+ });
+
+if(!units.length) {
+ return;
+}
+
+StyleFix.register(function(css) {
+ var w = innerWidth, h = innerHeight;
+
+ return css.replace(RegExp('\\b(\\d+)(' + units.join('|') + ')\\b', 'gi'), function($0, num, unit) {
+ switch (unit) {
+ case 'vw':
+ return num * w / 100 + 'px';
+ case 'vh':
+ return num * h / 100 + 'px';
+ case 'vmin':
+ return num * Math.min(w,h) / 100 + 'px';
+ case 'vmax':
+ return num * Math.max(w,h) / 100 + 'px';
+ }
+ });
+});
+
+})();
Please sign in to comment.
Something went wrong with that request. Please try again.