Re: [WSG] CSS support of HTML5 tags not ready yet?
HI, Joined the chat a bit late, hope the following URL is helpful without being redundant. http://html5boilerplate.com/ ___ Christopher Kennon Bushidodeep Principal/Developer/Designer (w) http://bushidodeep.com (e) field.ni...@gmail.com (gv) 818.322.4513 On Sep 27, 2010, at 3:13 AM, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. http://lotusseedsdesign.com/css-test/templegate.html header { height : 300px; width : 980px; text-align : center; position : relative; clear : both; overflow : hidden; margin : 0 auto; border : 1px solid #369; background : #ddd; } I can't find anything wrong with my style sheet and the html code. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
I explored the html5boilerplate quite a bit, but decided to come up my own template instead. To its credit, it has some really nice stuff in there and I have adapted to my template too, but there are a number of elements that I found that really shouldn't be in there. If you are using the template, you may want to get rid of these two: body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; } This one likely will get Felix Miata all heat up :-) Apart from this, no typeface declared and default to sans or sans serif is not a good approach. I have in a few occasions found it resulted very bad rendering in IE from XP and Windows 7 via Parallel Desktop, however I have not run a thorough test whether it's a combinations of @fontface declaration (with font-wight:normal for headings) and Windows system in Parallel Desktop. html { -webkit-font-smoothing: antialiased; } This is best used only if a site has a darken background. For site that has light or white background, it gives a false impression that the text is blur. I get many feedbacks from clients that their customers complaint about the text not 'clear' in Chrome browser (and Safari too - but no PC user uses Safari I presume :-) ). tee On Oct 1, 2010, at 8:15 AM, field.ni...@gmail.com wrote: HI, Joined the chat a bit late, hope the following URL is helpful without being redundant. http://html5boilerplate.com/ ___ Christopher Kennon Bushidodeep Principal/Developer/Designer (w) http://bushidodeep.com (e) field.ni...@gmail.com (gv) 818.322.4513 On Sep 27, 2010, at 3:13 AM, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. http://lotusseedsdesign.com/css-test/templegate.html header { height : 300px; width : 980px; text-align : center; position : relative; clear : both; overflow : hidden; margin : 0 auto; border : 1px solid #369; background : #ddd; } I can't find anything wrong with my style sheet and the html code. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
I don't have any personal experience with this stuff but your discussion rereminded me of a page I bookmarked recently: http://jdbartlett.github.com/innershiv/ Sorry if it is not relevant, have not read the whole thread in detail. Hope it helps! -- Cheers Ollie @ollicle On Wednesday, September 29, 2010, Rob Crowther robe...@boogdesign.com wrote: On 28/09/10 23:41, Steven Tan wrote: Strange, I expected the innerHTML part to fail. Any idea why that works? Nope! I expected one or the other of the two (DOM and innerHTML) to fail as surely jQuery is using one or other of them underneath? I haven't had time to dig in to the jQuery source and figure out what it's doing, but I guess it's wrapping the DOM approach to make it look like innerHTML, and something is getting lost in translation. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Oliver Boermans wrote: I don't have any personal experience with this stuff but your discussion rereminded me of a page I bookmarked recently: http://jdbartlett.github.com/innershiv/ Yep, that looks like the root of the problem: doesn't work in Internet Explorer when an element's content is added with innerHTML /before/ being appended to the document Thanks. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 27 Sep 2010, at 22:46, tee wrote: Without CSS, wouldn't the browsers render the page just like normal HTML page with browser default styling? Yes … so the blocks would collapse back to inline. Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is off yes? Yes -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 28/09/2010 07:12, David Dorward wrote: On 27 Sep 2010, at 22:46, tee wrote: Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is off yes? Yes To clarify though: the DOM will be messed up in IE without the JS training wheels (document.createElement('header') etc) telling it that there's these new elements. For instance, if I recall correctly, having something like headerblah/header will make IE think that there are a header element and a /header element, so the DOM will look something like header textnode /header where the three are siblings, rather than header -- textnode where textnode is child of the header node P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ __ twitter: @patrick_h_lauke | skype: patrick_h_lauke __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Also ran into an issue when i was using js templating with html5 tags. Html5 shiv only ran once when the document loads. Either need call it again or use html4 tags. I am choosing html4 tags for now. Sigh. Steven On 28/09/2010, at 6:34 PM, Patrick H. Lauke re...@splintered.co.uk wrote: On 28/09/2010 07:12, David Dorward wrote: On 27 Sep 2010, at 22:46, tee wrote: Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is off yes? Yes To clarify though: the DOM will be messed up in IE without the JS training wheels (document.createElement('header') etc) telling it that there's these new elements. For instance, if I recall correctly, having something like headerblah/header will make IE think that there are a header element and a /header element, so the DOM will look something like header textnode /header where the three are siblings, rather than header -- textnode where textnode is child of the header node P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ __ twitter: @patrick_h_lauke | skype: patrick_h_lauke __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Steven Tan wrote: Also ran into an issue when i was using js templating with html5 tags. Html5 shiv only ran once when the document loads. Either need call it again or use html4 tags. I am choosing html4 tags for now. Sigh. All the HTML5 shiv is doing is calling document.createElement against a list of tag names, there's nothing to stop you running that same code before your templating. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
No, it doesn't. But if you use html5 tags in your templating, then it might. Just something to watch out for. One of my templates create a section and header for about 20 times. Steven On 28/09/2010, at 8:49 PM, Rob Crowther robe...@boogdesign.com wrote: Steven Tan wrote: Also ran into an issue when i was using js templating with html5 tags. Html5 shiv only ran once when the document loads. Either need call it again or use html4 tags. I am choosing html4 tags for now. Sigh. All the HTML5 shiv is doing is calling document.createElement against a list of tag names, there's nothing to stop you running that same code before your templating. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 28/09/10 14:10, Steven Tan wrote: No, it doesn't. But if you use html5 tags in your templating, then it might. Just something to watch out for. Sorry, I'm not sure what you're saying here: no it doesn't what? It might what? One of my templates create a section and header for about 20 times. I'm not sure why that would matter? The main problem the html5shiv is trying to solve is that IE doesn't allow CSS to be applied to elements it doesn't recognise. If you call document.createElement('section') and document.createElement('header') then, from then onwards, IE will apply CSS to section and header elements. It doesn't matter how many elements of any type there are. Can you be more clear about the problem you encountered? Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Sure. :) The issue i am encountering is when I generate HTML on the fly using js templates. I have a couple of templates written with sections and headers tags. Because html5 shiv only create the elements on document loads, it will not work the html5 tags that gets appended to the document later. IE keeps throwing an object undefined error. I didn't realize this can be a bit of issue until i started work on it. I could modify the templating js to create the elements, but not sure whether it is worth the trouble at this stage. So watch out if you rely on js libraries that do something like this: $(body).append(sectionsomething/section); $(section).text(new something); // this line will throw an error in IE. Hope that makes sense. On 28/09/2010, at 11:55 PM, Rob Crowther robe...@boogdesign.com wrote: On 28/09/10 14:10, Steven Tan wrote: No, it doesn't. But if you use html5 tags in your templating, then it might. Just something to watch out for. Sorry, I'm not sure what you're saying here: no it doesn't what? It might what? One of my templates create a section and header for about 20 times. I'm not sure why that would matter? The main problem the html5shiv is trying to solve is that IE doesn't allow CSS to be applied to elements it doesn't recognise. If you call document.createElement('section') and document.createElement('header') then, from then onwards, IE will apply CSS to section and header elements. It doesn't matter how many elements of any type there are. Can you be more clear about the problem you encountered? Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Steven Tan wrote So watch out if you rely on js libraries that do something like this: $(body).append(sectionsomething/section); $(section).text(new something); // this line will throw an error in IE. Hope that makes sense. Ah, I understand, interesting. I've done some example cases: Base case for reference, loads html5shiv to render static content (works in IE8): http://www.boogdesign.com/examples/html5shiv-static.html Load html5shiv, create element with jQuery then change with jQuery (fails in IE8): http://www.boogdesign.com/examples/html5shiv-jquery.html Load html5shiv, use DOM methods to create element, change with jQuery (works in IE8): http://www.boogdesign.com/examples/html5shiv-dom-jquery.html Load html5shiv, use innerHTML to create element, change with jQuery (works in IE8): http://www.boogdesign.com/examples/html5shiv-inner-jquery.html So it looks like this is the broken part: $(body).append(sectionsomething/section); If you create the element with other methods, the next line works fine. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Nice setup. Thanks for explaining it better than I do. ;) Load html5shiv, use innerHTML to create element, change with jQuery (works in IE8): http://www.boogdesign.com/examples/html5shiv-inner-jquery.html Strange, I expected the innerHTML part to fail. Any idea why that works? So it looks like this is the broken part: $(body).append(sectionsomething/section); If you create the element with other methods, the next line works fine. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 28/09/10 23:41, Steven Tan wrote: Strange, I expected the innerHTML part to fail. Any idea why that works? Nope! I expected one or the other of the two (DOM and innerHTML) to fail as surely jQuery is using one or other of them underneath? I haven't had time to dig in to the jQuery source and figure out what it's doing, but I guess it's wrapping the DOM approach to make it look like innerHTML, and something is getting lost in translation. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
try adding display: block - by default they are usually displayed as inline in ie you need to add them via javascript before it will recognise them: document.createElement(header); -- Chris Knowles On 27/09/10 8:13 PM, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. http://lotusseedsdesign.com/css-test/templegate.html header { height : 300px; width : 980px; text-align : center; position : relative; clear : both; overflow : hidden; margin : 0 auto; border : 1px solid #369; background : #ddd; } I can't find anything wrong with my style sheet and the html code. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
A best practice: Do browser detection instead. script type=text/javascript function html5elm(elm) { return !!document.createElement(elm); } var myArray = ['header','nav','section','aside','article','footer','hgroup']; for (var i = 0; i myArray.length; i++){ html5elm(myArray[i]); } /script It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. IE9 support them natively. HM. On Mon, Sep 27, 2010 at 11:25 AM, Chris Knowles w...@ckweb.com.au wrote: try adding display: block - by default they are usually displayed as inline in ie you need to add them via javascript before it will recognise them: document.createElement(header); -- Chris Knowles On 27/09/10 8:13 PM, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. http://lotusseedsdesign.com/css-test/templegate.html header { height : 300px; width : 980px; text-align : center; position : relative; clear : both; overflow : hidden; margin : 0 auto; border : 1px solid #369; background : #ddd; } I can't find anything wrong with my style sheet and the html code. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
I meant FEATURE Detection. Sorry. Hm. On Mon, Sep 27, 2010 at 11:34 AM, Hugo Mendes hugo.men...@gmail.com wrote: A best practice: Do browser detection instead. script type=text/javascript function html5elm(elm) { return !!document.createElement(elm); } var myArray = ['header','nav','section','aside','article','footer','hgroup']; for (var i = 0; i myArray.length; i++){ html5elm(myArray[i]); } /script It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. IE9 support them natively. HM. On Mon, Sep 27, 2010 at 11:25 AM, Chris Knowles w...@ckweb.com.au wrote: try adding display: block - by default they are usually displayed as inline in ie you need to add them via javascript before it will recognise them: document.createElement(header); -- Chris Knowles On 27/09/10 8:13 PM, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. http://lotusseedsdesign.com/css-test/templegate.html header { height : 300px; width : 980px; text-align : center; position : relative; clear : both; overflow : hidden; margin : 0 auto; border : 1px solid #369; background : #ddd; } I can't find anything wrong with my style sheet and the html code. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Tee: try putting:!--[if IE] script src=http://html5shiv.googlecode.com/svn/trunk/html5.js;/script ![endif]-- In the head, and/*for html5 in IE*/ article, aside, figure, figcaption, footer, header, mark, menu, nav, section, small, time, video { display : block; } (or whatever is relevant) in your CSS.Bob- Original Message - From: tee weblis...@gmail.com To: wsg@webstandardsgroup.org Sent: Monday, September 27, 2010 11:13 AM Subject: [WSG] CSS support of HTML5 tags not ready yet? Only the two Webkit browsers are able to render the header and footer correctly. http://lotusseedsdesign.com/css-test/templegate.html header { height : 300px; width : 980px; text-align : center; position : relative; clear : both; overflow : hidden; margin : 0 auto; border : 1px solid #369; background : #ddd; } I can't find anything wrong with my style sheet and the html code. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 27 Sep 2010, at 11:13, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. Most browsers don't yet apply default styles to them. Current versions of IE don't recognise them at all without a JS shim. While you can use a JS shim and explicitly set display: block, the rendering fails (usually quite badly) if JS or CSS isn't available. I wouldn't depend on those elements until HTML5 browsers are common. -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Thanks all for the help. display block it's is. I am so used to expecting Firefox to render everything correctly! When it doesn't, I couldn't think further :) Was going to use modernizr, therefor not worry about IE browsers, but didn't realize the script couldn't take care of CSS part. Are these HTML5 tags inline elements by default or it's that (the latest) Firefox and Opera not yet supporting them? I thought they are of block elements. @David, this is going to be a personal site for me to learn the HTML5, so I am not worry the JS part too much. Without CSS, wouldn't the browsers render the page just like normal HTML page with browser default styling? Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is off yes? tee On Sep 27, 2010, at 3:50 AM, David Dorward wrote: On 27 Sep 2010, at 11:13, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. Most browsers don't yet apply default styles to them. Current versions of IE don't recognise them at all without a JS shim. While you can use a JS shim and explicitly set display: block, the rendering fails (usually quite badly) if JS or CSS isn't available. I wouldn't depend on those elements until HTML5 browsers are common. -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 27/09/10 22:46, tee wrote: Are these HTML5 tags inline elements by default or it's that (the latest) Firefox and Opera not yet supporting them? I thought they are of block elements. Firefox 4.0 will have support in the default stylesheet for the new HTML5 elements. It'll also have the HTML5 parser enabled by default, enabling inline SVG and MathML: http://hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svg-speed-and-more/ Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***