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

CommentFileSizeAuthor
#12 html5_tools-7.x-1.x-1719650-12.patch4.13 KBseandunaway
#11 RDFa-1.1-Validator---WITHOUT-namespaces.png23.11 KBseandunaway
#11 RDFa-1.1-Validator---WITH-namespaces.png32.87 KBseandunaway
#4 index.html_.txt1.21 KBseandunaway
#1 html5_tools-7.x-1.x-1719650-2.patch1.2 KBseandunaway
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented
FileSize
html5_tools-7.x-1.x-1719650-2.patch1.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.

seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented
Status: Active » Needs review
seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented

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]-->
seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented
FileSize
index.html_.txt1.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

rupl
he/him
Primary language English
CreditAttribution: rupl commented

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

seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented

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?

seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented

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

rupl
he/him
Primary language English
CreditAttribution: rupl commented

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

seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented

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.

seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented
Status: Needs review » Needs work
FileSize
RDFa-1.1-Validator---WITH-namespaces.png32.87 KB
RDFa-1.1-Validator---WITHOUT-namespaces.png23.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)

seandunaway’s picture

seandunaway CreditAttribution: seandunaway commented
Title: Add html tag IE conditionals to html template? » Base html template on HTML5Boilerplate
Status: Needs work » Needs review
FileSize
html5_tools-7.x-1.x-1719650-12.patch4.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

ericduran CreditAttribution: ericduran commented

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

nikhilsukul CreditAttribution: nikhilsukul commented

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

hass’s picture

hass CreditAttribution: hass commented
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

hass CreditAttribution: hass commented
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

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

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