What about including the conditionals around the tag like is the growing trend?

Comments

rump’s picture

StatusFileSize
new1.2 KB

First attempt...

I borrowed the formatting from HTML5Boilerplate but clearly not in line with drupal coding standards.

Also, sure is ugly when RDF is enabled.

rump’s picture

Status:Active» Needs review
rump’s picture

Preview with and without RDF:

<!doctype html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en" dir="ltr"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en" dir="ltr"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" dir="ltr"> <!--<![endif]-->
<!doctype html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN">
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dc="http://purl.org/dc/terms/"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:og="http://ogp.me/ns#"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:sioc="http://rdfs.org/sioc/ns#"
  xmlns:sioct="http://rdfs.org/sioc/types#"
  xmlns:skos="http://www.w3.org/2004/02/skos/core#"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en" dir="ltr"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dc="http://purl.org/dc/terms/"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:og="http://ogp.me/ns#"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:sioc="http://rdfs.org/sioc/ns#"
  xmlns:sioct="http://rdfs.org/sioc/types#"
  xmlns:skos="http://www.w3.org/2004/02/skos/core#"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en" dir="ltr"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dc="http://purl.org/dc/terms/"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:og="http://ogp.me/ns#"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:sioc="http://rdfs.org/sioc/ns#"
  xmlns:sioct="http://rdfs.org/sioc/types#"
  xmlns:skos="http://www.w3.org/2004/02/skos/core#"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" dir="ltr"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dc="http://purl.org/dc/terms/"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:og="http://ogp.me/ns#"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:sioc="http://rdfs.org/sioc/ns#"
  xmlns:sioct="http://rdfs.org/sioc/types#"
  xmlns:skos="http://www.w3.org/2004/02/skos/core#"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <!--<![endif]-->
rump’s picture

StatusFileSize
new1.21 KB

Maybe this issue is instead about adapting a tried and true boilerplate html5 template...

Because I'd also like to see:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">

HTML5Boilplate/Initilizr bare bones html5 template attached.

rupl’s picture

Most Drupal theme implementations of conditional classes make sure not to overload the document with RDFa attributes within conditional comments because RDFa is for non-IE consumers of the data.

Furthermore, by printing the redundant data, you sacrifice the ability to use certain meta tags (such as charset) because they must be present within the first 1024 bytes of the HTML document.

Further reading can be found in the Drupal core queue: #1471382-11: Add IE-conditional classes to html.tpl.php

rump’s picture

hmm, and apparently its best to have the conditionals on html versus say body: http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/

Is there another way to define rdf:document? I couldn't spend much time browsing right now but I did see an RDF specification doc that basically said is totally appropriate... does it even need all that gibberish?

rump’s picture

http://dev.w3.org/html5/rdfa/#document-conformance

An example of a conforming HTML+RDFa document:

<html lang="en">
  <head>
    <title>Example Document</title>
  </head>
  <body>
    <p>This website is <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>

rupl’s picture

The best people to discuss this issue with would be @scor or @linclark - they are both semantic web experts.

rump’s picture

Chatted up @linclark,

Basically we'd have throw the RDFa declarations twice, for head and then for body if we don't define in html, as both can contain data.

Looking at the other HTML5 themes, such as Zen, jthey ust skip the RDF all together.

The conditional styles are definitely not worth the cruft.

rump’s picture

Status:Needs review» Needs work
StatusFileSize
new32.87 KB
new23.11 KB

Okay, so plugged in with and without namespaces into http://www.w3.org/2012/pyRdfa/Validator.html

Both pass validation... but the html tag without namespaces actually generates 2/3rds less warnings (because xmlns is depreciated)

rump’s picture

Title:Add html tag IE conditionals to html template?» Base html template on HTML5Boilerplate
Status:Needs work» Needs review
StatusFileSize
new4.13 KB

Quick patch after adjusting the template to be like HTML5Boilerplate

  1. IE conditionals around html tag
  2. Mobile meta tag viewport with settings option
  3. Chrome frame meta tag

Only thing missing is Modernizr or html5shiv but we have an existing and excellent module for that :)

ericduran’s picture

A couple of comments on this patch. I know it's been a while but it's still open.

- You don't need the "X-UA-Compatible" meta tag. We already add it via the headers which is better and the recommended approach.

- We shouldn't add the viewport. This isn't always the same across all site. The last thing I want to do is complicates someones life as they try to figure out how to replace the problem incorect viewport we're putting on the page for them. I suspect anyone that needs the viewport would know they need it and would easily be able to add it.

So this leaves the patch down to the IE conditional comments. Personally I just usually avoid this being that I'm really against specific ie styling which is what this is really for.

So not sure if we should add the conditional comments. Mind you most themes are probably overriding this html.tpl.php anyways.

nikhilsukul’s picture

Why we are not considering Mobile HTML5Boilerplate: http://html5boilerplate.com/html5boilerplate.com/dist/mobile/

hass’s picture

Status:Needs review» Needs work

I normally use <meta name="viewport" content="width=device-width, initial-scale=1.0" /> the initial-scale=1.0 is missing in the patch.

Per Erics feedback this needs work.

+++ b/html.tpl.phpundefined
@@ -55,7 +55,10 @@
-<html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?><?php print $html_attributes; ?>>
+<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>" <?php print $html_attributes; ?>> <![endif]-->
+<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>" <?php print $html_attributes; ?>> <![endif]-->
+<!--[if IE 8]>    <html class="lt-ie9" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>" <?php print $html_attributes; ?>> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>" <?php print $html_attributes; ?>> <!--<![endif]-->

What the heck is this? I do not like to see this added to my templates. Make this optional and do not enable this by default if there is really a need for this, please.

+++ b/html5_tools.moduleundefined
@@ -129,6 +129,7 @@ function html5_tools_preprocess_html_tag(&$variables) {
+

Remove

+++ b/html5_tools.moduleundefined
@@ -203,6 +204,31 @@ function html5_tools_theme_registry_alter(&$theme_registry) {
+  if (variable_get('html5_tools_add_chrome_frame_header', 1)) {
+   drupal_add_http_header('X-UA-Compatible', 'IE=Edge,chrome=1');
+   drupal_add_html_head(array(
+     '#tag' => 'meta',
+     '#attributes' => array(
+       'http-equiv' => 'X-UA-Compatible',
+       'content' => 'IE=Edge,chrome=1',
+     ),
+   ), 'html5_tools_meta_chrome_frame');
+  }

Can be removed.

hass’s picture

Title:Base html template on HTML5Boilerplate» Add viewport meta tag for mobile

If I read https://github.com/h5bp/html5-boilerplate/issues/1187 I must say, there is no need for this at all as we push the header out. This way IE knowns that it should render HTML5. So this boilertemplate stuff can be removed.

Changing title as we are down to only this part of the patch.

mgifford’s picture

Apple's has some docs on Viewport definitions.

But there are a few blogs talking about the importance of properly setting the Viewport so that users can continue to control the Zoom on their device. Viewport : adieu width=device-width and Five Fundamentals of Accessible Responsive Web Design.

From this, the optimal RWD code looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />