I need to have the following html classes with IE conditional comments in my Drupal 8 site:

<!--[if lt IE 9]>      <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js">

Ideally I would use html_attributes.addClass see this question: Safe to add a class attribute to the HTML element via the theme?

I tried this:

<!--[if lt IE 9]>      <html{{ html_attributes.addClass('no-js lt-ie10 lt-ie9') }}> <![endif]-->
<!--[if IE 9]>         <html{{ html_attributes.addClass('no-js lt-ie10') }}> <![endif]-->
<!--[if gt IE 9]><!-->
<html{{ html_attributes.addClass('no-js') }}>

But it seems once you add a class to html_attributes then its printed every time, so my final instance which should only have a class of no-js instead has this:

no-js lt-ie10 lt-ie9 no-js lt-ie10 no-js
  • addClass I guess should add only once.. I didn't know that: (
    – ssibal
    Commented Sep 21, 2016 at 11:15
  • This behaviour is a feature, so the code is working as expected, you just need to do things differently to get the required result for this use case (see my answer below).
    – Jeff Burnz
    Commented Sep 21, 2016 at 11:31

1 Answer 1


Your best bet is to print the class attributes separately, and use the without twig filter, then hard code the IE stuff, e.g.

<!--[if lt IE 9]> <html{{ html_attributes|without('class') }} class="{{ html_attributes.class }} lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>    <html{{ html_attributes|without('class') }} class="{{ html_attributes.class }} lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!-->
<html{{ html_attributes.addClass('no-js') }}>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.