Hi group,

Thought for completion I thought I'd show the finalised valid code.

I didn't like breaking validation by using either:

<head>
                ...
                <noscript>
                                <link rel="stylesheet" href="noscript.css" 
type="text/css" media="all" />
                </noscript>
                ...
</head>

Or:

<body>
                ...
                <noscript>
                                <link rel="stylesheet" href="noscript.css" 
type="text/css" media="all" />
                </noscript>
                ...
</body>

In the end I opted for adding the CSS to the standard file.
Accepting the extra 4052 B file-size hit which everyone now gets.
The method employed required preceding each "No JS" specific selector with 
".noJS".
Then:

<head>
                ...
                <style type="text/css">
                                All styles severed here.
                </style>
                ...
</head>
<body class="noJS">
                  <script 
type="text/javascript">/*<![CDATA[*/document.body.className="";/*]]>*/</script>
                ...
</body>


Thanks


Mike Foskett
http://websemantics.co.uk/






On Thu, Jul 14, 2011 at 12:36 PM, Foskett, Mike 
<mike.fosk...@uk.tesco.com<mailto:mike.fosk...@uk.tesco.com>> wrote:
Hi all,

Just finished a major update for Tesco's homepage.

                http://www.tesco.com/

Tesco's are the UKs largest retailer and this page gets approximately 1 million 
hits a day.

The page has been speed tweaked as much as possible given IT / server 
restraints.
Unfortunately the page now fails W3C formal grammar validation.

Because the page as designed was a massive 1.4MB (previously 260 Kb - 330 Kb), 
JavaScript was used to fetch image upon demand rather than on-load or post-load.
This greatly reduced the impact on the servers (critical) and improved the 
initial page load speed.

Obviously a no JavaScript version was also required.

The image references cannot be in the standard CSS as IE loaded all the images, 
used or not:

                .noJS .imgRef {background:url(...)}

Will not work.

All the image references were placed into a separate CSS noJS.css and the link 
in a <noscript> and this is where the validation breaks.
Apparently <noscript> is illegal in the <head>, and a <noscript> containing a 
<link> is illegal in the body.

                <noscript>
                                <link rel="stylesheet" 
href="/homepages/default/noJS.compressed.css" type="text/css" media="all" />
                </noscript>

I went for placing it in the body so the noscript is legal but the link 
reference is not.

I can see no alternative, and wondered if any of the list members had a more 
valid solution?


Regards,

Mike Foskett
http://webSemantics.co.uk/<http://websemantics.co.uk/>

________________________________
This is a confidential email. Tesco may monitor and record all emails. The 
views expressed in this email are those of the sender and not Tesco.

Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31

*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org<mailto:memberh...@webstandardsgroup.org>
*******************************************************************



*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************

Reply via email to