distinct handling using multiple css files #5

axlay opened this Issue Mar 10, 2014 · 1 comment


None yet
2 participants

axlay commented Mar 10, 2014

In case of using more than one css file, the viewport-units-buggyfill has to treat the fixes for the css files separately in order to avoid fixes used in the one file (e.g. mobile css) are also applied to the other (e.g. desktop css)


rodneyrehm commented Mar 10, 2014

The problem is with the following configuration:

<link rel="stylesheet" href="mobile.css" media="(max-width: 1000px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1001px)">

The buggyfill effectively loses the mediaquery on the <link> as it dumps all viewport-unit rules it can find into the same output.

We can either create multiple <style> elements, one for each <link>. Or re-walk the entire CSSOM on every orientationchange and simply kick out all the MQs that don't apply. As there are potentially thousands of declarations, but only a few that actually use viewport units, I would prefer the multiple-<style> approach. But since the refresh option (re-walking the CSSOM) is much simpler to implement, I'm going with that approach first - until someone complains about performance ;)

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