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

Comments

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.

Status:Active» Needs review

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]-->

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.

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

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?

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>

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

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.

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)

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 :)

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.

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

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.

Title:Base html template on HTML5BoilerplateAdd 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.

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" />