This is a best practice offered by HTML5Boilerplate. It forces IE to use the most recent rendering engine or to use Chrome's frame rendering engine if available.

More info here.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sherakama’s picture

I do like this practice. In fact I have been adding it to all of my themes through the preprocess_html hook in the template.php file.

+1 for core implementation.

Until it makes it way into core those using D7 can ...

function THEMENAME_preprocess_html(&$vars) {
  
  $data = array(
     '#tag' => 'meta',
     '#attributes' => array(
       'http-equiv' => "X-UA-Compatible",
       'content' => "IE=edge,chrome=1",
       )
     );

   drupal_add_html_head($data,'key');
   
 }
droplet’s picture

Status: Active » Needs review
FileSize
917 bytes
idflood’s picture

I do like the idea but there are two problems:
- breaks validation
- there is a cleaner way of doing it that doesn't break the validation

This line breaks validation, and the Chromeframe part won't work inside a conditional comment. One workaround is to use the apache/nginx/IIS/lighthttpd configuration to send these as headers instead. You also might want to read Validating: X-UA-Compatible

from: http://html5boilerplate.com/docs/The-markup/#make-sure-the-latest-versio...

droplet’s picture

I think
- Drupal isn't 100% valid markup. eg. CSS prefix.
- .htaccess isn't a requirement of Drupal.
- it able to config it without this markup

droplet’s picture

.htacces way isn't work safely. I did some tests.

I tried

Header always set X-UA-Compatible "IE=Edge,chrome=1"
// or 
Header set X-UA-Compatible "IE=Edge,chrome=1"

curl -I -L http://192.168.56.108/drupal7x

HTTP/1.1 301 Moved Permanently
Date: Sat, 07 Jan 2012 09:30:55 GMT
Server: Apache/2.2.20 (Ubuntu)
Location: http://192.168.56.108/drupal7x/
Vary: Accept-Encoding
Content-Type: text/html; charset=iso-8859-1

HTTP/1.1 200 OK
Date: Sat, 07 Jan 2012 09:30:55 GMT
Server: Apache/2.2.20 (Ubuntu)
X-Powered-By: PHP/5.3.6-13ubuntu3.3
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified: Sat, 07 Jan 2012 09:30:55 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1325928655"
Content-Language: en
Vary: Accept-Encoding
Content-Type: text/html; charset=utf-8

curl -I -L http://192.168.56.108/drupal7x/

HTTP/1.1 200 OK
Date: Sat, 07 Jan 2012 09:31:44 GMT
Server: Apache/2.2.20 (Ubuntu)
X-Powered-By: PHP/5.3.6-13ubuntu3.3
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified: Sat, 07 Jan 2012 09:31:44 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1325928704"
Content-Language: en
Vary: Accept-Encoding
Content-Type: text/html; charset=utf-8

verify it working:
curl -I -L http://192.168.56.108/drupal7x/misc/jquery.js?v=1.4.4

HTTP/1.1 200 OK
Date: Sat, 07 Jan 2012 09:38:53 GMT
Server: Apache/2.2.20 (Ubuntu)
X-UA-Compatible: IE=Edge,chrome=1
Last-Modified: Sat, 07 Jan 2012 09:05:32 GMT
ETag: "1a3f6-1330a-4b5ec77b98365"
Accept-Ranges: bytes
Content-Length: 78602
Vary: Accept-Encoding
Content-Type: application/javascript

more:
curl -I -L http://192.168.56.108/h5bp/index.html

HTTP/1.1 200 OK
Date: Sat, 07 Jan 2012 09:47:47 GMT
Server: Apache/2.2.20 (Ubuntu)
Last-Modified: Sat, 07 Jan 2012 09:47:13 GMT
Accept-Ranges: bytes
Content-Length: 2908
Vary: Accept-Encoding
X-UA-Compatible: IE=Edge,chrome=1
Content-Type: text/html; charset=utf-8

curl -I -L http://192.168.56.108/h5bp/index.php

HTTP/1.1 200 OK
Date: Sat, 07 Jan 2012 09:47:52 GMT
Server: Apache/2.2.20 (Ubuntu)
X-Powered-By: PHP/5.3.6-13ubuntu3.3
Vary: Accept-Encoding
Content-Type: text/html
ericduran’s picture

