11 replies [Last post]
moody
moody's picture
Offline
Regular
croatia
Last seen: 12 years 1 week ago
croatia
Timezone: GMT+1
Joined: 2003-09-21
Posts: 29
Points: 0

So my current job is to find a way to hide all my css from Netscape 4.x and similar non standard browsers.

Along with that I can't have a the "Flash of Unstyled Content" (FOUC) because the target audience is 98% IE 6.0.

I've been [url=http://www.csscreator.com/css-node/687 about this for some time and been working on it for longer than that.

I've done all the tricks like at the http://www.thenoodleincident.com/ and the one at the http://www.bluerobot.com/. I've done so many searches on this I think Google has me blacklisted and yet....nothing. I'm still getting the FOUC!

Anyone? Anyone? Any ideas? Please?

Thanks!

p.s. and not only all this, BUT the styles are leaking through to netscape 4.8!!!!!!!!!! (i think the paralysed brain thing is contagious.!)

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 days ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

i can't stop the FOUC

Why not get rid of the @import and just have

<link rel="stylesheet" type="text/css" href="style-sheet.css" />

Regards
Day

The only way to learn is to do it yourself

moody
moody's picture
Offline
Regular
croatia
Last seen: 12 years 1 week ago
croatia
Timezone: GMT+1
Joined: 2003-09-21
Posts: 29
Points: 0

i can't stop the FOUC

becuase i must hide the css from non standard browsers

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

i can't stop the FOUC

Hi moody,
Have you tried using link to link to a css page that imports the true styles?

Can you explain what you have tried so we might make other suggestions.

moody
moody's picture
Offline
Regular
croatia
Last seen: 12 years 1 week ago
croatia
Timezone: GMT+1
Joined: 2003-09-21
Posts: 29
Points: 0

i can't stop the FOUC

Ok, here it is, but please don't laugh. It's a hybrid and due to time constraints and having others on the development team who know nothing about standards, its partial tables and that is only on the right window. I’ve created this template for you: URL no longer available

That does not FOUC and that is what we're working with. But it's passing the css on to "non standard" browsers. It’s minor stuff, but still it ought not to, yea? My test for this is Netscape 4.8 and URL no longer available doesn’t pass the css but FOUCs me everytime.

Of course this is going to FOUC you:

<head>
<title>Webpage Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
@import url("cssp.css"); /* this is ideally mosty for the layout */
@import url("main.css"); /* this is ideally mosty for fonts and formatting and such */
@import url("student.css"); /* this is server determiined based on login   */
</style>
<!-- here is a some serverside code for cache demons -->
</head>

but if we change it to this:

<head>
<title>Webpage Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="fouc.css" />
<link rel="stylesheet" type="text/css" media="screen" href="student.css" />
<!-- here is a some serverside code for cache demons -->
</head>

and add the fouc.css that I’ve brazenly taken from http://www.thenoodleincident.com and put in the style sheets like this:

@import url("cssp.css");
@import url("main.css"); 

then it ought to work. But no.

Before you reply and tell me “It’s not FOUCing me!”, keep in mind that there is a bit of server side code that I can’t reproduce for you there. In the head tag this is what you don't see:

<!--- Bye-Bye Caching --->
<cfheader name="Expires" value="-1">
<cfheader name="Pragma" value="no-cache">
<cfheader name="cache-control" value="no-cache, no-store, must-revalidate">

This also repeats at the bottom of the page:

</body>
<head>
<!-- this is here as someone's idea as a double security to cache demons -->
<cfheader name="Expires" value="-1">
<cfheader name="Pragma" value="no-cache">
<cfheader name="cache-control" value="no-cache, no-store, must-revalidate">
</head>
</html>

And if any of you know what this is about and have a better idea how to get around the double header, then your thoughts are most welcomed.

