HTML5 semantic markup support

Page: 1

Author Post
Member
Registered: Dec 2012
Posts: 3
Location: Port Angeles, WA (USA)
First, thanks for what you do, Byron. Floatbox is the best.

That being said, I do have a request for a future enhancement ...

Concerning "Image and Thumbnail Cyclers" on your "demos" page you have it that we set these up with a <div> tag and a class name of "fbCycler", which works great, My request, though, is: Might there be, sometime in the future, out-of-the-box support in Floatbox for HTML5's semantic tags, such as <section> <aside> <figure>", etc?

For now we have, for example, out-of-the-box:

Quote
Odds 'n' Ends
Image and Thumbnail Cycler
Setup up a div with a class name of "fbCycler" to cycle through a set of thumbnails or images....


However, in recently changing the html containers tags for some floatbox thumbnail cyclers from <div> to the more semantic HTML5 tag <figure>, I noticed I had to modify floatbox.css in order for the cyclers to function correctly.

Note that, for the various Floatbox elements I use, I have only done this type of change (HTML5 semantic tags) for the fbCycler class at this point, and do not know if the inner workings of Floatbox may have some "gotchas" when using the newer HTML5 markup tags such as <section> <aside> <figure>, etc. Also, I haven't figured out how to get <figcaption> to work yet, but the fbCyclers seem to work, now, with the container tag <figure> just fine.

Again, the only changes to the html markup I have done for this is to replace the fbCycler container <div> tags with <figure> tags.

And the portion of floatbox.css I modified is as follows, beginning at line 45:

/* Customized the fbCycler to use the HTML5 symantic tag "figure" in my photo album pages */
div.fbCycler{position:relative}
div.fbCycler a,div.fbCycler div{position:absolute;display:none;text-decoration:none}
div.fbCycler a.first-child{display:inline}
div.fbCycler div.first-child{display:block}
div.fbCycler span{display:block;text-align:center}
div.fbCycler a span{text-decoration:none} /* modified - default: text-decoration:underline */
/*** See changes below ***
figure.fbCycler{position:relative}
figure.fbCycler a,figure.fbCycler figure{position:absolute;display:none;text-decoration:none}
figure.fbCycler a.first-child{display:inline}
figure.fbCycler figure.first-child{display:block}
figure.fbCycler span{display:block;text-align:center}
figure.fbCycler a span{text-decoration:none} /* modified - default: text-decoration:underline */
/* end fbCycler modifications */
Administrator
Registered: Aug 2008
Posts: 3382
Done. Sort of.
I've tweaked the css for the next release so that it is not div-specific when applying styles to the cycler sets.

This is not sufficient to give "out-of-the-box" support for cyclers defined in HTML5 elements. The problem is with IE version 8 and earlier, which does not correctly handle custom elements and does not recognize HTML5 tags. I believe that if you check out your cycler in the <figure> element you will see that it is not cycling in IE 8.

Default behaviour for IE pre-9 does not apply CSS to custom tags and does not allow those tags to have child elements. To make HTML5 elements behave more rationally in IE, you need to use javascript to create an element of that name before using the tag in the html markup. Doing this establishes a namespace for the element.

Something like the following in the <head> section of the document will do the trick:
<script>
document.createElement(&#039;figure&#039;);
</script>

You could put conditional comments around that so that it fires only in IE pre 9.

Because of the need for such hacks to make HTML5 elements functional in IE, the Floatbox documentation (and recommendation) will continue to use divs as the containing elements for cyclers. The createElement hack is not something that the Floatbox code can do as it has to be applied before the document is parsed. But as mentioned, the new floatbox.css will be friendlier for people who want to take this approach.
Member
Registered: Dec 2012
Posts: 3
Location: Port Angeles, WA (USA)
Thanks, Byron, for the quick work to make it easier for us to work with HTML5 semantic markup. I will be looking forward to the update.

I understand and agree with keeping the defaults for working with <div> tags, because of the limitations of IE8 and earlier.

However, in my case, to solve the specific problems you mentioned concerning the HTML5 elements working with IE8 and earlier (and for various other reasons) I have chosen to also work with HTML5 Boilerplate (http://html5boilerplate.com/), which includes Modernizr (http://modernizr.com/) and Jquery (http://jquery.com/).

This combination, though perhaps a bit much for some purposes, works well in conjunction with Floatbox to enable such features as fbCyclers, etc., even in IE8 and earlier while at the same time using HTML5 semantic markup.

Page: 1