Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Helper [tag] for generating one or more HTML tags inside IE conditional comments, in the style of HTML5 Boilerplate
# This is a special tag helper that generates multiple HTML tags in the style of HTML5 Boilerplate,
# meaning each is placed within an IE conditional comment and has special classes applied to it.
# One tag is created for each version of Internet Explorer specified in the first argument.
# @see
# @note This helper requires a Slim block!
# @note The output of this helper must be HTML escaped!
# @param [Range] ie_versions A range of IE versions to generate code for, in which the
# lowest value represents the oldest version of Internet Explorer supported by your site.
# @param [Hash] attributes One or more HTML attributes to apply to each HTML element created.
# @return [String] Output of given Slim block wrapped in HTML tags within IE conditional comments
# @example For a complete example, refer to { this GitHub gist}.
# doctype html
# == conditional_html_tags_for_ie_versions 7..8, lang: 'en'
# # ... web page content ...
def conditional_html_tags_for_ie_versions(ie_versions, attributes={})
# Create an array from given range that allows us to generate the code via simple iteration
ie_versions = ie_versions.to_a.unshift(ie_versions.min - 1).push(ie_versions.max + 1)
# Classes from user-provided String or Array are appended after the default ones
extra_classes = attributes.delete(:class) { |key| attributes[key.to_s] }
commented_html_tags = ie_versions.collect { |version|
# A 'lt-ie' class is added for each supported IE version higher than the current one
ie_classes = (version+1..ie_versions.max).to_a.reverse.collect { |j| "lt-ie#{j}" }
class_str = ie_classes.unshift('no-js').push(extra_classes).compact.join ' '
attr_str = attributes.collect { |name, value| %Q[#{name.to_s}="#{value}"] }.join ' '
html_tag = %Q[<html class="#{class_str}"#{' ' unless attr_str.empty?}#{attr_str}>]
# The first and last IE conditional comments are unique
version_str = case version
when ie_versions.min then
"lt IE #{version + 1}"
# Side effects in a `case` statement are rarely a good idea, but it makes sense here
when ie_versions.max
# This is rather crucial; the last HTML tag must be uncommented in order to be recognized
html_tag.prepend('<!-->').concat('<!--') # Note that both methods are destructive
"gt IE #{version - 1}"
else "IE #{version}"
%Q[<!--[if #{version_str}]#{html_tag}<![endif]-->]
}.flatten * $/
# Return the output from given Slim block, wrapped in the code for commented HTML tags
[commented_html_tags, yield, $/, '</html>'].join
<!DOCTYPE html>
<!--[if lt IE 7]<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]<html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]<html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]<!--><html class="no-js" lang="en"><!--<![endif]-->
... web page content ...
Copy link

SteveBenner commented Sep 25, 2014

More information about this helper function can be found here, along with several Slim templates showcasing it’s usage.

Copy link

mrtnpro commented Dec 13, 2014

Thanks for this awesome helper, I'm using it with middleman and finally I don't have to worry about those damn conditional classes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment