Show HN: A vanilla JavaScript alternative to the buggy vh/vw CSS units

http://joaocunha.github.io/vunit/

by joaocunha • 12 years ago

8 2 12 years ago

joaocunha.github.io

joaocunha• 12 years ago

Viewport relative units are awesome, except they're not - they are buggy, unreliable and have inconsistent implementation across browsers. vUnit.js offers a lightweight, robust alternative for them and weighs ~600 bytes after gzip.

vUnit.js calculates the browser viewport dimensions and creates CSS rules ranging from 1% to 100% of its size. These rules are then inserted into a stylesheet which is injected on the fly to the <head> tag.

An observer running every 100ms checks if the viewport has been resized and regenerates the CSS rules accordingly. It's a cross-device, event-less solution to keep track of everything that could trigger a resize on the viewport.

On GitHub: https://github.com/joaocunha/vunit/

headsclouds• 12 years ago

This looks interesting. I have used this in the past, although it relies on non-standard CSS to get the results.

https://github.com/rodneyrehm/viewport-units-buggyfill

Show HN: A vanilla JavaScript alternative to the buggy vh/vw CSS units

Related Stories