HTML5 Boilerplate - SOLVED

**Doublespark** · 01/15/2011, 15:45

I thought I would have a play with HTML5 this weekend, so installed the html5boilerplate extension.

http://cms-2.doublespark.eu/

I soon as I change my template to fe_html5_page.tpl I get this error in Firefox:

XML Parsing Error: syntax error
Location: http://cms-2.doublespark.eu/
Line Number 1, Column 1:<!doctype html>
^

Any ideas what the problem is?

**Doublespark** · 01/15/2011, 17:07

ops:

After I opened my eyes, I saw the "Document Type Definition" dropdown next to the "Page Template" dropdown in the layout.

**xchs** · 01/16/2011, 02:28

Hi Gary,

according to this ticket #2799 I have checked your site with the W3C validator. Because of the conditional comments for the various Internet Explorer versions (added by the HTML5 extension) together with the Contao license comment you exceed the limit of 512 bytes, within the character encoding must be specified with.

**Doublespark** · 01/16/2011, 20:13

Thanks xchs, after a a bit of playing around I fixed that error.

Cheers for pointing me in the right direction.

Still a couple of errors:

2 x "Bad value Content-Style-Type for attribute http-equiv on element meta."

Nothing I can do about those I guess.

And a couple that I need to tidy up in the calendar template.

Other than that looks like I'm ready to go with HTML5 :-)

**xchs** · 01/17/2011, 02:59

Originally Posted by Doublespark

After a a bit of playing around I fixed that error.

Hmm, you removed Contao's license notice form the <head> section :shock:

I guess it would be much better if the HTML5 boilerplate extension could handle the right classes for the <html> element already on the server side, instead of using five lines with IE conditional comments in the page template! Similar like the extension "browsercss" does provide it for the <body> element!

Originally Posted by Doublespark

Still a couple of errors:

2 x "Bad value Content-Style-Type for attribute http-equiv on element meta."

Nothing I can do about those I guess.

Well, unfortunately I do not know exactly what kind of meta attribute is used for http-equiv in HTML5.

**Doublespark** · 01/17/2011, 13:04

Thanks for pointing out the license notice.

I removed the <head> tag as it cured one of the validation errors, hadn't noticed that it removed the copyright :-(

Somehow I need to get the <meta charset="utf-8"> before the copyright notice.

I'll work it out.

**Doublespark** · 01/18/2011, 01:00

xchs, I re-read your post :-)

I have deleted the conditional statements from the html5boilerpate template and implemented browsercss instead! (I was not aware of the extension, thanks for pointing it out).

After looking at this:

http://stackoverflow.com/questions/2025 ... ternal-css

I deleted the following 2 lines:

<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>

That got rid of these validation errors, have not fully tested, but no immediate problems :-)

Thanks again.

**xchs** · 01/18/2011, 03:29

Originally Posted by Doublespark

I have deleted the conditional statements from the html5boilerpate template and implemented browsercss instead! (I was not aware of the extension, thanks for pointing it out).

Well, according to the information on Paul Irish's website he now recommends to put this IE specific classes to the <html> tag for the following reasons:

Here is the new recommendation, and the one that's in use in the HTML5 Boilerplate.

<html class="">

Why?

* This fixes a file blocking issue discovered by Stoyan Stefanov and Markus Leptien.
* It avoids an empty comment that also fixes the above issue.
* CMSes like WordPress and Drupal use the body class more heavily. This makes integrating there a touch simpler
* It doesn't validate in html4 but is fine in html5. Deal with it.
* It plays nicely with a technique to kick off your page-specific javascript based on your markup.
* It uses the same element as Modernizr (and Dojo). That feels nice.

However, since the extension "browsercss" provides the additional (browser) classes only for the <body> tag, we would have to adapt the PHP script "BrowserCSS.php" accordingly to match the <html> element (lines 154-173):

[code=PHP:3cseftpf]
****public*function*insertInsertTag($strContent,*$strTemplate)
****{
********
********if(strpos($strTemplate,*'fe_')*===*0)
********{
************
************if(preg_match("/<html[^>]*class[^>]*>/",*$strContent))
************{
************** **return*preg_replace('/<html*([^>]*)*class="([^"]+)"([^>]*)>/',*'<html*$1*class="$2*{{brow sercss}}"$3>',*$strContent);
************}
************else
************{
************** **return*preg_replace('/<html*([^>]*)>/',*'<html*$1*class="{{browserc ss}}"$3>',*$strContent);
************}
************
********}
********
********return*$strContent;
********
****}
*[/code:3cseftpf]
Please note that these changes are not update-safe!

Originally Posted by Doublespark

After looking at this:

http://stackoverflow.com/questions/2025 ... ternal-css

I deleted the following 2 lines:

<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>

Yes, I think you can delete these two lines, too. Especially if you provide for all the "stylesheet" and "javascript" <link> tags the correct type attribute accordingly.

Comment #1:

It's a waste of bandwidth. Nobody actually does anything with it. (It's so useless it isn't even included in HTML5.)

**Doublespark** · 01/18/2011, 11:32

