[cssom]

Hi all

I have been looking at the CSSOM View Module specification, in 
particular I have been doing a lot of research into the 
window.matchMedia API and I would like to suggest a potential extension 
to the API.

At the moment we can create a mediaQueryList and add a listener, which 
will fire when the media query is matched or unmatched. A limitation 
however is that we cannot add individual resize methods to each of the 
media queries, I tried to handle this limitation as part of my js 
library SimpleStateManager (www.simplestatemanager.com 
<http://www.simplestatemanager.com/>) which is currently built on top of 
the resize method however soon we will be migrating it to use the 
matchMedia API, but will need to to retain the resize method for 
handling the resize events.

With the current API's available in the browser, to have a different 
resize method for each of the mediaQueryLists we need to add an on 
resize event.

var mqlSmall = window.matchMedia("screen and (max-width: 767px)");
var mqlMedium = window.matchMedia("screen and (min-width: 768px) and 
(max-width: 991px)");
var mqlLarge = window.matchMedia("screen and (min-width: 
992px)");window.addEventListener("resize", function(){ 
if(mqlSmall.matches){ console.log('resize small device'); }
else if(mqlMedium.matches){ console.log('resize medium device'); }
else if(mqlLarge.matches){ console.log('resize large device'); }}, true);

The above example is very simple, as we would need to add a debounce on 
to the resize event, and add method calls instead of calling the 
console.log.

My suggestion is to extend the addListener method so this will look more 
like

var mqlSmall = window.matchMedia("screen and (max-width: 767px)");
var mqlMedium = window.matchMedia("screen and (min-width: 768px) and 
(max-width: 991px)");
var mqlLarge = window.matchMedia("screen and (min-width: 992px)");

mqlSmall.addListener('resize', function(){
console.log('resize small device');
});

mqlMedium.addListener('resize', function(){
console.log('resize medium device');
});

mqlLarge.addListener('resize', function(){
console.log('resize large device');
});

The benefit being the browser could take away the need for this logic in 
our javascript, and this could potentially offer performance benefits as 
the browsers can optimise how this is implemented.

I hope this email makes sense, I would love to discuss peoples thoughts 
on this an whether this could make it into the specification.

Thanks

Jonathan