Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
General Web Standards: Serving an alternate stylesheet if the user has JavaScript disabled
Bottom of Page1 to 5 of 5
-
-
CommentAuthorchristopher
- CommentTimeOct 31st 2006
Right, what has this got to do with the category Web Standards, well in XHTML you cannot use the <noscript> tag in the <head> section of XHTML documents.
What I needed to do for my site [edg3.co.uk] was to serve a different stylesheet if the user doesn't have JavaScript enabled. This could be done quite simply via the below contained within the <head> tag:<link rel="stylesheet" href="style_script.css" type="text/css" media="screen" />
<noscript>
<link rel="stylesheet" href="style_noscript.css" type="text/css" media="screen" />
</noscript>
Now unfortunately that doesn't validate as XHTML, so I needed to find a different way of doing this. Instead of loading a stylesheet for users without JavaScript, I tryed the reverse, using my non-JavaScript css as default, then loading in a secondary stylesheet if the user has JavaScript enabled, I thought this could be simply done via this:<link rel="stylesheet" href="style_noscript.css" type="text/css" media="screen" />
<script type="text/javascript">
document.write('
<link rel="stylesheet" href="style_script.css" type="text/css" media="screen" />');
</script>
But that doesn't validate either, turns out that the "document.write" function isn't correctly parsed when using XHTML, I found that out here:
http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite
Does document.write work in XHTML?
No. Because of the way XML is defined, it is not possible to do tricks like this, where markup is generated by scripting while the parser is still parsing the markup.
You can still achieve the same effects, but you have to do it by using the DOM to add and delete elements.
So I couldn't do that.. great, so now what? Well you may not be able to serve the JavaScript document.write inside of the XHTML, but you can serve it from an external JavaScript file, like so:
Within the <head> tag of your XHTML document<script type="text/javascript" src="script.js"></script>
Contents of script.jsdocument.write('<link rel="stylesheet" href="style_script.css" type="text/css" media="screen" />');
..and that works! So after many hours of figuring out a way to serve a different stylesheet I finally worked out a way to do it, and to get it to validate, well I'm happy anyway, and I'm sure anyone browsing my site without JavaScript will also be happy now.
Using my site as the example here, edg3.co.uk
With JavaScript, you get a JavaScript image preload screen, it's a 100% width by 100% height div that covers the screen, then fades in after the images are loaded, now without JavaScript, you would just see the 100% by 100% black div and no content.. because the JavaScript that fades it in after the images are loaded cannot function!
So users without JavaScript could not get into my site, hence needing the solution, all that I needed to do was to serve a stylesheet that set the preload div to "display: hidden" so it doesn't appear, yet I needed to go through all of the above to get it working, how frustrating!
--
Did the above help anyone, or could anyone have told me this yesterday before I spent a few hours sorting this out, just curious how others do it / would have done it.
Also any comments on my site, edg3.co.uk, whilst I'm discussing the solution I used for it? Thanks -
-
- CommentAuthorljromanoff
- CommentTimeOct 31st 2006
Does document.write work in XHTML?
No. Because of the way XML is defined, it is not possible to do tricks like this, where markup is generated by scripting while the parser is still parsing the markup.
While this is true, in your case it does not apply because you have your content type set to text/html - meaning that your document is not actually being parsed as XML.
Incidentally, when I read your problem my thoughts for a solution were the same as what you came up with. -
-
CommentAuthorchristopher
- CommentTimeOct 31st 2006
Yeah the above in italics was just something I read, link mentioned in first post, didn't actually cross my mind it may not have applyed to me due to how I'd set the content type! Although even if it didn't apply to me it still failed validation, so I had to figure out a different option, oh the joys of making your site accessible to every user.
Now I need to code a timeout for the script as if an image fails to load when JavaScript is enabled, once again you can't access the content of the site.. and before everyone asks why I'm keeping the preload function if it causes so many problems, is because lots of people have emailed me saying what a cool feature and how it provides smooth page transitions etc. Also I don't ever admit defeat so I'd rather find (read: create) a solution ;) -
-
I would include your script-dependent CSS as an alternate stylesheet and then use javascript to activate it
<link rel="alternate stylesheet" href="http://www.edg3.co.uk/wp-content/themes/edg3/style/edg3.css" type="text/css" media="screen" title="scriptstyles" id="scriptstyles" />
<script type="text/javascript">document.getElementById("scriptstyles").disabled = false;</script> -
One method I picked up from AListApart that works pretty well-- tag the BODY of the document with a specific class using Javascript, then set JS-only rules using that class. For instance:
...
<body>
<script language="JavaScript" type="text/javascript">
// You may want to wrap this in any compatibility-testing you desire
document.body.className = "jsenabled"; // Use += and a leading space if body already has a class
</script>
...
In the CSS:
#navlink {
display: block; /* Default if JS is disabled. This line may or may not be redundant, but it's for demo purposes. */
}
.jsenabled #navlink {
display: none; /* Hide this if JS is enabled. The tacked-on "jsenabled" class of the body makes this work. */
}
1 to 5 of 5