Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Static polyfill for vw, vh, vm units
/**
* 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', 'vm'].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, m = Math.min(w,h);
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 'vm':
return num * m / 100 + 'px';
}
});
});
})();
@LeaVerou

This comment has been minimized.

Show comment
Hide comment
@LeaVerou

LeaVerou Nov 8, 2011

PS: Yes, I know it only processes integers. Didn't have the time to fix that (and I didn't need it either), if anyone does be my guest.

Owner

LeaVerou commented Nov 8, 2011

PS: Yes, I know it only processes integers. Didn't have the time to fix that (and I didn't need it either), if anyone does be my guest.

@addyosmani

This comment has been minimized.

Show comment
Hide comment
@addyosmani

addyosmani Nov 8, 2011

Interesting. Would it be possible to see a version without StyleFix as a dependency? (if you/anyone else have time).

Interesting. Would it be possible to see a version without StyleFix as a dependency? (if you/anyone else have time).

@LeaVerou

This comment has been minimized.

Show comment
Hide comment
@LeaVerou

LeaVerou Nov 8, 2011

StyleFix merely XHRs linked stylesheets and processes CSS from them and <style> elements and style attributes. It wouldn't be any smaller without that dependency (you'd only save 1 or 2 helper functions that aren't used here).

Owner

LeaVerou commented Nov 8, 2011

StyleFix merely XHRs linked stylesheets and processes CSS from them and <style> elements and style attributes. It wouldn't be any smaller without that dependency (you'd only save 1 or 2 helper functions that aren't used here).

@jonikorpi

This comment has been minimized.

Show comment
Hide comment
@jonikorpi

jonikorpi Feb 11, 2012

Any further documentation for this anywhere? Has it been tested in most browsers?

Any further documentation for this anywhere? Has it been tested in most browsers?

@LeaVerou

This comment has been minimized.

Show comment
Hide comment
@LeaVerou

LeaVerou Feb 11, 2012

Not much testing done. I'd assume it works anywhere that -prefix-free does.

Owner

LeaVerou commented Feb 11, 2012

Not much testing done. I'd assume it works anywhere that -prefix-free does.

@jonikorpi

This comment has been minimized.

Show comment
Hide comment
@jonikorpi

jonikorpi Feb 11, 2012

I'm assuming this doesn't react to changes in the viewport's size? Any chance of implementing that somehow? It would be incredibly powerful for responsive design.

I'm assuming this doesn't react to changes in the viewport's size? Any chance of implementing that somehow? It would be incredibly powerful for responsive design.

@LeaVerou

This comment has been minimized.

Show comment
Hide comment
@LeaVerou

LeaVerou Feb 11, 2012

I know, I'm trying to come up with (reasonable) ways to do that. Nothing so far though.

Owner

LeaVerou commented Feb 11, 2012

I know, I'm trying to come up with (reasonable) ways to do that. Nothing so far though.

@zeorin

This comment has been minimized.

Show comment
Hide comment
@zeorin

zeorin May 9, 2013

This is awesome!

I got it to parse floating-point numbers with some help from http://www.regular-expressions.info/floatingpoint.html

If you like you can update your Gist (Google led me here so it will probably be of use to others).

https://gist.github.com/zeorin/5550626

zeorin commented May 9, 2013

This is awesome!

I got it to parse floating-point numbers with some help from http://www.regular-expressions.info/floatingpoint.html

If you like you can update your Gist (Google led me here so it will probably be of use to others).

https://gist.github.com/zeorin/5550626

@zeorin

This comment has been minimized.

Show comment
Hide comment
@zeorin

zeorin May 9, 2013

I also thought long and hard about how to make this responsive. I tried adding an event listener to window resize with an interruptible setTimeout function that called StyleFix.process, but no dice. After some thinking I figured that this is because your function replaces styles instead of nullifying them with a new declaration that immediately follows. Hence the viewport units don't exist anymore and your function doesn't match anything on a second pass.

If you could get it to simply append a new style declaration of px values, and on subsequent passes replace only the new declaration (not the original one), then the previously mentioned resize listener would work.

i.e. instead of

font-size: 1vw => font-size: 12px

it would do:

font-size: 1vw => font-size: 1vw; font-size: 12px;

And then later after a resize:

font-size: 1vw; font-size: 12px; => font-size: 1vw; font-size: 9px;

I would try it but my regex-fu is not that good. I may attempt this later.

zeorin commented May 9, 2013

I also thought long and hard about how to make this responsive. I tried adding an event listener to window resize with an interruptible setTimeout function that called StyleFix.process, but no dice. After some thinking I figured that this is because your function replaces styles instead of nullifying them with a new declaration that immediately follows. Hence the viewport units don't exist anymore and your function doesn't match anything on a second pass.

If you could get it to simply append a new style declaration of px values, and on subsequent passes replace only the new declaration (not the original one), then the previously mentioned resize listener would work.

i.e. instead of

font-size: 1vw => font-size: 12px

it would do:

font-size: 1vw => font-size: 1vw; font-size: 12px;

And then later after a resize:

font-size: 1vw; font-size: 12px; => font-size: 1vw; font-size: 9px;

I would try it but my regex-fu is not that good. I may attempt this later.

@zeorin

This comment has been minimized.

Show comment
Hide comment
@zeorin

zeorin May 10, 2013

So, I liked the challenge and made it work responsively: https://gist.github.com/zeorin/5551591

I made sure that there is a 200 millisecond delay after the resize finishes before the function runs, otherwise it is very resource intensive. Maybe 200 is too long? Meh.

Also, I made sure that prefixed properties are matched as well as normal ones, and that only the desired pattern matches. The regex is a monster but I left a comment to a handy regex debugger if you wanna be sure that I did it right.

Regexes are performance hungry, so I recommend that if anyone uses this that they only apply viewport units to as little selectors as possible (I have it on just one, the wrapper element), and that everything else uses ems based off that [distant] parent element.

@jonikorpi, you might like this.

zeorin commented May 10, 2013

So, I liked the challenge and made it work responsively: https://gist.github.com/zeorin/5551591

I made sure that there is a 200 millisecond delay after the resize finishes before the function runs, otherwise it is very resource intensive. Maybe 200 is too long? Meh.

Also, I made sure that prefixed properties are matched as well as normal ones, and that only the desired pattern matches. The regex is a monster but I left a comment to a handy regex debugger if you wanna be sure that I did it right.

Regexes are performance hungry, so I recommend that if anyone uses this that they only apply viewport units to as little selectors as possible (I have it on just one, the wrapper element), and that everything else uses ems based off that [distant] parent element.

@jonikorpi, you might like this.

@dalexisv83

This comment has been minimized.

Show comment
Hide comment
@dalexisv83

dalexisv83 Jun 7, 2013

@zeorin do you have a demo I could check out? I'd like to see how you execute your ems based off a distant parent strategy. I can't wrap my head around it.

@zeorin do you have a demo I could check out? I'd like to see how you execute your ems based off a distant parent strategy. I can't wrap my head around it.

@rhythmus

This comment has been minimized.

Show comment
Hide comment
@rhythmus

rhythmus Aug 28, 2013

Neat, thanks for sharing! But what’s the vm unit? The specs (to-date) describe vw (viewport width), vh (viewport height), but no vm.

There are instead vmin (the smaller of vw or vh) and vmax (the larger of vw or vh).

Being able to declare an element’s width and/or height conditionally as minimally (or maximally) a percentage of either the viewport’s height or it’s width, whichever is the smallest (or biggest), can be very useful for responsive design, esp. reckoning with device orientation, m.m. portrait/landscape.

@LeaVerou — Is this polyfill being developed any further?

I found this implementation by @saabi to be somewhat more up-to-date (albeit much more heavy). (And it has an impressive demo!) ⟶ https://github.com/saabi/vminpoly

Neat, thanks for sharing! But what’s the vm unit? The specs (to-date) describe vw (viewport width), vh (viewport height), but no vm.

There are instead vmin (the smaller of vw or vh) and vmax (the larger of vw or vh).

Being able to declare an element’s width and/or height conditionally as minimally (or maximally) a percentage of either the viewport’s height or it’s width, whichever is the smallest (or biggest), can be very useful for responsive design, esp. reckoning with device orientation, m.m. portrait/landscape.

@LeaVerou — Is this polyfill being developed any further?

I found this implementation by @saabi to be somewhat more up-to-date (albeit much more heavy). (And it has an impressive demo!) ⟶ https://github.com/saabi/vminpoly

@ghatem

This comment has been minimized.

Show comment
Hide comment
@ghatem

ghatem Sep 2, 2014

what do you mean stylefix???

ghatem commented Sep 2, 2014

what do you mean stylefix???

@mort3za

This comment has been minimized.

Show comment
Hide comment
@mort3za

mort3za Dec 8, 2015

Is there any standalone one?

mort3za commented Dec 8, 2015

Is there any standalone one?

@shmdhussain

This comment has been minimized.

Show comment
Hide comment
@shmdhussain

shmdhussain Jan 4, 2016

Only Integer values are covered not float values like 3.25vw

Only Integer values are covered not float values like 3.25vw

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment