Module: Xebec::HTML5

Included in:
NavBarHelper
Defined in:
lib/xebec/html5.rb

Overview

Xebec will help you transition your site to HTML 5 by using the <nav> element like so:

<nav class='my_navbar_name'>
  <ul>
    <li><a href='/home'>Home</a></li>
    ...
  </ul>
</nav>

Most browsers are perfectly happy with the &lt;nav> element, but Internet Explorer (all current versions) behaves… oddly. Specifically, IE will treat the above HTML as though it were really this:

<nav class='my_navbar_name'>
</nav>
<ul>
  <li><a href='/home'>Home</a></li>
  ...
</ul>

That, unfortunately messes with your CSS selectors. Xebec, therefore, has a slightly more intelligent default behavior. If it detects a browser that does not support HTML5 elements, it will replace the &lt;nav> element with a &lt;div class='navbar'>.

Some enterprising folks have found a workaround for IE, however. If you really want to use the &lt;nav> element for all browsers, do two things:

  1. in config/environment.rb, call Xebec.html5_for_all_browsers!

  2. in the &lt;head> tag in your site layout, call &lt;%= add_html5_dom_elements_to_ie %>

See also the example application.

See Also:

Constant Summary collapse

NON_HTML_5_USER_AGENTS = 
/msie/i

Class Attribute Summary collapse

Instance Method Summary collapse

Class Attribute Details

.force ⇒ Object

Returns the value of attribute force.



50
51
52
 
# File 'lib/xebec/html5.rb', line 50

def force
  @force
end

Instance Method Details

#user_agent_supports_html5? ⇒ Boolean

Returns:

  • (Boolean) 


56
57
58
59
 
# File 'lib/xebec/html5.rb', line 56

def user_agent_supports_html5?
  return true if Xebec::HTML5.force
  return !(NON_HTML_5_USER_AGENTS === request.user_agent)
end