Your help and advice much appreciated xchs!

Maybe Jan will see this thread and consider amending browsercss, to either use or give the option to use the <html> tag.

Thanks again.

**xchs** · 01/18/2011, 15:12

Originally Posted by Doublespark

Maybe Jan will see this thread and consider amending browsercss, to either use or give the option to use the <html> tag.

It's probably better if you create a new ticket (feature request) for it: http://www.contao-forge.org/projects/browsercss/issues

Originally Posted by Doublespark

Thanks again.

You're welcome.

**jan.theofel** · 06/09/2011, 17:17

Hello,

I'm just working on a new version of browercss which should include your ticket.

I just don't get the point why you want the class in the HTML-Tag. In the Blogpost by Paul he just say that he want's to keep the BODY tag free for dynamic classes. But this works fine in Contao because we add these classes additionally.

I'd like to implement the method from Oliver to include the CSS class to optimize performance which can be found in this ticket (sorry, German ticket but I'm sure you'll understand the PHP code) which will only work for the BODY but not for the HTML tag.

Before implementing this, I need to know if there might be a reason to ass the classes to the HTML tag instead of the BODY tag which I don't see.

Thanks!
Jan

**Doublespark** · 06/09/2011, 17:35

Hi Jan,

I have read in a few place that adding class to the html tag is preferable.

Here is an excerpt:

2010.05.07: Patrick O'Neill put this technique on some steroids. I rather like it. See below:

<html>
Doug Avery of Viget points out he prefers to use this technique on the HTML tag, freeing the body tag for dynamic classes. That works just fine. I later changed all my sites to use it on HTML instead of body, actually… Also it combo's really well with the Avoiding the FOUC v3.0 technique as well as Modernizr.

You fancy something different?

2010.05.07: Oh sheesh ya'll. Mat Marquis pointed out the code would leave a page <body>-less in IE10, etc. (Well not really because IE would auto-construct a body tag, but anyway…) Some gt later and we're good.
2010.05.20: Turns out IE conditionals around css files for IE6 can slow down your page load time in IE8! Crazy, right? The solution here avoids that, as does forcing IE to edge rendering.

2010.06.08: And then… Rob Larsen points out that when these conditional classes are applied to the HTML element, it doesn't block. No empty comment necessary. I think that's a new winner.

From: http://paulirish.com/2008/conditional-s ... r-neither/

**jan.theofel** · 06/09/2011, 17:47

Hi,

Originally Posted by Doublespark

Doug Avery of Viget points out he prefers to use this technique on the HTML tag, freeing the body tag for dynamic classes.

This is what I've written above. As Contao is very flexible here we can use the BODY tag for both: The browser classes and the dynamic classes.

Originally Posted by Doublespark

2010.06.08: And then… Rob Larsen points out that when these conditional classes are applied to the HTML element, it doesn't block. No empty comment necessary. I think that's a new winner.

[/quote]

As we don't use conditional comments in browsercss, nothing will block and we won't have empty comments.

If I understand this correct these arguments don't fit for browsercss extension. Correct?

Jan

**Doublespark** · 06/09/2011, 18:19

Hi Jan,

I'm sure I read on html5boilerplate that there were good reasons for adding to html and not body. From memory it was that adding to body can cause strange bugs in some circumstances.

Vague I know.

I have tried searching http://html5boilerplate.com/ but can't find what I read. Maybe it's been updated and no longer considered an issue.

I did find this https://github.com/paulirish/html5-boil ... issues/378

@MartinMa: I think a problem with (2) is that a lot of CMS add id/classes to the body tag, which would create a lot of duplication. Furthermore, it could create problems for people writing IE6-specific styles because the browser doesn't really support chains of classes, e.g., ie6.mybodyclass {}

Would that be an issue?

OK! @julienw seems correct, here's a basic testcase of what he is describing. It doesn't drop IE8 into IE7 mode. But other issues related to use on body remain.

Ex 1 : http://pastie.org/1926628

Switching the conditional comments back to the html element but leaving the empty conditional comment above the doctype also prevents IE8 from dropping into IE7 mode without needing the X-UA-Compatible header being set on the server-side.

Ex 2 : http://pastie.org/1926635

http://mathiasbynens.be/notes/safe-css-hacks#comment-13

Jan - You know far more about this than me, go with whatever you think is best.

Either way, great extension - THANKS!

**jan.theofel** · 06/10/2011, 00:09

Hey,

I'm not sure. I don't support IE6 on my pages so I can't tell you if IE 6 has issues with the classes in the body tag. (I just give IE 6 users a special page telling them to update their browser.)

I will keep this ticket open but flag as "incomplete" to collect more arguments.

Jan

**sal** · 08/24/2011, 20:16

I suggest reading this short article found on boilerplate:
http://weblogs.asp.net/dwahlin/archi...ilerplate.aspx

Thread: HTML5 Boilerplate - SOLVED

Thread Tools

Search Thread

HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Re: HTML5 Boilerplate - SOLVED

Bookmarks

Bookmarks

Posting Permissions