0

Since IE10 does not understand conditional comments, I can't use the typical methods to single out that browser. However, I found a nice function that works well and if I add this to html.tpl.php in my theme:

<script>if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
  }
 </script>

... it works for IE10 and adds an HTML class of ie10.

But for best practices, I really want to use a preprocess function. So I looked at drupal_add_html_head and that seems to be the ticket. But when I formulate my code as such:

function MYTHEME_add_html_head($element, $inline_script) {

  $inline_script = <<<EOL
  <script>if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
  }
  </script>
EOL;
$element = array(
'#type' => 'markup',
'#markup' => $inline_script,
);
drupal_add_html_head($element, 'system_ie_browser');
}

... it does not work. There does not seem to be a lot of documentation around this and I could not really find anyone else doing exactly what I need so I'm a bit lost here. I replaced MYTHEME with the actual theme machine name and cleared cache too.

What I'm not sure about is if this part...

drupal_add_html_head($element, 'system_ie_browser');

... is significant in terms of Drupal understanding it and where to put it. I don't know if there are specific variables that go there. I just sort of made system_ie_browser up.

3

Hope this will help you,

Use Browser class module.

This small module helps theme-developers to deal with cross-browser compatibility. It makes easier to handle different types of non-widespread browsers just as much as it helps with using different versions of Internet Explorer. The module extends the $body_classes variable in page.tpl.php based on the enduser's browser, and platform.

The module also makes a $browser_classes variable available in page.tpl.php, which stores the data in an array, this way the developer can make use of it as needed, if he does not wish to use the $body_classes variable.

  • No I don't want to use a module, I should have made that clear in the OP, sorry but this is for a theme I'm developing so I want it to be stand alone. – Danny Englander Jun 26 '13 at 13:44
1

If you're going to be checking with javascript, you might as well use:

e.g, in script.js

if ($.browser.msie && $.browser.version == 10) {
  $('body').addClass('ie10');
}

You can then go, for example

body.ie10 .container{
  margin:2px;
}

Edit: Alternatively, you could try something server side like:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10') !== FALSE) {
  // Add ie10 body class
  $variables['classes_array'][] = 'ie10';
}

However, that won't play nicely with cached pages, hence the client-side solution above.

Overall, it would be nice if IE10 continued to support conditional comments as per previous versions of IE, that would make the whole thing easier!

  • For better or worse, $.browser was deprecated jQuery in 1.3 and was just removed in 1.9. – mpdonadio Jun 26 '13 at 10:36
  • True, though even with jQuery_update, 1.9 isn't currently available for D7 and $.browser is in core. Nevertheless, an alternative detector would also suffice. – David Thomas Jun 26 '13 at 10:46
  • 1
    Yeah, I'm not big on this solution, I'd really rather get the preprocess function working as outlined above. – Danny Englander Jun 26 '13 at 13:45
  • Though your preprocess function is just using JavaScript and harder to read? Oh well up to you. – David Thomas Jun 26 '13 at 20:26
0

Well it turns out this simply needed to be in a hook_preprocess_html function so the API probably needs some clarification. I also added $element, 'javascript' to the actual drupal_add_html_head call. I guess this is an example of a function being within another function. So this works flawlessly:

    /**
     * Implements hook_preprocess_html().
     */
    function MYTHEME_preprocess_html(&$vars) {

      $inline_script = <<<EOL
    <script>if (Function('/*@cc_on return document.documentMode===10@*/') ()) {
    document.documentElement.className+=' ie10';
    }</script>
    EOL;
    $element = array(
    '#type' => 'markup',
    '#markup' => $inline_script,
    );
    drupal_add_html_head($element, 'javascript');
}
  • Why the down vote? This answers the question that I set out to solve and the other solutions do not use a preprocess function at all. That's clearly what was intended here. – Danny Englander Jun 26 '13 at 14:16
  • 1
    I wasn't the one who downvoted, but why not use drupal_add_js ? – Beebee Jun 26 '13 at 14:20
0

If you want to add Javascript to every page (or even write conditions on which pages to add it to) the Drupal way would be drupal_add_js. https://api.drupal.org/api/drupal/includes!common.inc/function/drupal_add_js/7

    /**
     * Implements hook_preprocess_html().
     */
    function MYTHEME_preprocess_html(&$vars) {
      $inline_script = "
        if (Function('/*@cc_on return document.documentMode===10@*/') ()) {
          document.documentElement.className+=' ie10';
        }
      ";
      drupal_add_js($inline_script, 'inline');
    }
  • I've already answered this saying to use preprocess_html amd it worked for me so you must have not read through all the issues here. See my answer on this page: drupal.stackexchange.com/a/77539/697 – Danny Englander Jun 28 '13 at 15:09
  • 1
    Thanks Danny. I did see that you had answered your own question yes. And for the sake of clarity, and best practices as you mentioned in your OP, the "Drupal way" is drupal_add_js not hacking drupal_add_html_head. – Queenvictoria Jun 29 '13 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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