Status: Needs review » Needs work

This shouldn't be done here. Instead of doing it in the head we should just sent the header the same way we send the content-type header.

have a look add drupal_deliver_html_page where we probably should add "drupal_add_http_header('X-UA-Compatible', 'IE=edge,chrome=1');"

droplet’s picture

Good suggestion. Postponed form this issue #1400800: drupal_send_headers doesn't unset headers

adnasa’s picture

I'm for IE-edge in core since it forces IE to use the most current rendering engine, but I'm hesitant about chrome frame. This is because chrome=1 would also hint the user to install the chromeframe plugin if not available and that's not exactly optimal from a user experience perspective (I wouldn't want this on every drupal installation afterall). We can make chrome=1 optional though through the theme layer.

droplet’s picture

@adnasa
chrome=1 won't hint user to install anything.

ericduran’s picture

As mention by @droplet chrome=1 won't prompt users for anything. It'll just makes IE use chrome frame if it's installed if not IE still uses the latest rendering engine.

droplet’s picture

FileSize
48.54 KB

It's why we should add it:
ie

cosmicdreams’s picture

HTML5 boilerplate (3.0) no long applies chrome frame by default http://html5boilerplate.com/ . I still lean towards committing the patch in #2 anyway, but I have seen this question posted here yet?

Are we making Drupal 8 harder to troubleshoot by doing this. I'm imagining a future where I get a lot of support calls where User A and User B are "running the same browser" but one is seeing an issue while the other isn't. Then I have to do a have you flushed the cache, reboot and try again, "I mean does the one that works have ChromeFrame installed?" test to see if that's the issue. And then tell the one that doesn't to install Chrome Frame.

droplet’s picture

AFAIK, H5B only removed chrome frame installation script.
https://github.com/h5bp/html5-boilerplate/blob/master/index.html

I just afraid it do not work with Chrome Frame installed. I have no experience of this problem.

another choose is only bring unsupported IE into chrome frame.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE7">
cosmicdreams’s picture

I like #13 a lot!

JohnAlbin’s picture

Issue tags: +mobile

We'd need this header for #1471382: Add IE-conditional classes to html.tpl.php as well.

cosmicdreams’s picture

cool, looks like all we need here is an updated patch and consensus. I'll make a new patch for this tonight, if no one beats me to it.

dcmouyard’s picture

Title: Add X-UA-Compatible to HTML5 <head> » Add X-UA-Compatible HTTP header
Status: Needs work » Needs review
FileSize
782 bytes

I agree with @ericduran in #6 that this should be set via HTTP header rather than set as a <meta> element in <head>.

If #1471382: Add IE-conditional classes to html.tpl.php gets into core, then using the HTTP header method avoids a bug where IE displays a compat view icon when the <html> element is wrapped in IE-conditional comments.

JohnAlbin’s picture

Status: Needs review » Reviewed & tested by the community

I verified that the format of the X-UA-Compatible header is correct; the "IE=edge,chrome=1" with a comma is correct. The value pairs in this header need to be separated by semi-colons, but we really do want to set "IE" to the value "edge,chrome=1".

I looked at the code and saw that it is correctly checking if the header is already set before adding it. http://api.drupal.org/api/drupal/core%21includes%21bootstrap.inc/functio...

I did some curl tests on my server before and after applying the patch and the X-UA-Compatible header shows up properly on all Drupal-generated pages.

HTTP/1.1 200 OK
Date: Mon, 12 Mar 2012 00:59:52 GMT
Server: Apache/2.2.21 (Unix) mod_ssl/2.2.21 OpenSSL/0.9.8r DAV/2 PHP/5.3.8 with Suhosin-Patch
X-Powered-By: PHP/5.3.8
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified: Mon, 12 Mar 2012 00:59:52 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1331513992"
X-UA-Compatible: IE=edge,chrome=1
Content-Language: en
X-Generator: Drupal 8 (http://drupal.org)
Content-Type: text/html; charset=utf-8

The problems droplet had in comment #5 don't occur since we're not using .htaccess to add the header.

catch’s picture

Title: Add X-UA-Compatible HTTP header » Change notification for: Add X-UA-Compatible HTTP header
Category: feature » task
Priority: Normal » Critical
Status: Reviewed & tested by the community » Active

This looks fine and I don't think we need a test for it (#18 suggested we might, but all we could do is verify in the test that it matches what we have in the code, not that it's correct).