(also if any one knows how's what it is about my links that doesn't make this page validate http://validator.w3.org/check?uri=http%3A%2F%2Firenology.org%2F001%2Fdebugfouc.html then great!)

So, what you’ve learned here is that my requirements are not nice. No caching, no FOUCing, and no css passed on. I’m in hell!

I’ve done the adding of the link elements. I added six of them once in-between and scattered all throughout the head element. I also spiced it up with some empty script tags. Yet, nothing.

O and here’s a side ticker for you: I don’t see FOUC on my machine, yet if I go to another machine I see the FOUC. (Yes, I’m having fun with this acronym.) And to add to that the whole development team (eight of them) keep telling me each time they see the FOUC. I’m the junior member on the team, yet I’m the one responsible for the XHTML/CSS conversion. After reading blogs and articles from the likes of the http://www.mezzoblue.com/secondvoice and http://www.9rules.com/cssvault/, they say, “Yea, we want that! And you’re going to give it to us.” Then they see the new Sprint PCS site and say, “Hey Moody, why can’t you being doing that kind of stuff for us?” (O and I’m 5000 km away from them.) (O and I think I’m going to start my own blog, soon.) (O, but then I have to start learning something like movabletype or something like PHP or something!)

I’m sorry for venting on this forum like this. It’s not ya’lls fault. But it is if you don’t help me! (ad humour and joke….ha…ha…ha….just kidding.) This post is way too long to make sense anymore, so I will stop here and anxiously await the brilliance and the knack that exist in all you masterminds in the form of replies!

Cheers!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 days ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

i can't stop the FOUC

Moody

I would suggest changing the location of each import and link to see iff the read order of the browser helps

try
link
@import

and then

@import
link

If that does not work then you have to go back to basics and just use link with hacks with the stylesheet to hide from non standard browsers.

For example this- http://css-discuss.incutio.com/?page=CaioHack

At the end of the day, its the 95% that use IE that should be catered for.

Here is the whole list of different hacks http://css-discuss.incutio.com/?page=CssHacks
and somehting else that may help http://centricle.com/ref/css/filters/
Regards
Day

The only way to learn is to do it yourself

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

i can't stop the FOUC

Hi moody,
Validating looks like the easy part, just change "&" in links to "&amp;" that should get id of most of your errors.

Possibly it's not FOUC that your experiencing well at least I didn't when looking at your site. It may just be the tables waiting for all the content before loading. Try adding this to your CSS.
table{table-layout:fixed;}
That should help the tables load a little quicker in IE, as they don't wait for all the content just base their dimensions on the first row.
It may cause problems if other rows have wider content but give it a try.

Hope that helps

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

i can't stop the FOUC

Hi moody,
Validating looks like the easy part, just change "&" in links to "&amp;" that should get id of most of your errors.

Possibly it's not FOUC that your experiencing well at least I didn't when looking at your site. It may just be the tables waiting for all the content before loading. Try adding this to your CSS.
table{table-layout:fixed;}
That should help the tables load a little quicker in IE, as they don't wait for all the content just base their dimensions on the first row.
It may cause problems if other rows have wider content but give it a try.

Hope that helps

seb
Offline
Enthusiast
Last seen: 12 years 42 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

i can't stop the FOUC

I'm not very up on N4 issues. I presume you're saying that import will not work in N4?

In that case use <link...> to link to your main css file. And in that file have no rules but link to all of the others with @import. That's what I use, and I have no FOUC on my site. And N4 should ignore those imports and will use an empty stylesheet.

edit: I see tony has already suggested this. Have you tried it?

- seb

moody
moody's picture
Offline
Regular
croatia
Last seen: 12 years 1 week ago
croatia
Timezone: GMT+1
Joined: 2003-09-21
Posts: 29
Points: 0

i can't stop the FOUC

Tony!

By god I think you've stuck a nail in my head. I won't be adding the selector just yet because I'll be getting rid of those tables.

In the meantime, I'm slapping my face from basic stupidity because my NN4 issue was caused by my server generated/decided CSS not being @import'ed.

Now I can work on getting rid of those right tables and ironed out in XHTML/CSS, and then my header will look something like this:

<head>
<title>DEBUGGGGGGG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="/CSS/fouc.css" />
<style type="text/css" media="screen">@import "/CSS/<cfoutput>#stylesheet#</cfoutput>";</style>
</head>

But what's this about changing "&"s in links to "&amp;"s? Is this what everyone else does besides me? I tried this locally and it seems to work just great. Is there anything I need to know about this down the road?

Thanks for pointing things out to me, folks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

i can't stop the FOUC

Hi moody,
Yes everyone will change "&" to "&amp;" or it's numeric entity equivalent "&" if they want to validate their site.
They need to be used throughout the whole document not just links.
Here are a couple of other common ones

< : &lt; less than. 
> :  &gt; greater than. 
" : &quot; quotation mark. 
  : &nbsp; space. 
There are many more, do a quick search on "character entities" and you will find pages with list of the entities to use.

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 12 years 37 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

i can't stop the FOUC

This is a real easy way to clean up those URLs:
http://www.hivelogic.com/urlcleaner.php