2/20/2013

Using CSS Media Queries as a Data Transport

Sorry for the long delay. I recently changed jobs and with family I had no time to get this out. I am going to try to return to every other week articles again.

My recent work involved creating web destinations based on both dynamic content, dynamic form, and responsive design with no preset dimensions. The pages would have to adjust to fit multiple sizes set at compile time. Each size could have its own specific properties and shared properties. The one thing I did know was that I could rely on any screen specific properties to have an identifier appended to the property name to make it unique. I needed a way to find the correct identifier for the current screen size. To make this work we decided to use CSS to store it. The solution worked for all modern browsers. Internet Explorer 8 received an alternate css and workflow since it doesn't support the MediaQueryList object.