Search

That's great to hear! Thanks, Michael.

I updated the HTML5 Doctype extension to 1.2.4 so you should be able to use classes on the html element now. Now, all that happens is the removal of the xmlns attribute for XHTML and the xml:lang namespace.

Is it also somehow possible to use this in ht ehead, too?

<script>document.body.className += 'js';</script>

slight fix to your js: document.documentElement.className += 'js'; This is so that the browser (IE) definately adds class of JS to the head tag instead of body (its more useful up there)

Thanks Michael, I was wondering what the performance implications were.

This is so that the browser (IE) definately adds class of JS to the head tag instead of body (its more useful up there)

But my problem is the combination of adding js to AND using the HTML5 Doctype extension. The HTML5 Doctype extension rewrites the tag and nothing is added.

@padexx, this extension does nothing to the body element. You'd be better off following @Fazal's advice, which works fine in my tests.

The problem is that if you are trying to add that script to the head, it will never work. The script fires before the body element loads, which results in no effect. However, if you put that script after the closing body tag, you'll find that the script works fine. If you want that script in the head, you'll need to make sure the document is ready.

Sorry, I meant HTML tag, not head. If you put that script inside the HEAD tag it should work fine.

If that doesn't work and if you really need it to fire quicker, maybe you could try adding an onLoad event to the body tag?

I was up until 3am last night reading this discussion through and experimenting with some of the approaches. I now have a slightly better understanding of why HTML5/XSLT can be tricky - thanks for all the interesting info and work you've made available guys.

I didn't find any "all-in-one solution" to using HTML5 with XHTML syntax/indenting plus the necessary (for me) classes (no-js and iex) on the html tag, so I put what I came up with by tinkering with what others had until it matched the way I like into a utility: HTML5 Master Stylesheet (XHTML syntax with indenting). I thought it might be useful for anyone who's confused and not sure what to try next regarding this issue.

textarea seems to be fine, and IE styling/new-element-using is sorted via Modernizr.

I'm new to XSLT and Symphony despite having been keeping an eye on Symphony for a while, so please let me know if I've got anything wrong or if something could be done better. Thanks!

@bauhouse and Fazal thanks for your patience. The true problem was that I was stupid enough to believe the "js"-class would show up if I look into the delivered code of the web page (stupid me). Tested it with some css. Works!

@DavidOliver Thanks for putting this together

Another easy way to style for browsers without javascript would be:

<html class="nojs">
    <head>
    &lt;script>(function(B,C){B[C]=B[C].replace(/bnojsb/,'js')})document.documentElement,'className');&lt;/script>

The true problem was that I was stupid enough to believe the "js"-class would show up if I look into the delivered code of the web page (stupid me).

Firebug shows the modified markup.

Another easy way to style for browsers without javascript would be:

Thanks for that. I'm not a JS guy, but as I'll want Modernizr for other stuff I thought I'd let it handle this, too.

By the way I am also having some difficulties to integrate the code for the local jquery fall back (also used by boilerplate)

&lt;script>window.jQuery || document.write('&lt;script src="js/libs/jquery-1.5.1.min.js">x3C/script>')&lt;/script>

I guess this has to be modified to match xslt

By the way I am also having some difficulties to integrate the code for the local jquery fall back (also used by boilerplate)

The below seems to work, but it results in most of the head section being put onto one line - not a show-stopper, but perhaps someone can say why and how to keep things on their own lines.

<xsl:text disable-output-escaping="yes">&lt;script&gt;window.jQuery || document.write('&lt;script src="js/libs/jquery-1.5.1.min.js"&gt;x3C/script&gt;')&lt;/script&gt;</xsl:text>

@david

i'm using your new stylesheet and it's pretty fantastic. great work!

i wanted to point something out to you that may save you some headaches in the future. you can call xslt variables and node values inline by enclosing them in curly braces. so, your lines:

 <body>                                                                                                                                          
     <xsl:attribute name="class"><xsl:value-of select="concat('page-',$current-page)"/></xsl:attribute>

could be shortened to something like:

 <body class="page-{$current-page}">

i use this method very very liberally, especially when creating dynamic urls and element class/id names. i thought i'd share!

edit: a side note: this can only be done inside attribute declarations, so something like <p>{$current-page}</p> won't work

Thanks fawx. I'll likely include that tweak in an update. I'm sure there'll be other improvements and additions to be put in.

edit: a side note: this can only be done inside attribute declarations

Ah - that might explain why it sometimes doesn't work for me leaving me wondering why. :)

Hey, I fear I'm in a bit of trouble with this extension here. I've properly installed and enabled it on Symphony 2.3, but it refuses to work. The xsl:output of all my pages has been set to

<xsl:output method="xml"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
omit-xml-declaration="yes"
encoding="UTF-8"
indent="yes" />

as advised here more than once. The <html>-tag get's included by calling the template named "header" at the start of the match="/"-template and - because it's not closed - is inside of an xsl:text-element:

<xsl:text disable-output-escaping='yes'>&lt;html lang="en"&gt;</xsl:text>

And I fear that this is the problem, as nothing get's changed in the document, not even the DOCTYPE that precedes it. Is there any way to fix this with the current version of the extension?

Is there a particular reason you are using xsl:text to output the html element? It is very likely that this is your problem. I have not tested the results beyond the usual method of treating the html element as an actual element, rather than text, and letting XSLT format the html output.

Yeah, as I said, because it is splitted in two templates (header.xsl containing the opening tag, footer.xsl the closing tag). When I add the <html>-tags to every template and omit them in the two called templates, it works.

However, that kills the whole indenting again, resulting in a total of 4 lines, which should be 200+. Something definitely seems wrong here... ^^"

EDIT: Solved it. ANY tag "hacked in" using with output escaping will completely break the indenting.

it is splitted in two templates (header.xsl containing the opening tag, footer.xsl the closing tag).

That just sounds very wrong in practice. You don't do this with XSLT. You want to have a page template that imports a header and footer template.

Not sure if this has been pointed out already, but there's actually no hack or extension required. As recommended by the W3C:

For the purposes of html generators that cannot output HTML markup with the short doctype <!DOCTYPE html>, a doctype legacy string may be inserted into the doctype.

In your XSLT:

<xsl:output doctype-system="about:legacy-compat" method="html" />

A valid HTML5 doctype will then be created automatically:

<!DOCTYPE html SYSTEM "about:legacy-compat">

Jens: I stumbled across it a few days ago and was just about to post the same thing :-D

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