So I've committed/pushed this to 8.x. Since it's going to affect IE rendering, seems like we could use a change notice to document that we're now sending this header and the effect it'll have.

droplet’s picture

and anyone have time please review #1400800: drupal_send_headers doesn't unset headers, make sure we can totally unset the headers:

JohnAlbin’s picture

Assigned: Unassigned » JohnAlbin

I need to review this for the Zen theme. I'll write the changelog.

JohnAlbin’s picture

Title: Change notification for: Add X-UA-Compatible HTTP header » Add X-UA-Compatible HTTP header
Assigned: JohnAlbin » Unassigned
Status: Active » Fixed

Change record is here: http://drupal.org/node/1511040

Tor Arne Thune’s picture

Category: task » feature
Priority: Critical » Normal
klonos’s picture

Would D7 also benefit from this? Any API changes?

I know this is about markup and not the UI, but I believe this is related: #1505456: Add a "Backports" or "Drupal update" module to Drupal 7 core so that UI changes from Drupal 8 can be backported

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

dubois’s picture

Attaching same patch but for D7 and including in makefiles.

tlattimore’s picture

I can confirm that the patch attached in #26 applies cleanly and works as described. Tested by appling to a D7 install and running IE8 in compatibility view. It is clearly passing the right header and forcing IE into edge mode.

klonos’s picture

Version: 8.x-dev » 7.x-dev
Status: Closed (fixed) » Needs review

...ok then. Lets see if we can get this in D7.

ericduran’s picture

IDK if it's worth getting this in D7.

D7 core doesn't really require IE edge as much as D8 stuff.

Also there's about 10 contrib modules that do this in D7.

I would say we can just close this issue and be done with this one.

StephanieFuda’s picture

Hey ericduran,
I could use this in 7, since I'm often stuck using older versions based on exsisting builds.
You mention that there are contrib mods to do this, can you list them? I couldn't find them.

Thanks!

tlattimore’s picture

Status: Needs review » Fixed

@Stephanie_42 - If you have a custom module for your site you can achieve this o this in hook_init(). I have the used the following in hook_init for a site:

  // Send X-UA-Compatible HTTP header to force IE to use the most recent
  // rendering engine or use Chrome's frame rendering engine if available.
  if (is_null(drupal_get_http_header('X-UA-Compatible'))) {
    drupal_add_http_header('X-UA-Compatible', 'IE=edge,chrome=1');
  }

See this snippet for an example in more context.

I agree with ericduran's statement in #29 & don't think this is needed in D7 core, so I am going to mark this as fixed. If anyone wants to make an argument for this in D7 they can reopen..

klonos’s picture

Version: 7.x-dev » 8.x-dev

...marking this fixed against 7.x might give the wrong impression that it was actually backported.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

jbrown’s picture

You have to do it like this in Drupal 7 as, unlike Drupal 8, Drupal 7 does not store HTTP headers in the page cache:

  // Send X-UA-Compatible HTTP header to force IE to use the most recent
  // rendering engine or use Chrome's frame rendering engine if available. It is
  // not possible to use drupal_add_http_header() as Drupal 7 does not store
  // HTTP headers in the page cache.
  $element = array(
    '#tag' => 'meta',
    '#attributes' => array(
      'http-equiv' => 'X-UA-Compatible',
      'content' => 'IE=edge,chrome=1',
    ),
  );
  drupal_add_html_head($element, 'x_ua_compatible');
adnasa’s picture

This issue is still about chrome frame, right?
http://blog.chromium.org/2013/06/retiring-chrome-frame.html?m=1

adnasa’s picture

Issue summary: View changes

...link changed ;)

tixiv’s picture

Issue summary: View changes

Shouldn't we remove the ",chrome=1" part?

The Google Chrome frame is retired:
http://blog.chromium.org/2013/06/retiring-chrome-frame.html?m=1

This is the discussion from the html5 boilerplate team.
https://github.com/h5bp/html5-boilerplate/pull/1396