graceful degradation. Check CSS support

[petermichaux]

Hi,

I'm trying to do the right thing. I currently have a page that doesn't
have any JavaScript and the page works. The page works with CSS on or
off. Now I would like to add some JavaScript to enhance the page. The
JavaScript will rearrange some of the DOM and use CSS.

I am willing to put in the effort to try to ensure that the JavaScript
doesn't do anything if necessary JavaScript support for full
functionality is not available. This seems like a difficult task. I
will do the DOM rearranging onload but before doing this rearranging I
will have to check that even the code in the event handlers will work.
Like I will have to do something like this

if ( /* check every function I need is available */ ) {
// All my JavaScript here
}

Is the best way to do this?

It would be an equal failure if the JavaScript does anything if the CSS
is disabled. Can I check that the CSS is on?

Thank you,
Peter

 

[Richard Cornford]

I am willing to put in the effort to try to ensure that
the JavaScript doesn't do anything if necessary JavaScript
support for full functionality is not available. This seems
like a difficult task. I will do the DOM rearranging onload
but before doing this rearranging I will have to check that
even the code in the event handlers will work. Like I will
have to do something like this

if ( /* check every function I need is available */ ) {
// All my JavaScript here
}

Is the best way to do this?

That looks like a "gateway" test on initialisation, which is a completely
viable strategy for achieving clean degradation in may circumstances. It
seems a bit extreme to write "All my JavaScript here", as you would not
want all your code there (function declarations and the like), only the
code that starts things off.

It would be an equal failure if the JavaScript does anything
if the CSS is disabled. Can I check that the CSS is on?

That would depend a great deal on what CSS you were interested in. If,
for example, you were interested in absolute positioning, in browsers
that allowed the positions of elements to be determined (or estimated)
you could define CSS to put an element in one location (say an empty DIV
at co-ordinates 0, 0, but defined in the mark-up such that it would never
be in that position if flowed without CSS. Then onload you could look at
the element's position and if it were not where it would be expected to
be if CSS was applied deduce that CSS positioning was not being applied
to the document.

Richard.

 

[scriptguru]

(e-mail address removed) напиÑав:

Can I check that the CSS is on?
Thank you,
Peter

I think yo can use currentStyle and runtimeStyle for IE and
getComputedStyle() for Mozilla. Just try to read compured style and if
some specific style property != value set in CSS then CSS is off (but I
think it is almost impossible situation when JS is on and CSS is off).

Val Polyakh
http://trickyscripter.com

 

[petermichaux]

Hi Richard,

Thanks for the reply.

That looks like a "gateway" test on initialisation, which is a completely
viable strategy for achieving clean degradation in may circumstances. It
seems a bit extreme to write "All my JavaScript here", as you would not
want all your code there (function declarations and the like), only the
code that starts things off.

It looks like Gmail uses a gateway script* to direct users to various
versions of their sites: without JavaScript, with JavaScript capable of
AJAX, and a separate interface for cell phones. So instead of
gracefully degrading individual pages they have a gracefully degrading
site. Perhaps this will become a more important version of degradation
as modern browsers gain more features and writing a single page for
various browser vintages becomes more difficult and more limiting
compared with what is possible in modern browsers.

* You can see this script by disabling JavaScript and then going to

That would depend a great deal on what CSS you were interested in. If,
for example, you were interested in absolute positioning, in browsers
that allowed the positions of elements to be determined (or estimated)
you could define CSS to put an element in one location (say an empty DIV
at co-ordinates 0, 0, but defined in the mark-up such that it would never
be in that position if flowed without CSS. Then onload you could look at
the element's position and if it were not where it would be expected to
be if CSS was applied deduce that CSS positioning was not being applied
to the document.

Great suggestion. Thanks.

Peter