Skip to content

Instantly share code, notes, and snippets.

Embed
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 https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md#conditional-html-classes
#
# @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 {https://gist.github.com/SteveBenner/5df58e30de5165a44822 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}"
end
%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
end
<!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 ...
</html>
@SteveBenner
Copy link
Author

SteveBenner commented Sep 25, 2014

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

@mrtnpro
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