Test-Driven Progressive Enhancement

Scott Jehl spricht auf A List Apart über die Möglichkeit mit JavaScript verschiedene “Fähigkeiten” eines Browsers/Clients abzufragen.

Not long ago, we found that we could test portions of a device’s CSS support using simple JavaScript. It started with a simple box model test:

function boxmodel(){

 var newDiv = document.createElement('div');

 document.body.appendChild(newDiv);

 newDiv.style.width = '20px';

 newDiv.style.padding = '10px';

 var divWidth = newDiv.offsetWidth;

 document.body.removeChild(newDiv);

 return divWidth == 40;

}

Using the function above, we can pose the question, if(boxmodel()) to find out if a browser properly supports the CSS box model. If a feature is properly supported, we can safely enhance our page using this feature.

With this idea in mind, we wrote additional functions to test support for other CSS properties, such as:

  • float
  • clear
  • position
  • overflow
  • line-height

But testing CSS support doesn’t cover everything. Fortunately, we can also use techniques such as object detection to test a browser’s JavaScript support.

  • document.createElement()
  • document.getElementById()
  • xmlHttpRequest()
  • window.onresize()
  • window.print()

We found that by running all of the tests above, we could get a good idea of whether or not a device would properly display the enhanced version of most of our clients’ web applications.

Für viele Seite sicherlich overkill aber ein interessanter Ansatz.

Possibly related posts (automatically generated)