CSS and NN4 - What do you do?

Do you take steps to acccomodate NN4 users?

[Nick_W]

Hi all,

Just doing some site building here with a nice beer ;) -- Was wondering how many people that build with CSS actually take steps for NN4. And what those steps are?

Personally, for my own sites. I just @import the stylesheet and take the I Don't Care route.

I know I lose potential customers but they're my sites and I'm afraid I really don't mind losing a few folks...

What do you do, and how important is it to you?

Nick

[buckworks]

I use @import to provide a separate stylesheet for NN4.

What NN4 users see will be much plainer than what others see, but it will have some basic styling, the colour theme will be sustained, etc.

[tedster]

I usually use javascript (if document.layers) to write a separate stylesheet for NN4 exceptions. But I just finished the first site where I gave NO consideration whatsoever to NN4 -- and that feels very liberating!

If you look at this site in NN4, it's one of those really ugly messes, with images and text thrown all over the place. The client was on a tight budget and we decided to sacrifice NN4 for the sake of a really elegant presentation in the more advanced browsers.

Their logs showed 1.2% NN4 visits, and they sell a very elegant product that will convert much better with a very elegant treatment - so the sacrifice was a conscious decision.

[Nick_W]

usually use javascript (if document.layers)

Care to share that code snippet tedster? ;)

Nick

[pageoneresults]

Care to share that code snippet tedster?

I'd be interested too! I've been using the @import command since tedster first brought it up way back when. Problem is, when you validate your css, you get a long list of warnings telling you to redefine the styles because the validator sees both style sheets.

I spend way too much time getting sites to look identical in NN4.x and then all the other browsers. Usually what I'll do is design the primary style sheet, work out all the bugs, and then do a save as style-eek-nn.css. From there I'll strip away, or modify the offending styles. Works like a charm all the time and the sites look almost identical. Since I'm not using all the CSS2 stuff, there haven't been many issues to contend with.

[tedster]

Something about the @import solution/hack has always bothered me - namely, it's just not intuitive. The biggest issue for me has become site maintentance. When we use @import to overwrite a stylesheet that was written just for Netscape 4, then our first style declarations are the EXCEPTIONS and the later CSS is the well behaved, standard stuff.

When I write my CSS like that, I keep changing the wrong stylesheet when it comes to maintenance time. I want my exceptions to come last in the cascade, not first!

What I now do is write the main stylesheet for advanced browsers and then I use this javascript to bring in the Netscape 4 exceptions later in the cascade - usually by calling this javascript after the main set of <style> tags:

if (document.layers)
{document.write('<link rel=stylesheet href="nn4.css">')
}

Since Netscape 4 is the ONLY browser that has document.layers, this works just fine.

Now you might ask, what if the user has javascript disabled? Well, Netscape 4 MUST have JavaScript enabled for there to be any CSS support at all. Netscape never built true CSS code until version 6 - they just kludged on top of their JSS (javascript style sheets) code. So this method is skipping over no one.

The end result is just what I was after - the "main" stylesheet for the pages is the obvious one, and the home for any Netscape 4 exceptions and workarounds is also obvious.

[pageoneresults]

tedster, can I use that javascript in an external js reference or does it need to be in the head?

[SuzyUK]

I ignore NN4 too I'm afraid...but I do include this..with the div id ahem set to display: none;

<div id="ahem">
This site will work and look better in a browser that supports <a href="http://webstandards.org/act/campaign/buc/" target="_blank" title="The Web Standards Project's BROWSER UPGRADE initiative.">web standards</a>, but it is accessible to any browser or Internet device.
</div>

I came across it while learning CSS and note if you've also been using this link then the link address has changed quite recently (I kept getting 404 errors in my logs and this was one of the causes..).

I suppose that I feel that if I'm going to ignore the non CSS browsers I should at least tell them where they can go (not literally ;)) if they want to upgrade. Of course if they're viewing through a WAP phone then they're not bothered anyway...

And I always place importance on my page structure to make sure that the page makes sense in what ever format you're viewing...

Just My way
Suzy
:)

[tedster]

can I use that javascript in an external js

Absolutely, yes. I often place it as the first line in a more substantial js file. Just make sure to call the js file AFTER the <style> tag so the cascade works properly for NN4.

[edited by: tedster at 8:27 pm (utc) on Dec. 15, 2002]

[tedster]

I ignore NN4 too I'm afraid...but I do include this..with the div id ahem set to display: none;

Suzy, doesn't that approach give Netscape 4 a sub-standard page, but no "ahem" div? After all, NN4 is a CSS browser -- just a very early one, and therefore buggy.

[SuzyUK]

Suzy, doesn't that approach give Netscape 4 a sub-standard page, but no "ahem" div? After all, NN4 is a CSS browser -- just a very early one, and therefore buggy.

Tedster no...I don't think they are getting a "sub-standard" site they are getting the same appearance as any other text browser,

They will only get to see that "ahem" link if their browser does not support CSS. I pay a lot of attention to the text appearance of my sites for many more reasons than just NN4..

the link to the upgrade page only appears if the page does not support css so I think it's the best of both worlds (especially for NN4) at the minute..

I'm not saying my method is correct..but when I "style" my site I only have to do it twice..for compatible or non-compatible browsers

times will move, things will change and so will I, but until then....

Suzy

[edit]sp?[/edit]

[tedster]

Ah, I wasn't quite getting your approach, Suzy. You're using @import for CSS and serving NN4 no stylesheet at all, I assume.

Makes sense to me now.

[SuzyUK]

Yea..Tedster that's it..

no stylesheet for them at all I'm afraid..but, the big but is..I'm presuming that what I read in text is what they're going to see...So in my defence I'm not ignoring them I'm just dealing with it in a different way..

