views:

164

answers:

4

I was over at the StarCraft2 website and decided to take a look at their source and saw this:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="layout/artwork.xsl"?>

<page lang="en_us">
  <artwork/>
</page>

... and that's it. So I was wondering, what's the point in using an XSLT if you're just using 2 tags? Is it to obfuscate the source?

Edit: I just want to clarify that I'm not asking how XSLTs work. I asking what is the advantage of setting up a page in this manner. It seems to me like a poor use of XSLTs.

A: 

The particular page for which you got the source may have been generated by a content management system.

Some content management systems publish all content as XML then HTML is generated by style sheets applied by the web server.

It is much less common that the web browser is responsible apply the style sheets though that seems to be what is happening in this case.

Tendayi Mawushe
It doesn't appear to be an `iframe`.
cdmckay
I only thought you might have selected an iframe because there was so little information in the page source. I still think it was a CMS generated web page though.
Tendayi Mawushe
+3  A: 

[EDIT] Providing the complete info in the source xml vs providing it in the stylesheet would be a subjective matter which would depend on the designer of the system. We could assume that in this case, that tiny xml is all that indicates the information pertaining to this page with the rest of the scaffolding coming in the imports/includes. OR that two different teams were working on page layout content and actual page hierarchies letting the layout designers alter content without changes to the xmls, but your guess is as good as mine. Usually this would be designed based on if that XML will be used anywhere else or if the layout information is needed wherever the XML can possibly be reused. If the layout information is not needed anywhere else, drop it and include it in your XSLT leaving behind a cleaner XML that can be reused in multiple places.

This is working as intended. What is happening is that the site is performing an XSLT transformation on the XML file which is via the processing instruction that is in the second line.

 <?xml-stylesheet type="text/xsl"
href="layout/artwork.xsl"?>

Browsers which support XSLT rendering in the client side would fetch the XSLT file specified in the processing instruction and perform an XSLT transformation and display the output. Since this is at runtime, the actual resultant markup will not be displayed when you "View Source", but the original source will only be displayed.

If you load the layout/artwork.xsl file, you would find the code that is needed to render the page in your browser available there. http://starcraft2.com/layout/artwork.xsl Also, the artwork.xsl again imports another stylesheet called includes.xsl - http://starcraft2.com/layout/includes.xsl -which has further code that generates content that will be displayed. Knowledge or awareness of XSLT would help in identifying what the output will be for these stylesheets and how it works.

From what I see, the stylesheets seem to import external XML documents as well for use as input data based on which the output is generated. This is in addition to what is provided as a "Source" document to the XSLT. In this case, the source is very tiny and the bulk of the information is imported in the XSLTs.

Hope I made sense.

Thanks, Thiyag

Thiyagaraj
Right, I understand what XSLT do, but usually you'd see the XML have some sort of semantic meaning and then transform that using the XSLT into HTML. My question is specifically why would you want to organize your source like this? It seems to defeat the purpose of an XSLT.
cdmckay
Not necessarily. XSLT is a templating language as much as it is a transformation language. They have decided to put most of the content in the XSLT templates. However, the little bit of XML content does affect how that XSLT executes and what it produces. I provided some details in an answer.
Mads Hansen
+2  A: 
Mads Hansen
+1  A: 

Well one thing to notice is that each page element has a lang attribute that is modified based on the Accept-Language http header provided by the browser. The XSLT uses this attribute to select localized resources. The template is also organized in such a way that many common page elements, like headers and flash objects, are defined in a common "includes.xsl" file.

Since all of the localization and html rendering is done by the client, this probably saves a fair amount of server CPU time. Also, given that many elements are defined in a global "includes" file, this can be requested once by the browser and cached, saving bandwidth and reducing the overall time to download each page.

Michael Petito