graceful degradation. Check CSS support

[peterm...@gmail.com]

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]

peterm...@gmail.com wrote:
<snip>

> 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.

[scrip...@gmail.com]

peterm...@gmail.com написав:

> 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

[peterm...@gmail.com]

Hi Richard,

Thanks for the reply.

Richard Cornford wrote:
> peterm...@gmail.com wrote:
> <snip>
> > 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 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
<URL: http://gmail.com> and looking at the source.

> > 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.

Great suggestion. Thanks.

Peter