Giter VIP home page Giter VIP logo

vminpoly's Introduction

vminpoly

A polyfill for CSS units vw, vh & vmin.

Simple online demo right here. A more sophisticated responsive demo demonstrating vw/vh/vmin units along with media queries, working right down to IE5.5 on the desktop and Opera Mini on mobiles!! (In Opera Mini the browser must be refreshed after changing phone orientations as it appears it doesn't trigger the window resize event)

This is a working proof of concept right now. There's a lot of cleanup to do on the code.

Since most browsers ignore rules they don't understand, the code must load and parse the original CSS sourcecode. It does this using a javascript CSS parser. Once this is done, it filters the generated tree leaving only rules that use 'vh', 'vw' & 'vmin' units. At window resize time, it generates CSS code for the 'px' equivalents and appends it in a 'style' element at the end of the 'head' element. The generated code respects media queries.

As it is, it's fast enough for a lot of cases, but the code can still be optimized greatly, both in parsing and in resizing.

Also, any suggestions on how to better organize the repo, specially with respect to third party code, is greatly appreciated.

Notes

  • It's working fine in IE5.5+, Firefox, Opera and even Opera Mini, which doesn't support any of the units or media queries. Chrome, Safari and the Firefox beta don't need it.
  • Well... Chrome and Safari actually can benefit from it as they don't properly handle font-size natively while resizing the window.

TODO:

  • IE9 and IE10 support vw, vh & vm, so the code should only translate 'vmin' units to 'vm'
  • Only linked stylesheets are being parsed right now but it's very easy to also parse 'style' elements.
  • Also, recursively parse @import rules.
  • Add some more examples of what can be achieved.

In short, the only browser with apparently full native support right now is Firefox beta (Aurora). The rest will benefit from this polyfill immediately, even without the badly needed code polishing.

Latest Changes:

  • After some bug fixes it finally works down to IE5.5 on the desktop and Opera Mini on mobile!!
  • Also, I removed the dependency on jQuery.
  • Now resizes correctly right after page load.
  • Media query support!! (rudimentary, but check out the new demo!)
  • Right now, media queries only apply to rules with vw,vh/vmin units. Other rules won't be applied just yet. More to come...

vminpoly's People

Contributors

saabi avatar rjfranco avatar deep-spaced avatar coldacid avatar

Watchers

Nikolya avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.