Search

A new XSLT utility, “HTML5 Master Stylesheet” is now available for download. Comments and feedback can be left here but if you discover any issues, please post it on the issue tracker.

I’d also like to add this plugin was created using code found in the XSLT and HTML5 topic on this forum, which is a good place to go to find out more about how Symphony and HTMl5 play together.

Hi Dougoftheabaci,

Nice utility, we need more of these in the community. I have a couple of suggestions. Would it be worth adding true HTML5 elements such as “header” and “article” to this template as well as linking to the HTML5 Shiv for IE?

In the meantime, I have made a couple of amendments to the utility (namely the JS).

Edited - I put the code on http://pastie.org/1006989

I thought about it. Mostly I put this up because someone was curious for it. The problem for me with going with 100% HTML5 structural elements is they require JS in older browsers. Personally, I don’t think that’s a safe way to go. I don’t want to risk losing my entire layout because someone disabled javascript.

This is why I use class names instead so I (and anyone who uses this) can get into the habit of using the right elements for the right tasks and then when IE7 dies we can change it over.

I have a few other edits I need to make as well so I’ll merge your changes in later today.

HTML5 Master Stylesheet updated to version 1.1 on 17th of June 2010

Woo, that is great! I ran into lots of little gotchas trying to do my HTML5 site, this looks like a good time saver.

when you view your source code, does it look like everything is just on a few lines of the output?

Yes, that is by design. If you read the directions, there are two bits of code in this stylesheet that will automatically “minify” your code. This is done to save file size. I do it anyway because no matter what it still shows just fine in Firebug.

gotcha. i noticed the “strip whitespace” xslt at the bottom of the page. i took that out and that only adds a couple lines of code to the output. but i see what you mean by minifying it and just using firebug to navigate through the source code.

Yeah, I usually disable it (tabbing is reenabled back in the output tag) while I’m developing and then add it all back once it’s ready to go live.

If you read the directions…

where are these diriections you speak of? hehe, can’t seem to find them

Oooo… See, that would be the problem right there. I have found a bug. The description isn’t showing on the utility’s page. Not sure why… I’ve copy and pasted it below.


A default master stylesheet that can be used for HTML5 output with Symphony. It validates and uses class names for the new HTML5 markup elements such as article, nav, header, footer, section, and so on. You can make this pure HTML5 by searching for those tags and replacing them as necessary.

One other small addition addition is that the template will automatically minify all the markup for smaller filesize and quicker load times. To disable this comment out the third to last line which reads <xsl:strip-space elements="*"/> and change indent="no" to indent="yes" in the output declaration in line 8.

And, of course, feel free to use and abuse this as fits your needs.

Change Log:

1.1

  1. Updated JavaScript.
  2. Fixed wrong parameters.
  3. Added default template apply as in original master.xsl.

Should now work to just drop this in to replace the original master.xsl file with only adding footer information.

1.0

  • Initial launch

ah ok…so i wasn’t going crazy :)

Hi, i’ve edited your template:

<xsl:text disable-output-escaping="yes">&lt;</xsl:text>!DOCTYPE html<xsl:text disable-output-escaping="yes">&gt;&#10;</xsl:text>

It’s cosmetic change, but gives you carriage return (enter) after doctype declaration.

Thanks for this handy template Doug,

I’m still learning XSLT and Symphony and this is really handy since I develop most of my sites in HTML5.

There’s one thing I can’t figure out using your utility (it probably has to do with my lack of understanding XSLT): in the #content div you simply put <xsl:apply-templates/> which IIRC just processes all (if any) XSL sub-templates (and outputs data as plain text?).

In my test template this outputs section ‘meta-data’ such as the subsection name and some data from an Event. Obviously I do not want that ‘meta-data’ in my HTML page. I tried adding a select="/data" attribute to the apply-templates but this does not change anything.

What am I missing here? What exactly does this apply-templates (without a select) instruction do and how do I prevent the meta-data to show up?

Hi David, I can’t speak to the necessity of the apply-templates call, but I can tell your the reason you’re getting your meta-data output. XSLT has default templates that are implied when you apply templates (if there are no matching templates). You can read more about it here.

To prevent the meta-data from showing up, you can create a blank template that matches on the data:<xsl:template match="meta-data" />

Theoretically you should be able to focus the apply-templates using a select like you tried.

The point of the HTML5 Master Stylesheet is to directly replace the default XHTML master.xsl component in Symphony. In theory, you should be able to drop this in and have it work out of the box.

The point of the basic apply templates is to apply the pages as currently done in the Symphony default ensemble.

yeah, I thought it had to do with the XSL default templates.

If I target (‘select’) a specific set of nodes it works, I guess I just have to figure out where to start ‘selecting’. Since the apply-templates is called in a match on /node the sub-templates need to select more specifically…

I guess I’ll work it out and in doing so get a better grip on XSLT and Symphony. Thanks.

I’ve had similar problems myself. I had the correct output for templates that I had created, but then loads of text from every node in the xml after that. It had to do with my xpaths for the templates being iffy. I can’t remember what I did to fix it now either, sorry…

Was mainly me being rubbish with xslt.

It’s part of the way the apply templates works. If you start your page templates by targeting the data node then you’ll not have anything to worry about, only what you then call into play will show. That’s how Symphony’s default templates works.

Yep, I remember now, that was it!

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details