ThemeShaper Forums » Development Talk

[closed]

html5

(17 posts)
  • Started 4 years ago by Dstroii
  • Latest reply from Danieliser

Tags:

  1. Dstroii
    Member

    Is there any way to upgrade thematic to html5, or is it planned for a future release ?

    Posted 4 years ago #
  2. Hi,

    please give me a couple of days to check this.

    Currently I don't know if there's a way to change everything that needs to changed.

    If yes, I'll post the code. Otherwise one of the next versions will have something like a switch to change the output to HTML5 .. but not the next version and maybe not the one after next.

    Chris

    Posted 4 years ago #
  3. Is anyone else interested in this? I might take a crack at updating it.

    Posted 3 years ago #
  4. devin- i don't really know HTML5 yet, but if it is the future then imo, we ought to go there. so it is on my list of potential improvements to thematic.

    Posted 3 years ago #
  5. i could lend a hand. are you proposing a switch as chris mentions (a year ago) ?

    Posted 3 years ago #
  6. I saw this on github https://github.com/sams/Thematic-html5boilerplate

    Posted 3 years ago #
  7. i think a switch sounds perfect. it is still too early to totally go to pure HTML5 isn't it? plus that would have backwards compatibility issues. since this isn't my area of expertise where do we start?

    neat git find. i wonder if it is best to fork that or start from scratch. also is it bad that i think github is way prettier than google code? even tho git is sort of a pain to get started with.

    Posted 3 years ago #
  8. Could use Modernizr too http://www.modernizr.com/

    Posted 3 years ago #
  9. Huh, interesting link to: https://github.com/sams/Thematic-html5boilerplate. Looks like they already did a lot of it (using modernizer).

    I think there's two routes. One would be to do the basic HTML5 of TwentyTen.

    The other would be do go ahead and use full semantic elements like nav, aside, header, footer and use a .js shiv to make it work in older browsers- ala Toolbox.

    I'd be more inclined to the second approach.

    I think could still be compatible if we stuck to using ids/classes in the css rather than those semantic elements. But it might be fun to go a little further and see if we can trim down the stylesheet more.

    I'll probably put a project up on GitHub soon just to play with it.

    Posted 3 years ago #
  10. well if you get it on git i'll probably fork it :)

    Posted 3 years ago #
  11. Html5 should be an option but I think a sudden shift of doctype, markup, and associated scripts in Thematic would likely be an unwelcome change for some customized child themes out there.

    It could be achieved with default backwards compatibility by abstracting thematic's markup in to a function. Child themes could choose a doctype by defining a constant in their functions.php

    Posted 3 years ago #
  12. Moving this to the development talk forum... +1 for this in an upcoming release.

    I agree with Devin's observation that TwentyTen and Toolbox offer two possible routes.

    I'm wondering if child-themers would value having both as options since the TwentyTen route provides compatibility without requiring javascript.

    Posted 3 years ago #
  13. i get that toolbox is using all the html5 semantic elements. how is the twentyten approach different? i dont think i even knew it was using html5.

    i still like chris' initial suggestion of a switch that changes over to html5 markup. then you can leave older themes on the html4 and "turn on" html5 if you want it. i think i've heard of one framework that has this option but i can't recall which one it was. doh.

    Posted 3 years ago #
  14. @helga, twentyten just skims the surface of html5.

    @everyone
    i would be more interested in js approach and include full semantics.
    include the google shim for ie.

    certain html5 semantics are not neccessarily styled anyway.

    stage one- build semantics around existing markup.
    as devin mentions, we can use existing markup. its my understanding that the stylesheet will read #blah regardless if its nav#bottom or div#bottom.

    Posted 3 years ago #
  15. middlesister
    Member

    I would also like a html5 option. And +1 for going the full way with js for compatibility.
    And to include Modernizr would give childthemers a ton of possibilities for fancy styling too!

    Modernizr (since v 1.5) claims to use the same code as google shiv for IE compatibility, but also adds a lot of options for targeted styling. I just feel that if we are making use of html5, why not also include possibility for advanced css3 too?

    Posted 3 years ago #
  16. Html5 introduces new semantic elements <header> <footer> <section> etc. that some browsers including all ie versions prior to ie9 will not be able to render without javascript to define the elements.

    Twenty ten uses html4 compatible tags and attributes with an html5 doctype. This is the only method that I know of to presently deploy html5 in a way that will work on most versions of ie when js is disabled.

    Here are some links that might help as well:

    http://html5doctor.com/
    http://diveintohtml5.org/

    We'll be moving towards implementing the helper function I mentioned above to enable markup & doctype switching from xhtml1 to html5 including the new semantic elements. I'll post here again soon when this starts getting committed to the svn branch.

    Anyone who interested in contributing by testing the version, please subscribe to this thread.

    -Gene

    Posted 3 years ago #
  17. Danieliser
    Member

    Not sure if it makes a difference but i am developing a theme for magento using html5 semantic elements.. In IE 9 using ie7 standards mode in the developer toolbar(f12) the header divs get rendered fine by simply including the following js in the head..

    <!--[if lte IE 8]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    Forces them to render properly. Otherwise without it the method ive found that works is as follows..

    <div id="header-container">
    <header>
    
    </header>
    </div>

    This will render with as

    <div id="header-container">
    
    </div>

    in ie 8 or 7

    That js works great though with no further modifications necessary..

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.