Saturday, November 21, 2009
Iceman and the Multicolumned Marquee
Blog Entry #163
Today we kick off a tour of HTML Goodies' "JavaScript Browser Test Scripts" collection of tutorials.
We'll begin with the third of these tutorials, "Redirect Based on Browser Type", because this tutorial presents a script almost identical to one we've analyzed previously. Specifically, "Redirect Based on Browser Type" briefly discusses the browser sniffer script authored by "Iceman" that is the subject of HTML Goodies' JavaScript Script Tips #13-15. The "Redirect Based on Browser Type" script is posted here; the Script Tips #13-15 script is located here. Actually, there is a small-but-significant difference between the final if blocks of these scripts, which we'll comment on later.
We covered the Script Tips #13-15 script in Blog Entry #57; that was about three years ago, and I don't really have anything to add to the deconstruction in that entry. My fundamental criticism of the script still stands, namely, if you're going to send most MSIE users to a common msiepage.html page and most Netscape users to a common nspage.html page, then there's no point whatsoever in flagging different MSIE/Netscape versions via their navigator.appVersion and navigator.userAgent returns. However, Joe intimates here that the common routing was his doing, and I have no idea what Iceman himself wanted to do with his various browser version tests.
Written in 1997, Iceman's script can be viewed as a snapshot of sorts of the chaotic state of Web standards in the late 1990s. Perhaps there really was a need to distinguish between MSIE 4.0b1, MSIE 3.02, MSIE 4.0b2, etc. back in the confusing old days, before the advent of HTML 4 brought a measure of stability to the coding of Web pages. Thankfully, the standardization of modern browsers - and a now-widespread recognition on the part of Web authors that the use of proprietary code should in general be avoided - make browser sniffing much less important than it used to be.
In practice
Joe didn't provide a demo for Script Tips #13-15 but does so for the "Redirect Based on Browser Type" tutorial. Joe puts Iceman's script in the source of this page, which accordingly directs would-be MSIE users to a "Browser Page - Explorer" page and would-be Netscape users to a "Browser Page - Netscape" page. The usage share of the browsers flagged by the first seven if statements in Iceman's script should be negligible; fortunately, the script's last two if statements allow the demo to work with modern browsers:
var r;
var browser = navigator.appName;
if (browser == "Netscape") {
// If browser is Netscape and Supports JavaScript go to Netscape Page
parent.location.href = "nspage.html";
r = 1; }
if (r != 1 && r != 2) {
/* If browser is not Nestcape or MSIE known versions go to MSIE page - caters for any other JavaScript Browsers */
parent.location.href = "msiepage.html"; }The navigator.appName return for both Firefox and Safari is Netscape - check out the "Additional browsers' Navigator Information" section of JavaScript Kit's navigator object page - and therefore users of these browsers will be sent to the "Browser Page - Netscape" page by the script's eighth if block.
In turn, MSIE 5+ and Opera users are sent to the "Browser Page - Explorer" page by the script's ninth and last if block. These users would be sent to a "text-based" textpage.html page by the corresponding if block in the Script Tips #13-15 version of Iceman's script. (An aside: contra what Script Tip #14 suggests, Lynx users would not be redirected to the textpage.html page or anywhere else by the script because the Lynx browser does not support JavaScript.)
Now, what do we have on the "Browser Page - Explorer" and "Browser Page - Netscape" pages? Here's where things get a bit more interesting.
The marquee element
Joe festoons the top of the "Browser Page - Explorer" page with a marquee element. First implemented by Microsoft in MSIE 4 - the MSDN Library's current marquee element/object page is here - the marquee element moves its content in a scroll-like manner across the viewport, for example:
Layout-wise, the marquee element is like the div element in that it's a block-level element, it has an effective width of 100%, and it has a %flow; content model, i.e., it can contain both block-level and inline children - it's not just a textual element. The marquee element moves its content right to left by default; via its direction and behavior attributes, it can alternatively move its content left to right, up to down, down to up, or even back and forth:
Diagonal motion is possible via the nesting of marquee elements:
<marquee direction="right"><marquee direction="up">Hello world!</marquee></marquee>The marquee element loops its content infinitely by default, although it has a loop attribute for setting a finite number of content loops; the looping speed can be increased/decreased via scrollamount and scrolldelay attributes. The marquee element also has attributes that style it in more conventional ways: there's a bgcolor attribute that will give it a background color, width and height attributes for respectively setting its width and height, and hspace and vspace attributes for respectively setting horizontal and vertical margins around the marquee box.
At the time that "Redirect Based on Browser Type" was written, the marquee element was indeed
an Explorer-only deal, but this is no longer the case. At the bottom of the "Browser Page - Explorer" page, commenter Ron correctly notes,
Need to update the info on this page. Firefox has no problem with the Marquee command.And it's not just Firefox: with the exception of Lynx 2.8.7, all of the OS X browsers on my computer - Firefox plus Safari*, Opera, Camino, and of course MSIE - support the marquee element (*Safari does not support the behavior="alternate" setting for the second demo above). Moreover, I can confirm, from testing in the SheepShaver environment, that Netscape itself began support for the marquee element with Netscape 7.x (Netscape 6.x doesn't support it).
HTML Goodies and the marquee element
The first paragraph of the "Browser Page - Netscape" page contains a link to a "So, You Want An Explorer Scrolling Marquee, Huh?" tutorial, which is problematic in several respects although this is not the time/place for sorting it out, but I at least want to point out that the current "Explorer Scrolling Marquee" page is missing a demo -
the hilariously funny joke in text form at the top of the screen- that can be seen on this archived "Explorer Scrolling Marquee" page.
The W3C and the marquee element
Wikipedia has an entry on the marquee element whose introduction in part states,
[The marquee element] is deprecated by the W3C and not advised by them for use in any HTML documents- this is not quite accurate. The HTML 5 Specification, which is currently at the "Working Draft" stage, has an "Obsolete features" chapter with a subsection devoted to the marquee element and a "Non-conforming features" section declaring that the marquee element is
entirely obsolete, and must not be used by authors...[u]se CSS instead.The marquee element does not appear in any of the W3C's earlier HTML specifications; HTML 4.01's list of currently deprecated HTML elements is here.
Because the marquee effect is a presentational effect, can be applied to a wide variety of renderable elements, and is widely supported, it makes sense that the W3C would bring it into CSS, and Wikipedia's "Marquee tag" page concludes with a link to the "marquee properties" section in CSS level 3's Basic Box Model module. Checking the W3C's "CSS Current Work" page, however, I see that the W3C is addressing the marquee effect more directly via a CSS Marquee Module Level 3 specification, which is at present "high priority" and at the "Candidate Recommendation" stage.
The multicol element
Joe marks up the first paragraph of the "Browser Page - Netscape" page with a multicol element. Implemented by Netscape in Navigator 3 - the multicol section in Netscape's HTML Guide for Netscape Navigator 4.x is here - the multicol element flows its content into columns of equal width. To the best of my knowledge, the multicol element is only supported by Navigator 3.x-4.x - like the layer element, the multicol element was jettisoned by Netscape for Netscape 6 - and therefore I am not inclined to discuss it. But if your browser did support the multicol element, the "Browser Page - Netscape" first paragraph would look more or less like this:
![[A multicol paragraph]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKzPIKyW8S7xWGQ3ARDZAU9hhF4tcP-yXZV28URns5gnAE05veQDw7DrQz4Yml8kYzeOPyGbUbzCTwWjlwXpasSF21B-tYBi4ORhoO60S1fUwaRCouhnLD0DI5deinNo0XLJjYw/s1600/multicolgraf.gif)
So, how might we create a cross-browser multicolumn display today, huh? My guess is that Mozilla would say, "Go use positioned divs for that," and that's probably what you should do for the time being. However, the aforecited "CSS Current Work" page reveals that the W3C is thrashing out a Multi-column Layout module in this regard.
I have to confess that I was unfamiliar with the marquee and multicol elements prior to working through the "Redirect Based on Browser Type" tutorial - you learn something new every day! Anyway, we'll look at another approach to dealing with proprietary code in the next post when we go through the first "JavaScript Browser Test Scripts" tutorial, "Internal Browser Test".
reptile7
- posted by A. Peak @ 6:33 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)