Guymon

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.

Ajax Kritik

Rant bei dev.opera Stop using Ajax!.

The emergence of Ajax techniques has inspired a whole new wave of applications, but in many (if not most) cases, these applications don’t actually need Ajax to work - it’s simply that we hadn’t thought of them before. It’s easy to assume that the evolution of ideas follows an unbroken chain of cause and effect, but this isn’t really the case; evolution is as random as it is deterministic, and we can cherry-pick the best ideas – we can build Web 2.0 applications without using Ajax.

Yea, denn ich surfe nie ohne aktiviertes NoScript, was 50% des Webs de facto unbenutzbar macht.

Progressive Enhancement mit CSS 3

Schöner Artikel über Progressive Enhancement mit CSS 3 bei dev.opera:

In this article I will look at how you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

Progressive Enhancement mit YUI

Christian Heilmann beschreibt im Opera Developer Network die Idee hinter YUI und Progressive Enhancement.

This is the case for Yahoo! and they realized that tackling these issues from scratch over and over again is a huge waste of time. This is why they developed a library that first and foremost works around all the browser differences and allows developers to build web sites starting from a clean slate. They called it the Yahoo! User Interface Library (YUI) and made it available for the world to use.

Later on we will discuss all the different things the YUI provides to make your life quicker and simpler such as CSS and JavaScript components, and widgets. The first thing to consider when creating the YUI however was to define some boundaries in which to move.

jQuery Flash Plugin

Luke Lutman hat sich für das jQuery Flash Plugin durch SWFObject, UFO and sIFR inspirieren lassen.

Das Ergebnis sieht sehr praktisch aus:

$('#hello').flash({

 src: 'hello.swf',

 width: 320,

 height: 240,

 version: '6.0.65',

 expressInstall: true

});

Pages are progressively enhanced when Flash and Javascript are available, and fallback to plain (X)HTML when they’re not — like search-engines, pdas or mobile phones. Replacements can happen as soon as the dom is ready. (X)HTML, CSS and Javascript stay where they belong — away from one another — making it easy to remove, update or swap out down the road.