Pushing Buttons

• Applying CSS to Any Custom HTML Tag

  3 Comments Posted on January 21st, 2010 Tagged in HTMLHTML5JavaScript

  There is a really great screencast available at Nettuts+ which demonstrates how you can 'make all browsers render HTML5 mark-up correctly.' It is a really simple trick that allows you to apply CSS for HTML5 elements.
  
  To quickly cover what Jeffrey Way (the editor of Nettuts+) discussed, HTML5 has certain tags like <header> that are not standard in HTML4. Certain browsers like Chrome or Firefox are up-to-date and will consider this a valid element. Thus, it will then accept CSS statements for the <header> tag. So something like the following will be accepted:
  
  header {
     display:block;
     padding:40px;
     background:#171717;
     color:#fff;
     font-weight:bold;
     text-align:center;
}
  IE will show text within <header> but will not reflect anything written above. This is because it does not consider <header> a valid element and, more or less, ignores it.
  
  To fix that Way shows that putting the following JavaScript in the header solves this problem:
  
  document.createElement('header');
  You don't even have to inject the element into the page. Simply creating a DOM node with the <header> tag name creates a valid reference to such a tag in the browser's rendering engine. So, now the CSS for header applies. As he points out the one downfall is that the user must have JavaScript enabled.
  
  Now this is where it gets interesting. Say you want to throw in your own tag names. Let's say something like the following:
  
  <cloud>
     <p> Sample Text </p>
</cloud>
  And with the following CSS:
  
  cloud {
     display:block;
     padding:40px;
     background:gold;
     color:#171717;
     font-weight:bold;
     text-align:center;
}
  Now you have the same problem you had with HTML5 elements and CSS. This will work in Chrome and Firefox but not IE. And the same solution works:
  
  document.createElement('cloud');
  This, placed in the header, fixes the CSS in IE. So you can throw custom-named tags into the document and have they styled as you wish.
  

3 Comments

• Roy Bantot Mar 11, 2010
  What you're suggesting seems quite possible, but will inevitably lead to bad markup habits. The only reason the solution described in the Nettuts screencast was developed is for the IE browsers to recognize the new HTML5 tags (as always, IE is lagging behind Chrome, Firefox, Opera, etc.). So "header", "article", "footer" are all recognized HTML5 tags that need an IE solution, while "cloud" is not and won't ever be.
• DeepDown Jun 2, 2010
  "but will inevitably lead to bad markup habits"
  
  Agreed!
  
  Keep in mind that your "new" tagname has no semantical value for the document whereas the HTML5 tags do and that's the main point when it comes to HTML.
  
  Sorry, but still a good thing to know though :)
• rory Jun 3, 2010
  Cheers for the code, I always love an IE fix.
  
  Personally I don't know a lot about HTML5, and all its new tricks.
  Think I'll check it out after writing this, as I'm clearly being left out the web design loop. You stand still for a minute and you fall far behind.
  
  But DeepDown & Roy are very right, bad habbits are a NO NO.
  

Leave a Comment

• You Sep 7, 2010
  Add Comment