Headcase.js test page

Cases on this page

<meta name='case' content='small' media='(min-width:0px) and (max-width:450px)' />
<meta name='case' content='medium' media='(min-width:450px) and (max-width:760px)' />
<meta name='case' content='wide' media='(min-width:760px)' />

Usage with css:

Case:

.case-small .css-text:after {
  content: 'Small';
}
.case-medium .css-text:after {
  content: 'Medium';
}
.case-wide .css-text:after {
  content: 'Wide';
}

Usage with javascript

document.addEventListener('DOMContentLoaded', function() {

  //Handle a particular case change
  document.getElementById('small').addEventListener('caseChange', function(event) {
    console.log('case small:', event.detail.matches);
  }, false);

  //Handle any case change
  document.addEventListener('caseChange', function(event) {
    console.log('caseChange.detail', event.detail);
  }, false);
  
}, false);

(Fiddle with the browser window width and check your inspector console.)