I am taking John Allsopp’s HTML5 Live course offered by SitePoint (a great deal, by the way), right now, and he shared a neat little tip that I wanted to pass on. You can use many of the new HTML5 elements (header, article, section, etc.) right now, even in older browsers like Internet Explorer 7.
All you need to do is add an extra “boolean attribute” to the element, and you can then style them with CSS in almost all of the browsers currently being used.
Instead of simply using something like:
<header>This is my HTML5 header</header>
<section>This is an HTML5 section</section>
and then trying to style them with something like:
section { display: block; }
header { display: block; }
You would, instead, use code like:
<header header="true">This is my HTML5 header</header>
<section section="true">This is my HTML5 section</section>
and the following CSS:
[header] { display: block; }
[section] { display: block; }
I honestly don’t know why it works, but I have tested it in IE7, IE8, Chrome and Firefox, and all four browsers seemed to handle this code without any trouble.
Oddly, though, when I tried to do the same thing with the new HTML5 <footer> element, it didn’t seem to work. It’s entirely possible that I had a typo in my code or something (let me know if you try it and get it to work), but I couldn’t figure out what the issue was.
Post Your Comment