Just think about it...if you keep bending over to give them what they expect to see, they're not going to change are they!

I've had to change my operating system a couple of times times because it didn't support something or another..so why are we being so "gentle" over a stylesheeet...as long as the thing works in some fashion it should be enough...shouldn't it?

Suzy

[pageoneresults]

Absolutely, yes. I often place it as the first line in a more substantial js file.

I wonder what I'm doing wrong. I've tried this twice now in the past few months and can't get it to work in the external file. I did put the js right at the top of my js file and it is being called after the other external style references. Arrrggghhh!

[tedster]

I wonder what I'm doing wrong.

By any chance have you taken the js from the HTML file and pasted it directly into the js file, leaving html comment tags around the javascript code?

[pageoneresults]

You mean to tell me that these...

<!--

// -->

...don't belong at the beginning and end of the js file? I've always wondered about that, but everything appears to be working fine with them. What gives?

[pageoneresults]

Tried that too, still no go. I'll do some more testing when time permits.

On a side note, I removed the opening and closing comments tags from the .js file. All else appears to be working fine without them.

Why does it work with them too?

[Nick_W]

Not sure, hopefully this shameless bump will get us an answer ;)

Nick

[copongcopong]

I just make it sure that links and navigation toolbar on the pages would work for in NN4.

Maybe it would be better to convince them to try phoenix (http://www.mozilla.org) instead. :)

[Chuma]

My site uses tables for the layout of the pages so I made sure to check every page to see that there is a closing table tag.

Also, if you are using tables with NN4 you have to put the class="X" in every table cell you want to change the style of as just putting it in the table opening tag doesn't work.

Thanks.

[andreasfriedrich]

You mean to tell me that these...
<!--

// -->

...don't belong at the beginning and end of the js file?

They donīt!

The syntax of script data depends on the scripting language.

[w3.org ]

Since comments are defined in ECMA-262 (JavaScript) as follows

Comment ::
MultiLineComment
SingleLineComment

MultiLineComment ::
/* MultiLineCommentCharsopt */

MultiLineCommentChars ::
MultiLineNotAsteriskChar MultiLineCommentCharsopt
* PostAsteriskCommentCharsopt

PostAsteriskCommentChars ::
MultiLineNotForwardSlashOrAsteriskChar MultiLineCommentCharsopt
* PostAsteriskCommentCharsopt

MultiLineNotAsteriskChar ::
SourceCharacter but not asterisk *

MultiLineNotForwardSlashOrAsteriskChar ::
SourceCharacter but not forward-slash / or asterisk *

SingleLineComment ::
// SingleLineCommentCharsopt

SingleLineCommentChars ::
SingleLineCommentChar SingleLineCommentCharsopt

SingleLineCommentChar ::
SourceCharacter but not LineTerminator

the opening SGML comment delimiter "<!--" is illegal^*. The closing delimiter is ok since it is contained in a single line comment.

Further evidence that the opening comment does not belong there is this:
The first paragraph under 18.3.2 Hiding script data from user agents [w3.org] explains about using the comments. The second paragraph starts with Another solution to the problem.

Andreas

---

The HTML4.01 spec states the following:

The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and ignores further characters until the end of the line.

I am not really sure how they can make such a statement about JavaScript in a normative section of the HTML spec. I guess it needs to be interpreted as simply being descriptive.

[pageoneresults]

For the javascript laymen (such as me), the W3 might as well be written in a foreign character set! ;)

The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and ignores further characters until the end of the line. JavaScript interprets "//" as starting a comment extending to the end of the current line. This is needed to hide the string "-->" from the JavaScript parser.

The part I've italicized is what confuses me. They say a smart scripting engine will execute the script properly. How many dumb ones are there?

The way I read the above is if you comment like this...

<!-- // -->

The two slashes are used to hide the closing comment --> from the parser. Why the heck would someone even need to use SGML comments in an external file? I'm not clear on why they would be there to begin with. Heck, I'm looking at backed up js files that are two years old and all of them had the opening and closing comments. I never noticed an irregularities when browsing to those sites either. Maybe the browsers I've been using utilize the smart scripting engine and not the dumb one. ;)

P.S. tedster, I still can't get this javascript import to work, arrrggghhh. It's on my priority list as soon as time permits. Thanks for everyone's assistance. We kind of got off base here from the original topic.

[HarryM]

My solution is to have several external stylesheets. Browser sniffing is done by PHP (it used to be Javascript) and the appropriate links written to the page.

The first stylesheet contains all the stuff necessary for text - spans, headers, paragraphs, anchors, image sizes, etc. This sheet is provided to all browsers.

The second contains all the layout stuff, divs and tables. This goes to all browsers except NN4.

Then there are two sheets which contain browser specific stuff. One gets supplied to IE and NN6, and one to Opera and NN7.

I had thought of producing a sheet which would help the NN4 display, but it seems that NN4 usage is dropping fast. I hope that's not wishful thinking! :)

[WibbleWobble]

copongcopong:
Personally, I'd actually suggest people wanting standards-conforming browsers use Mozilla over Phoenix, because despite their shared code, Mozilla always renders to CSS2 specifications, while Phoenix does - in some admittedly rare cases - render the same page wrong.
Only once have I seen phoenix render CSS so badly it was almost crippled, but a few other times in the last week or so it has mis-rendered small sections of code - a border here and there, little things.

Still, I think its worth taking note of.

[tedster]

pageone - if you copy/paste the external code back into the head of the HTML, does it still work?

[bill]

<edit>thought I had this external link thing figured out, but I was wrong...</edit>